在 JavaScript 中试验 Object.observe 以及我如何发现它很有用

Dave_Voyles

5.00/5 (2投票s)

2015 年 11 月 6 日

CPOL

5分钟阅读

9428

在构建经典 FMV 游戏《Night Trap》的浏览器版本时，微软技术传教士 David Voyles 需要一个解决方案来处理基于事件的触发器。这时，Object.observe 出现了，解决了这个问题。

我最近构建了一个快速原型，用于在浏览器中运行经典的互动电影游戏《Night Trap》。资源从 Azure Media Services 流式传输，并通过开源的 video.js 播放器作为 .mp4 播放。我还将所有视频转换为自适应流，目前正在使用 Azure Media Player。阅读我的两部分博文 Deconstructing Night Trap，了解该过程的概述。

在重建《Night Trap》时，我遇到了一个问题，需要监听一个事件，特别是在用户查看某个房间的摄像机时，视频源的 URL 会发生变化。例如，我正在查看厨房摄像机，但什么也没发生，然后在 1:20 的时间点，角色应该进入房间。我如何才能在这个时候告知视频播放器 URL 已更改，并且它应该播放我刚刚传入的新 URL 呢？

这时，Object.observe 出现了，解决了这个问题。

什么是 Object.observe？

在寻找可以立即使用的解决方案时，我偶然发现了 MaxArt2501 的这个优秀的 GitHub 仓库。在该仓库中，他编写了一个 polyfill，让我现在就可以使用 Object.observe。太完美了！

他的描述很好地总结了这个问题

Object.observe 是一个非常好的 EcmaScript 7 特性，它已在 2014 年的上半年登陆 Blink 内核浏览器（Chrome 36+，Opera 23+）。Node.js 在版本 0.11.x 中也提供了该特性，并且自首次公开版本以来，io.js 也支持它。

简而言之，这是 Web 开发者在 10-15 年前就希望拥有的功能之一：它会通知应用程序对象上发生的任何更改，例如添加、删除或更新属性、更改其描述符等。它甚至支持自定义事件。太棒了！

问题在于，大多数浏览器仍然不支持 Object.observe。虽然在技术上不可能完美地复制该特性的行为，但通过保持相同的 API，可以做一些有用的事情。

如果你不熟悉 polyfill，它们基本上是一种临时修复，用 JavaScript 编写，为将来可能/可能不会在浏览器中实现的特性提供临时解决方案。虽然我们更希望将这些语言特性原生内置到浏览器中，但我们也必须理解实现这些东西需要一些工作，并且需要确定哪些特性应该被添加。

如上所述，这是一个 EcmaScript 7 特性，但目前我们甚至还没有在所有浏览器中完全支持 EcmaScript 6（JavaScript 2015），所以我不会对它的实现抱有太大期望。

一个出色的 polyfill

我发现它非常容易使用，并且在几秒钟内就运行起来了。我包含了 Bower 包，然后像这样开始观察游戏中的一个对象，该对象包含我的 URL 属性：

 	
    Object.observe(current,

      function (changes){

        if (changes[1]!== undefined) {

          console.log('Changes: ', changes[1].name    );

          console.log('Old Val: ', changes[1].oldValue);

        }

      }

    );

查看原始文件Object.observe 由 GitHub 托管

它是如何工作的？

我最初考虑自己写一些东西，比如每隔几秒轮询一次更改的属性，但当我偶然发现了 MaxArt 的解决方案并看到它奏效时，我就停止了。既然已经有了可用的东西，何必费力运行一系列测试并浪费时间试图重新发明轮子呢。

果不其然，这位开发者也在使用轮询。没关系，只要不影响性能，我就可以接受。

浏览器支持

我最初担心会立即限制用户群体，这是向项目中添加新库时一个常见问题，而且到目前为止，我一直都是自己编写所有代码。只要支持 IE9+，我就很开心了，果不其然，它支持。更好的是，它不会覆盖 Chrome 对该特性的原生实现。

Firefox 35-39 稳定版和 37-41 开发者版
Internet Explorer 11
Microsoft Edge
Safari 桌面版 8
Safari iOS 8.2
Android 浏览器 4.4
Internet Explorer 5、7、8、9、10（作为 IE11 在模拟模式下）
node.js 0.10.33-40

总结

一如既往，您可以在我的 GitHub 帐户上找到 alpha 版本的代码。我每天都会对其进行一些更新，并计划在九月底完成一个 5 分钟的演示。如果您发现了其他非常有用的库，我也很乐意了解。

另外，请务必查看关于 Reddit 上这种方法的优缺点的精彩讨论。

在 JavaScript 中试验 Object.observe 以及我如何发现它很有用

什么是 Object.observe？

一个出色的 polyfill

它是如何工作的？

浏览器支持

总结

更多 Web 开发实践