在JavaScript中试用Object.observe

Object.observe数据绑定浏览器支持比较

本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

我最近构建了一个快速原型,以使经典的交互式电影游戏Night Trap在浏览器中运行。 资产从Azure媒体服务流传输,并通过开源video.js播放器作为.mp4播放。 我还将所有视频转换为自适应流,现在正在使用Azure Media Player。 阅读我的两部分文章,《 解构夜陷阱》 ,以大致了解该过程。

在重建Night Trap时 ,我遇到了一个问题,我需要听一个事件,特别是当用户在特定房间中观看摄像机时视频供稿的URL发生更改时。 例如,我正在看着厨房的摄像头,什么也没发生,应该以1:20的字符进入房间。 如何告诉视频播放器该网址当时已更改,并且应该播放刚传入的新网址?

在其中Object.observe保存一天。

什么是Object.observe?

在寻找可以立即使用的解决方案时,我偶然发现了MaxArt2501这个出色的GitHub存储库 。 在其中,他编写了一个polyfill,使我现在可以使用Object.observe。 完善!

他的描述很好地概括了这个问题:

Object.observe是一个非常不错的EcmaScript 7的功能已经在基于闪烁的浏览器(Chrome浏览器36+,歌剧23+)登陆2014年第一部分Node.js也在0.11.x版中提供了它,并且自io.js首次公开发行以来就受到其支持。
简而言之,这是Web开发人员希望在10到15年前拥有的东西之一:它通知应用程序对对象所做的任何更改,例如添加,删除或更新属性,更改其描述符等。 它甚至支持自定义事件。 甜!

问题在于大多数浏览器仍不支持Object.observe。 从技术上讲, 不可能完美地复制功能的行为,但可以做一些有用的事情来保持相同的API。

如果您不熟悉polyfill,它们基本上是使用JavaScript进行的临时修复,它为功能的临时解决方案提供了将来可能会在浏览器中实现或可能不会实现的功能。 尽管我们希望将语言的这些功能内置于浏览器中,但我们也必须了解,实现这些功能也需要一些项目,并且有必要对添加的功能进行优先级排序。

如上所述,这是EcmaScript 7的一项功能,但目前我们甚至还没有在所有浏览器中正确支持EcmaScript 6(JavaScript 2015),因此我不会屏住呼吸等待这种情况的发生。

一个梦幻般的填充

我发现它非常易于使用,并且可以在几秒钟内运行。 我加入了Bower程序包,然后开始观察游戏中包含我的URL属性的对象之一,如下所示:


Object.observe(current,
      function (changes){
        if (changes[1]!== undefined) {
          console.log('Changes: ', changes[1].name    );
          console.log('Old Val: ', changes[1].oldValue);
        }
      }
    );

viewrawObject.observe托管爱用的GitHub

它是如何工作的?

最初,我曾考虑过自己写一些东西,只是每隔几秒钟轮询一次更改的属性,但是当我遇到MaxArt解决方案并看到它可行时,我停了下来。 当我已经有了一些可行的东西时,为什么还要花时间进行一系列测试并浪费时间尝试重新发明轮子呢?

果然,该开发人员也正在使用轮询。 嘿,只要我没有性能问题,就可以了。

浏览器支持

最初,我担心我会立即限制用户群,这是在向项目中添加新库时的一个普遍问题,直到现在,我自己编写了所有代码。 只要它支持IE9 +,我就是一个快乐的露营者,而且可以肯定的是。 更好的是,它不会覆盖Chrome对该功能的本机实现。

  • Firefox 35-39稳定版和37-41开发人员版
  • Internet Explorer 11
  • 微软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构建的代码。 我倾向于每天对其进行一点更新,并计划在9月底之前完成5分钟的演示。 如果您找到了其他一些非常有用的库,我也很想听听它们。

另外,请务必在Reddit上仔细讨论有关此方法的优缺点

Web开发更多动手

本文是Microsoft技术传播者开发的Web开发系列文章的一部分,内容涉及实用的JavaScript学习,开源项目以及互操作性最佳实践,包括Microsoft Edge浏览器和新的EdgeHTML呈现引擎

我们鼓励您使用dev.modern.IE上的免费工具跨浏览器和设备进行测试,包括Microsoft Edge(Windows 10的默认浏览器):

我们的工程师和宣传人员在Microsoft Edge和Web平台上进行了深入的技术学习:

Web平台的更多免费跨平台工具和资源:

From: https://www.sitepoint.com/experimenting-object-observe-javascript-found-useful/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值