从零开始编写自己的JavaScript框架.docxVIP

从零开始编写自己的 JavaScript 框架 数据绑定 数据绑定的原理 数据绑定是一种很便捷的特性，一些 数据绑定是一种很便捷的特性，一些 RIA 框架带有双向绑定功能， 比如 Flex 和 Silverlight，当某个数据发生变更时，所绑定的界面 元素也发生变更，当界面元素的值发生变化时，数据也跟着变化， 这种功能在处理表单数据的填充和收集时，是非常有用的。 在 HTML 中，原生是没有这样的功能的，但有些框架做到了，它们 是怎么做到的呢？我们来做个简单的试试，顺便探讨一下其中原理。 先看数据到界面上的的绑定，比如： inputvm-value=name/ var person = { name: Tom }; 如果我们给 如果我们给 name 重新赋值，person.name=Jerry ，怎么才 能让界面得到变更？ 从直觉来说，我们需要在 name 发生改变的时候，触发一个事件， 或者调用某个指定的方法，然后才好着手做后面的事情，比如： var person ={ name:Tom, setName:function(newName){this.name = newName;//do something}}; 这样我们可以在 这样我们可以在 setName 里面去给 input 赋值。推而广之，为了 使得实体包含的多个属性都可以运作，可以这么做： var person ={ name:Tom, gender:5set:function(key, value){this[key]= value;//do something}}; 或者合并两个方法，只判断是否传了参数： 或者合并两个方法，只判断是否传了参数： Person.prototype.name =function(value){if(arguments.length ==0){returnthis._name;}else{this._name = value;}} 这种情况下，赋值的时候就是 person.name(Tom)，取值的时 这种情况下，赋值的时候就是 person.name(Tom)，取值的时 候就是 varname=person.name() 了。 有一些框架是通过这种方式来变通实现数据绑定的，对数据的写入 只能通过方法调用。但这种方式很不直接，我们来想点别的办法。 在 C#等一些语言里，有一种东西叫做存取器，比如说： classPerson{privatestring name;publicstringName{get{return name;}set{ name = value;}}} 用的时候，person.Name=Jerry ，就会调用到 用的时候，person.Name=Jerry ，就会调用到 set 里，相当于 是个方法。 这一点非常好，很符合我们的需要，那 JavaScript 里面有没有类似 存取器的特性呢？老早以前是没有的，但现在有了，那就是 Object.defineProperty，它的第三个参数就是可选的存取函数。 比如说： var person ={};// Add an accessor property 赋值的时候，person.name=Tom ，取值的时候，varname=person.name ，简直太美妙了。注意这里 define 赋值的时候，person.name=Tom ，取值的时候，varname =person.name ，简直太美妙了。注意这里 define 的时候，是定 义在实例上的，如果想要定义到类型里面，可以在构造器里面定义。 现在我们从数据到 DOM 的绑定可以解决掉了，至少我们能够在变 现在我们从数据到 DOM 的绑定可以解决掉了，至少我们能够在变 量被更改的时候去做一些自己的事情，比如查找这个属性被绑定到 哪些控件了，然后挨个对其赋值。框架怎么知道属性被绑定到哪些 控件了呢？这个直接在第二部分的实现过程中讨论。 再看控件到数据的绑定，这个其实很好理解。无非就是给控件添加 change 之类的事件监听，在这里面把关联到的数据更新掉。到这 里，我们在原理方面已经没有什么问题了，现在开始准备把它写出 来。 数据绑定的实现 我们的框架启动之后，要先把前面所说的这种绑定关系收集起来， 我们的框架启动之后，要先把前面所说的这种绑定关系收集起来， 这种属性会分布于 DOM 的各个角落，一个很现实的做法是，递归 遍历界面的每个 DOM 节点，检测该属性，于是我们代码的结构大 致如下所示。 function parseElement(element){for(var i=0; ielement.attributes.length; i++){ parseAttribute(element.attri