使用 Object.observe 响应更改

Alex Danilo

很多使用 MVC 或 MDV 的 JavaScript 框架都需要对对象的变化做出响应,这些对象会在 Web 应用内对状态进行建模。此功能是数据绑定模型的基本组成部分。

您可以通过多种不同的方式监控 JavaScript 对象和 DOM 属性以触发某种操作,但由于各种原因(例如性能等),大多数技术并不理想。

为了提高 Web 应用的性能,我们向 TC39 提出了一种名为 Object.observe() 的新方法。TC39 是监督 ECMAScript (JavaScript) 开发的标准机构。

Object.observe() 可让您为每次对象或其属性发生更改时调用的任何 JavaScript 对象添加监听器。

您现在可在 Chrome Canary 版本 25 中试用此功能。

若要体验此功能,您需要在 Chrome Canary 中启用启用实验性 JavaScript 标志并重启浏览器。该标志可在“about:flags”下找到,如下图所示:

Chrome flag。

下面是一个简单的示例,展示了如何在对象上设置观察者:

var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
    // do something
}
Object.observe(beingWatched, somethingChanged);

当对象“beingWatched”进行修改时,它将触发回调函数“somethingChanged”,用于接收已应用于该对象的一系列更改。

因此,JavaScript 引擎可以自由缓冲大量更改,并在对回调函数的一次调用中全部传递这些更改。这有助于优化回调,使您的代码可以执行大量 JavaScript 操作,但通过将更新一起批量处理,仅处理少数回调。

每当添加、修改、删除或重新配置属性时,都会触发回调函数。

观察数组时另一个非常实用的功能是,如果某个数组发生了多次更改,您就可以使用 Change Summary 辅助库创建最小更改集,这样客户端 JavaScript 就不必手动扫描数组来检查每项内容。

通过在“somethingChanged”回调函数中执行类似操作,您可以轻松遍历所有更改:

function whatHappened(change) {
    console.log(change.name + " was " + change.type + " and is now " + change.object[change.name]);
}
function somethingChanged(changes) {
    changes.forEach(whatHappened);
}

type 属性用于标识对象发生了什么情况。以下代码演示了所设置属性和关联的 type 的一些示例。

beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new

此技术的优势在于,所有的监控智能功能都位于 JavaScript 引擎内部,这使得浏览器可以对其进行完善的优化,并释放您的 JavaScript 的空间,以实现充分利用此功能的功能。

另一个非常棒的开发功能是,只要对象发生变化,就能使用 Object.observe() 触发调试程序。为此,您需要使用如下示例所示的代码。

Object.observe(beingWatched, function(){ debugger; });

您可以观看有关 Object.observe() 的精彩视频简介,对此进行详细介绍。

我们还提供了不错的描述性文字实际示例

TC39 标准制定机构希望就此功能提供反馈,欢迎您试用并提供反馈。