Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

双向绑定两个对象的属性

  在 Angular 1.x 中,两个 $scope 上的变量可以通过一种神奇的方式关联起来。但是 Angular 的实现原理是我不能忍的,所以我是一个及其讨厌 Angular 的人。但是咱黑一个东西也不能脑残黑,把两个对象的某个属性关联起来这个做法是非常有用的,那就通过访问器属性来实现试试?
  单向绑定很简单,只要把一个对象访问器的操作映射到另一个对象的某个属性上即可,比如:
<script> let a = { a: 123 }; let b = { get b() { return a.a; }, set b(value) { a.a = value; } }; console.log(a.a); b.b = 456; console.log(a.a); </script>   但是双向绑定就不能这么玩了,如果上面的代码把 a.a 又映射回 b.b 就会造成死循环。   把两个属性关联起来,就需要把两边的属性都定义成访问器属性,而被定义成访问器属性后就不能存值了。所以我们需要一个额外的堆变量来存放它们的值。下面是一个简易实现:
<script> function link(o1, n1, o2, n2, value) { let desc = { get() { return value; }, set(v) { value = v; } }; Object.defineProperty(o1, n1, desc); Object.defineProperty(o2, n2, desc); } let a = {}; let b = {}; link(a, 'a', b, 'b', 123); console.log(a.a); b.b = 456; console.log(a.a); </script>   这个 link 函数就是把两个对象的属性绑定在一起,并且传入一个 value 作为初始值。link 这个函数的作用域正好就可以用来存储这对绑定属性的值,所以后面只需要把访问器属性的操作映射到这个 value 变量上即可。
  但是上面这个 link 函数只是我随手写的,参数设计得很烂,而且也没考虑 configuable 和 enumerable,所以通用性并不强。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^