从多个地方观看相同 obj/property 的最有效的“观看”js 是什么？答案

【问题标题】：What's the most efficient 'watch' js that watch same obj/property from multiple places?从多个地方观看相同 obj/property 的最有效的“观看”js 是什么？
【发布时间】：2014-06-07 04:47:16
【问题描述】：

我使用 ECMA7 Object.observe 或 Mozilla Object.watch 而不是节点的 eventEmitter 进行数据绑定。

对于Object.observe，我找不到任何实现 android 浏览器兼容性的方法。他们基本上必须使用 setTimeout 轮询，所以我放弃了。

相反，Object.watch 可以在没有任何轮询的情况下运行 Chrome 库和本机 Firefox 等。

我找到的代码是

if (!Object.prototype.watch)
{
    Object.defineProperty(Object.prototype, "watch",
    {
        enumerable: false,
        configurable: true,
        writable: false,
        value: function(prop, handler)
        {
            var
            oldval = this[prop],
                newval = oldval,
                getter = function()
                {
                    return newval;
                },
                setter = function(val)
                {
                    oldval = newval;
                    return newval = handler.call(this, prop, oldval, val);
                };

            if (delete this[prop])
            { // can't watch constants
                Object.defineProperty(this, prop,
                {
                    get: getter,
                    set: setter,
                    enumerable: true,
                    configurable: true
                });
            }
        }
    });
}

// object.unwatch
if (!Object.prototype.unwatch)
{
    Object.defineProperty(Object.prototype, "unwatch",
    {
        enumerable: false,
        configurable: true,
        writable: false,
        value: function(prop)
        {
            var val = this[prop];
            delete this[prop]; // remove accessors
            this[prop] = val;
        }
    });
}

这适用于

obj.watch('foo',
      function(id, oldval, newval)
      {
        //..........

        return newval;
      });

但是，出现了一个很大的问题，就是当我在各个地方实现多个watch时，只有第一个obj.watch被触发，其余的都不会触发。

原因很明显。

在第一次触发时，其余的 obj.watch 会自动设置为监视更改的值。

测试代码：

var obj = {
      foo: 5
    };

obj.watch('foo',
  function(id, oldval, newval)
  {
    alert(newval);

    return newval;
  });

obj.watch('foo',
  function(id, oldval, newval)
  {
    alert(newval);

    return newval;
  });

obj.foo = 7;

结果：没有错误，但只警告过一次。

实际上，我试图找到替代库/机制，允许为同一个对象实例/属性触发多个监视块。

再次，我将避免使用 eventEmitter 模式，而是使用观察者模式。你有什么主意吗？谢谢。

【问题讨论】：

标签： javascript node.js watch eventemitter object.observe

【解决方案1】：

自我回答。

还不确定，但一种方法是使用
melanke/Watch.JS/ https://github.com/melanke/Watch.JS/ 我早就知道了。

它确实有效：

http://jsfiddle.net/NbJuh/62/

//defining our object no matter which way we want
var obj = {
    foo: "initial value of attr1" 
};

//defining a 'watcher' for an attribute
watch(obj, "foo", function(){
    alert("foo changes!");
});
watch(obj, "foo", function(){
    alert("foo changes!");
});
//when changing the attribute its watcher will be invoked
obj.foo = "other value";

【讨论】：

【解决方案2】：

这是一个非常接近您所寻找的小库

https://github.com/imolus/js-object-watch

【讨论】：

【解决方案3】：

制作精良的Object.defineProperty 应该可以解决问题。

更现代的方法是使用带有new Proxy(object, {...}) 的代理。

【讨论】：