Pourquoi y a-Objet.observer() obsolete

Est-il une autre approche?

Est-il une autre façon de faire de la détection de changement dans l'objet?

Il y a la méthode de remplacement, mais quelqu'un peut me dire comment puis-je le faire en utilisant un Proxy:

var obj = {
  foo: 0,
  bar: 1
};

Object.observe(obj, function(changes) {
  console.log(changes);
});

obj.baz = 2;
//[{name: 'baz', object: <obj>, type: 'add'}]

obj.foo = 'hello';
//[{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]
  • Proxy() est là maintenant!
  • Proxy
  • Ou utiliser les getter ou setter
  • J'ai vu la méthode de remplacement, mais il a obtenu confondre pourriez-vous veuillez donner des exemple simple.
  • Proxy et des getters/setters sont très limitées par rapport à Object.observe. Je souhaite qu'il n'était pas abandonné.
  • Objet.observer n'a pas rupture d'égalité stricte.
  • Proxy de l'objet n'est plus utile lorsque vous souhaitez déboguer quelque chose d'original et de code n'utilise pas de proxy ffs

InformationsquelleAutor Shad | 2016-03-28
  1. 50

    Vous pouvez réaliser cela avec des getters et les setters.

    var obj = {
  get foo() {
    console.log({ name: 'foo', object: obj, type: 'get' });
    return obj._foo;
  },
  set bar(val) {
    console.log({ name: 'bar', object: obj, type: 'set', oldValue: obj._bar });
    return obj._bar = val;
  }
};

obj.bar = 2;
//{name: 'bar', object: <obj>, type: 'set', oldValue: undefined}

obj.foo;
//{name: 'foo', object: <obj>, type: 'get'}

    Sinon, dans un navigateur avec le support de Proxy, vous pouvez écrire un solution générique.

    var obj = {
  foo: 1,
  bar: 2
};

var proxied = new Proxy(obj, {
  get: function(target, prop) {
    console.log({ type: 'get', target, prop });
    return Reflect.get(target, prop);
  },
  set: function(target, prop, value) {
    console.log({ type: 'set', target, prop, value });
    return Reflect.set(target, prop, value);
  }
});

proxied.bar = 2;
//{type: 'set', target: <obj>, prop: 'bar', value: 2}

proxied.foo;
//{type: 'get', target: <obj>, prop: 'bar'}
    • Merci Dan, je suis en train de lancer le premier exemple, il est en cours d'exécution boucle infinie. Je suis en cours d'exécution de cet exemple en chrome 48.x
    • Oups. Manqué un trait de soulignement.
    • oui comme le Tchad mentionné votre première soln exécute une boucle infinie.
    • Est-il un avantage à l'utilisation de l'API reflection dans ce cas (par opposition à de simples accès à l'objet)?
    • à l'aide d'accès à l'objet qui va déclencher l'proxy pièges provoquant de nouveau la boucle infinie.
    • Merci mais je ne peux pas reproduire une boucle infinie avec target[prop] = value - quel milieu êtes-vous en cours d'exécution dans? Aussi ne pas le proxy de remplacer la variable d'origine, afin "d'observer" un autre obj.bar = x ne pas faire ce qui est suggéré ici.
    • Peut-être quelque chose à faire incomplète de la prise en charge du proxy. Beaucoup de discussion plus approfondie sur cette here.
    • C'est très bien si vous êtes propriétaire de l'objet et de vous pré-méditer avoir des getters/setters ou un Proxy. Cependant, si vous recevez une référence à un autre objet, vous pourriez l'endommager par la définition des getters/setters sur les propriétés existantes. Object.observe n'aurait pas eu ce problème si c'est accepté dans la langue. Proxy aussi ont des limitations Object.observe n'a pas, dans le sens que vous devez pré-méditer faire de vos objets observables, alors que Object.observe travaux sur l'arbitraire de la 3e partie des références.
    • ne déclencher obtenir des pièges. SOCIÉTÉ.

    InformationsquelleAutor Dan Prince
  2. 13

    Disclaimer: je suis l'auteur de la objet-observateur bibliothèque est proposée ci-dessous.

    Je n'avais pas aller avec des getters/setters solution - c'est compliqué, peu évolutif et pas facile à gérer. Épine dorsale ont fait de leur liaison bidirectionnelle de cette façon et le passe-partout pour qu'il fonctionne correctement est tout à fait un morceau de code.

    Procurations est la meilleure façon d'obtenir ce dont vous avez besoin, il suffit d'ajouter les exemples ci-dessus quelques rappels de l'enregistrement et de la gestion et de les exécuter sur un des changements.

    En ce qui concerne le polyfill bibliothèques: certains de/la plupart de ces mises en œuvre en utilisant "sale cochez la case' ou l'interrogation, la technique pas efficace, pas performant. Parfois, c'est le cas de le polyfill souligné par Nirus ci-dessus.

    Je le recommande pour ramasser une bibliothèque qui ne l'observation par Procurations. Il ya un peu là-bas, objet-observateur être l'un d'entre eux: l'une écrite, pour ce cas d'utilisation exactement, utilise natif de Procurations, profondeur de l'arbre-observation etc.

    • Quel sujet de la prise en charge du navigateur? Proxy ne peut pas être polyfilled ou transpiled, de sorte que l'OMI en utilisant des Proxys n'est pas vraiment une bonne idée dans les environnements de production pour l'instant!
    • Droit, cette application ne fonctionne pas sur n'importe quel environnement qui n'est pas en faveur des objets Proxy. Pourtant, tous téléchargeables principaux navigateurs sont déjà là (Chrome, Firefox, Opera) et effectivement Bord ainsi. Les versions mobiles sont également là. Donc, le seul souci que je peux voir, c'est IE pré-Bord - eh bien, personnellement, j'ai laissé derrière.
    • Dans le monde de l'entreprise, à l'abandon IE soutien n'est souvent pas une option.
    • 🙂 étant employés d'une entreprise moi - même- vous êtes effraction dans une porte ouverte! Eh bien, ce projet est une sorte de désir de m'exprimer mon propre aide pour mon propre web apps + expression d'une extrême aversion pour quelque chose comme Angulaires<any_version>/Réagir et autres. Je suis aujourd'hui d'écrire des choses avec elle en l'intégrant fortement avec CustomElements et de profiter du nouveau monde. No IE il y a, pour le meilleur et pour le pire.
    InformationsquelleAutor GullerYA
  3. 13

    @Dan Prince solution devrait être le premier choix toujours.

    Juste au cas où, pour quelque raison que si vous voulez prendre en charge les navigateurs qui sont assez âgés, je vous suggère d'aller pour les polyfill de bibliothèques disponibles sur Github ou de l'utilisation Objet.defineProperties API qui est pris en charge dans IE 9 pour reproduire le même.

    var obj = Object.defineProperties({}, {
    "foo":{
        get:function(){
            console.log("Get:"+this.value);
        },
        set:function(val){
            console.log("Set:"+val);
            this.value = val;
        }
    },

    "bar":{         
        get:function(){
            console.log("Get:"+this.value);
        },
        set:function(val){
            console.log("Set:"+val);
            this.value = val;
        }
    }
 });

    Remarque: Ce n'est pas une solution évolutive. Prendre une décision éclairée si
    l'utilisation de la
    au-dessus de l'API pour les plus grands objets de données et de calcul intensif exigences.

    InformationsquelleAutor Nirus