如何用javascript实现双向数据绑定

最近几年前端技术栈真是发展的太迅速了，从以前的针对dom操作的框架如jquery，ext.js等框架逐步过渡到当前的mvvm模式，让前端开发者将注意力从dom操作逐渐解脱出来，专注于逻辑的实现，个人认为开发效率至少提升了1倍，mvvm模式的一个核心便是数据的双向绑定。

什么是数据的双向绑定？

//vue 中实习数据双向绑定的核心就在于v-model 如下

当输入框中的内容发生变化时，如用户在视图view输入hello world 此时我们在model层即用js处理逻辑代码的地方就会获取用户输入的值，反之在model层给与userName一个值时，view层的值也会进行同步，简而言之双向指的是view层和model层 ，数据绑定即model上的数据，在view和model是同步绑定关系的

上面说的是在vue框架中数据双向绑定的应用，个人认为这个特性很赞，是大幅提升开发效率的关键，那如果脱离mvvm的框架，我也想实现这种数据的双向绑定，可不可以实现了，该如何实现了？

用原生js模拟数据双向绑定

实现步骤：

一：用js监听数据的变化并将变化的数据时时的同步到页面
为了实现这个功能我们需要用到js的一个方法Object.defineProperty

1.属性介绍

语法：Object.defineProperty(obj,prop,descriptor);
描述：obj：必需。目标对象 
     prop：必需。需定义或修改的属性的名字
     descriptor：必需。目标属性所拥有的特性
用法：
var demo = {name:'json'};
Object.defineProperty(demo,'name',{
  value:'jack'
})
//更改demo的name属性值
demo.name = 'mike'
demo.name //输出  jack
//有木有感觉很神奇，我们在看下面一个例子,对上面进行稍微修改
var demo = {name:'json'};
Object.defineProperty(demo,'name',{
  value:'jack'，
writable:'true'
})
//更改demo的name属性值
demo.name = 'mike';
//查看name属性
demo.name // 输出mike
//分析：上面涉及到了两个属性:value 和 writable 其中value是对name属性进行赋值，此时如果writable：‘false’,意思是不能对value值进行重写，默认就是false,所以第一个例子中对name值进行更改后并没有生效，当writable:'true'时就可以对value的值进行重写，如第二个例子中设置生效。
//小结：value: 设置属性的值
        writable: 值是否可以重写。true | false
如果var demo = {}; 则上述方法就会为该对象添加一个name属性并给其赋值

2.方法介绍

//先看实列
var demo = {name:'json'};
Object.defineProperty(demo,'name',{
 set:function(value){
    console.log('执行了');
     name = value;
 },
get:function(){
 
 return name;
}
})
demo.name = 'json';//修改name属性值
//结果控制台输出：执行了
demo.name //json
//小结：当修改defineProperty监听的属性是，会执行该函数内部的set方法  => 这样是不是可以用作监听器了像angular和vue中的$watch,当目标对象中的某个属性发生变化时进行相应函数的调用，如在set函数中加一个自己的处理函数。
var demo = {name:'json'};
Object.defineProperty(demo,'name',{
 set:function(value){
        name = value;
 },
get:function(){
 console.log('获取值了')
 return name;
}
})
demo.name//控制台输出：获取值了
var demo = {name:'json'};
Object.defineProperty(demo,'name',{
 set:function(value){
       console.log('我有执行到吗');
        name = value;
 },
get:function(){
 return '看我变成啥样了';
}
})
demo.name //"看我变成啥样了"
//小结
当查看defineProperty所监听的属性时如demo.name,此时会调用该函数内部的get方法 获取到的值即为return的值，如上代码，而且当只获取属性时不会进入到set方法，反正亦然

大概的介绍了defineProperty核心的两个方法，看到这里，你就知道可以利用这两个内置方法搞事情了，看下面利用该方法实现数据双向绑定的一个例子

mvvm.png

效果如下，当姓名发生变化时后面的输入框中的值也同步发生变化：

model.png

小结：虽然对此属性没有太研究，但是感觉还是蛮新鲜的，之前只是用到了mvvm模式带来的便捷却不知道如何去实现，完全么有思路的说，但是小伙伴们，你们看完上述代码，现在心中的疑惑应该会少很多哈，，嘎嘎。