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

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

前言

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

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

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

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

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

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

实现

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

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

var $vm = function(obj) {  this.data = obj.data}$vm.prototype.get = function(prop) {  //返回当前值  return this.data[prop]}$vm.prototype.set = function (prop, val) {  //赋值操作  this.data[prop] = val}

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

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

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

var vm = new $vm({  // 绑定的变量值  data: {    info: true  }})

取值

vm.get('info')

存值

vm.set('info', false)

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

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

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

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