js实现数据绑定

在进行代码编写前，我们先来认识一下数据绑定需要知道的知识

1. getter与setter
   我们都知道javaScript中的对象是健值对的集合，在ES5中可以使用一个或两个方法来代替，这两个方法就是getter和setter。这两个方法定义的属性叫做“存储器属性”，不同于数据属性只有一个值。
   看下面代码

const obj = {
  name:'张三'，
}；
obj.name ；//  张三
obj.name = ‘李四’；

很常用的操作对不对，再我们没有使用getter和setter是这样操作的，那么假如我们要使用getter和setter那么代码又是怎样的呢，我们接着往下看

const obj = {
  get  name(){.....}，
  set  name(){.....}，
}；

我们用两个方法取代了原来的值，那么这两个方法如何使用呢

const obj = {
 _name:'张三',
  get  name(){
    return this._name；
  }，
  set  name(value){
    this._name = value;
  }，
}；
obj.name //张三
obj.name =''李四’；
obj.name //李四’

看到这里大家应该知道它是怎么运行的了吧，通过set,get方法我们可以创造无限可能，不过需要注意的是，一般来说get和set总是成对出现，如果只有get意味着只能读，只有set只能写。

2. Object.defineProperty()
   Object.defineProperty(obj, prop, descriptor)方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象，它接受三个参数，分别是：

• 要在其上定义属性的对象
• 要定义或修改的属性的名称
• 将被定义或修改的属性描述符
  关于属性的描述，请参考descriptor;我们对数据双向绑定的实现完全来自于Object.defineProperty()；

<input  type="text">
-----------------------------
const obj = {};
Object.defineProperty(obj, 'name', {
      get() {
        return document.getElementsByTagName('input')[0].value;
      },
      set(value) {
        document.getElementsByTagName('input')[0].value = value;
      },
      configurable: true
 });
document.getElementsByTagName('input')[0].onchange = function () {
      console.log('obj', obj.name);
 }

以上就是实现数据绑定的简易实现,所有大家明白了为什么ie8以下为什么不能直接使用三大框架？