js实现视图和数据双向绑定的方法分析

本文实例讲述了js实现视图和数据双向绑定的方法。分享给大家供大家参考，具体如下：

前言

视图和数据绑定，使视图和逻辑层分离，使视图层变为数据驱动是前端的一大进步。由此诞生了mvvm类的前端框架，大大提升了开发的效率。

那么在使用旧有的项目中，如何使用更加先进的设计模式来替换掉大量的面向过程编程。

各大框架对于数据绑定的实现都有各自的方式，这里不做深入只是简单介绍一下。

Vue使用了es5  Object.defineProperty的特性来实现对数据读取和设置的监听，是一种元编程的方式。个人感觉，比之angularJS的脏检查数据比对更新机制确实要科学一点。

Object.defineProperty实现了对数据get和set的重新编程，能让我们在做最简单的 = 赋值操作时来做一些事，具体的实现就不放在这了。这不是今天要讨论的重点。

在低版本浏览器中显然对于这点的支持也不够友好，那么我可以想一种替代性的方案来达到和Object.defineProperty所类似的效果。在微信小程序中设置数据需要使用set方法，因为小程序的视图层本质上是分离于js引擎的。这样等于手动告诉视图层某个数据更新了。那么我也可以使用这种方法来实现对数据更新的监听。

实现

首先我们需要一个对象来保存数据。并且在其数据变更时做一些事情。可以定义一个构造函数来获得这个对象。

因为get和set方法很显然是公共的，所以可以定义在原型对象上。

1. var $vm = function(obj) {
2. this.data = obj.data
3. }
4. $vm.prototype.get = function(prop) {
5. //返回当前值
6. return this.data[prop]
7. }
8. $vm.prototype.set = function (prop, val) {
9. //赋值操作
10. this.data[prop] = val
11. }
12.  

如果这时候实例化一个这个构造函数的对象，这个对象上就会存在get和set方法，看代码可以知道他对这个对象上的data生效。

这样一个简单的get set方法就设置好了。一个是获取当前对象属性的值，一个是对其设置新的值。

如果在设置的时候我们再去触发相应的视图层的操作，那么一个简单的绑定就实现了。

1. var vm = new $vm({
2. // 绑定的变量值
3. data: {
4. info: true
5. }
6. })

取值

1. vm.get('info')
2.  

存值

1. vm.set('info', false)
2.  

如果我们在set方法里添加console.log()那么每次数据变动都会被打印出来。

使用set方法来替代=号的赋值操作可以一定意义上代替Object.defineProperty的效果。并且兼容性更好。

对视图数据进行绑定是一个很大的问题，怎样使数据的变动在视图上体现。

这里一个最简单的替代实现就是去手动绑定数据和视图。用jq的方式。

比如在set里面执行对应这个属性变动的回掉函数。

例如

1. $vm.prototype.set = function (prop, val) {
2. this.data[prop] = val
3. if (this.$$fn[prop]) {
4. this.$$fn[prop](val, oldVal)
5. }
6. }
7.  

可以看到如果当前对象上$$fn属性上如果存在同名的函数，会执行。

这样我们可以把绑定dom的操作来放到里面显示。

这种写法显然可能不太利于维护，于是我想可以参照vue框架的watch观察者来实现。

在vue中观察对象上某个值的改变可以do someThing。

所以在此可以借鉴。

1. // 存值
2. $vm.prototype.set = function (prop, val) {
3. var oldVal = this.data[prop]
4. this.data[prop] = val
5.  
6. //如果发现被列入观察者 执行函数并注入修改后的值
7. if (this.watch[prop]) {
8. this.watch[prop](val, oldVal)
9. }
10. }
11.  

鸽了，这里省略3000字。哈哈哈哈，因为写了好多代码但是没写博客，懒得写了直接跳过吧，有兴趣的童鞋直接看源码。虚拟dom和{{}}表达式，观察者模式，计算属性等等。

突发奇想，想要对数据层绑定还有个简单的方案。利用html data的自定义属性来绑定相应的属性，利用jq选择器来找到对应的节点进行更新。这也是一种替代的方案。

JQ选择器，选择属性=某值的dom节点。利用这个选择器可以来获得所有绑定了某属性的节点。

1. <div data-vm="info">
2. </div>
3.  

1. $('[data-vm="info"]').text(300)
2.  

这个节点的值变为了300。

所以利用自定义属性和jq的选择器，只要在dom节点上写上data-vm(取的名字)然后等于要绑定的值，那么就可以实现对视图的绑定了。

1. // 存值
2. $vm.prototype.set = function (prop, val) {
3. try {
4. var oldVal = this.data[prop]
5. this.data[prop] = val
6. //如果发现被列入观察者 执行函数并注入修改后的值
7. if (this.watch[prop]) {
8. this.watch[prop](val, oldVal)
9. }
10. //查询是否有订阅值
11. if (this.$$fn[prop]) {
12. this.$$fn[prop](val, oldVal)
13. }
14. //查询是否有依赖于此项的计算属性
15. if (this.$$count[prop]) {
16. // 获得所有依赖此值的计算属性
17. var arr = this.$$count[prop]
18. //循环遍历每个计算属性并重新计算它的值
19. for (var i = 0; i < arr.length; i++) {
20. var item = arr[i]
21. // 获得返回的值
22. this.data[item] = this.computed[item]()
23. }
24. }
25. // 如果节点绑定了此属性 更新节点
26. var dom = $('[data-vm="' + prop + '"]')
27. if (dom) {
28. dom.text(val)
29. }
30. // this.updateView()
31. } catch(e) {
32. console.log('error setData' + prop)
33. }
34. }
35.  

实现成功！

目前绑定的各种方式我改了蛮多，具体的代码在github上，有兴趣的童鞋可以看一看。

项目github地址https://github.com/unjust-life/mvvm

更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。