所有浏览器的Object.watch()？

Question

请务必阅读以下所有评论.不推荐使用Object.Watch和Object.Observe.请参阅Elliot B对更新(截至2018年6月)方法的评论.

---

我一直在寻找一种简单的方法来监控对象或变量的变化,我发现Object.Watch,Mozilla浏览器支持这种方式,但IE不支持.所以我开始四处寻找,看是否有人写过某种等价物.

关于我发现的唯一一件事是jQuery插件,但我不确定这是不是最好的方法.我当然在大多数项目中都使用jQuery,所以我并不担心jQuery方面......

无论如何,问题是:有人能告诉我一个jQuery插件的工作示例吗？我有问题让它工作......

或者,是否有人知道任何可以跨浏览器工作的更好的替代品？

答案后更新:

谢谢大家的回复!我试过这里发布的代码:http: //webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html

但我似乎无法使其与IE一起工作.下面的代码在Firefox中运行良好,但在IE中没有任何作用.在Firefox中,每次Object.Observe更改Object.watch()时watcher.status都会调用in ,您可以在页面上看到输出.在IE中,这不会发生,但我可以看到document.write()更新值,因为最后一次watcher.watch()调用显示正确的值(在IE和FF中).但是,如果没有调用回调函数,那那就毫无意义...... :)

我错过了什么吗？

var options = {'status': 'no status'},
watcher = createWatcher(options);

watcher.watch("status", function(prop, oldValue, newValue) {
  document.write("old: " + oldValue + ", new: " + newValue + "<br>");
  return newValue;
});

watcher.status = 'asdf';
watcher.status = '1234';

document.write(watcher.status + "<br>");

Answer 1

(抱歉交叉发布,但我给同一个问题的答案在这里工作正常)

我刚刚创建了一个小物件.它适用于IE8,Safari,Chrome,Firefox,Opera等.

Answer 2

该插件只是使用计时器/间隔来重复检查对象的更改.也许足够好但我个人希望作为观察者更加直接.

这是尝试带来watch/ unwatch到IE:http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html.

它确实改变了Firefox添加观察者的方法.代替 :

var obj = {foo:'bar'};
obj.watch('foo', fooChanged);

你做:

var obj = {foo:'bar'};
var watcher = createWatcher(obj);
watcher.watch('foo', fooChanged);

不那么甜蜜,但作为观察员,您会立即得到通知.

Answer 3

这个问题的答案有点过时了。Object.watch和Object.observe均已弃用，不应使用。

今天，您现在可以使用代理对象来监视（和拦截）对对象所做的更改。这是一个基本示例：

var targetObj = {};
var targetProxy = new Proxy(targetObj, {
  set: function (target, key, value) {
      console.log(`${key} set to ${value}`);
      target[key] = value;
  }
});

targetProxy.hello_world = "test"; // console: 'hello_world set to test'

如果需要观察对嵌套对象所做的更改，则需要使用专门的库。我发布了Observable Slim，它的工作方式如下：

var test = {testing:{}};
var p = ObservableSlim.create(test, true, function(changes) {
    console.log(JSON.stringify(changes));
});

p.testing.blah = 42; // console:  [{"type":"add","target":{"blah":42},"property":"blah","newValue":42,"currentPath":"testing.blah",jsonPointer:"/testing/blah","proxy":{"blah":42}}]

Answer 4

目前的答案

使用新的Proxy对象,可以观察对其目标的更改.

let validator = {
    set: function(obj, prop, value) {
        if (prop === 'age') {
            if (!Number.isInteger(value)) {
                throw new TypeError('The age is not an integer');
            }
            if (value > 200) {
                throw new RangeError('The age seems invalid');
            }
        }

        // The default behavior to store the value
        obj[prop] = value;

        // Indicate success
        return true;
    }
};

let person = new Proxy({}, validator);

person.age = 100;
console.log(person.age); // 100
person.age = 'young'; // Throws an exception
person.age = 300; // Throws an exception

从2015年的旧答案

您可以使用ES7中的Object.observe().这是一个polyfill.但是Object.observe()现在被取消了.对不起人!

Answer 5

请注意,在Chrome 36及更高版本中,您也可以使用Object.observe它.这实际上是未来ECMAScript标准的一部分,而不是像Mozilla那样的浏览器特定功能Object.watch.

Object.observe仅适用于对象属性,但性能要高于Object.watch(用于调试目的,而非生产用途).

var options = {};

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

options.foo = 'bar';