从 Object.observe 过渡
Transitioning away from Object.observe
我一直在使用 Object.observe()
作为 nw.js 项目的一部分,该项目现在正在从 nw.js v.0.12.3 过渡到最新版本。
我有这样的代码:
..(myclass)..
data: { a:0, b:42 },
setupHandlers: function () {
Object.observe(this.data, changes => this.draw());
},
draw: function () { .. }
我的初始转换如下:
data: {_a: 0, _b: 42},
get a() { return this._a; }
set a(val) { this.data._a = val; this.draw(); }
get b() { return this._b; }
set b(val) { this.data._b = val; this.draw(); }
然后将写入数据 (myobj.data.a = 1
) 的每个位置更改为写入对象 (myobj.a = 1
),从而使用 setter.
这是一个非常劳动密集型的转换,有没有更简单的方法?
我们最终使用 Proxy
来捕捉属性赋值:
const shallow_observer = function (obj, fn) {
return new Proxy(obj, {
set(target, name, val) {
target[name] = val;
if (fn) fn(target, name, val);
return true;
}
});
};
这让我们可以做到:
data: { a:0, b:42 },
setupHandlers: function () {
this.data = shallow_observer(this.data, (data, field, value) => this.draw());
},
draw: function () { .. }
我们也有一个 deep_observer
函数(复杂得多),它检测嵌套数据结构中的变化,但 shallow_observer
足以满足我们所有的用例。
我一直在使用 Object.observe()
作为 nw.js 项目的一部分,该项目现在正在从 nw.js v.0.12.3 过渡到最新版本。
我有这样的代码:
..(myclass)..
data: { a:0, b:42 },
setupHandlers: function () {
Object.observe(this.data, changes => this.draw());
},
draw: function () { .. }
我的初始转换如下:
data: {_a: 0, _b: 42},
get a() { return this._a; }
set a(val) { this.data._a = val; this.draw(); }
get b() { return this._b; }
set b(val) { this.data._b = val; this.draw(); }
然后将写入数据 (myobj.data.a = 1
) 的每个位置更改为写入对象 (myobj.a = 1
),从而使用 setter.
这是一个非常劳动密集型的转换,有没有更简单的方法?
我们最终使用 Proxy
来捕捉属性赋值:
const shallow_observer = function (obj, fn) {
return new Proxy(obj, {
set(target, name, val) {
target[name] = val;
if (fn) fn(target, name, val);
return true;
}
});
};
这让我们可以做到:
data: { a:0, b:42 },
setupHandlers: function () {
this.data = shallow_observer(this.data, (data, field, value) => this.draw());
},
draw: function () { .. }
我们也有一个 deep_observer
函数(复杂得多),它检测嵌套数据结构中的变化,但 shallow_observer
足以满足我们所有的用例。