数据视图双向绑定(纯 JS 利用 Object.defineProperty 实现)

上一篇文章里介绍了使用 jQuery 的事件来实现数据视图双向绑定,并且提到 Object.defineProperty。这篇文章专门详解如何用 Object.defineProperty 方法同样实现数据视图双向绑定的功能。

Object.defineProperty 是用来控制 Javascript 对象属性读取行为的方法,用法很直白:

其中第二个参数是对象的属性名,第三个参数是行为的配置。除了可以对属性值获取以及复制行为进行控制以外,还可以配置是否可写,是否可被遍历等,具体的配置参数在 MDN 相关章节解释得很清楚,我这就不多说了,这里我能用上的也只有 get 和 set 而已。

利用 Object.defineProperty 做双向绑定的具体思路:

  • 利用 get,将页面上的某个地方显示的数据,绑定到对象上
  • 利用 set,当对象的属性发生改变时,更新到视图上

完整的代码示例:

wx pay

CC BY-NC-ND 4.0 数据视图双向绑定(纯 JS 利用 Object.defineProperty 实现) by Chrisyue's Blog is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

发表评论

电子邮件地址不会被公开。