JS实现双向绑定

时间 2019-11-17

原文原文链接

如今前端MVVM思想盛行，经过对数据的改变从而引发页面的变化，如：Vue中实现双向绑定的原理就是：采用数据劫持结合发布者-订阅者模式的方式，经过Object.defineProperty()来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应的监听回调，Object.defineProperty()就是本文所要讲的一个东西html

Object.defineProperty( obj, propName, desc)

obj：要监听属性所在的对象前端

propName：要监听属性的名字浏览器

desc：描述符对象bash

a、configurable：Booleans 表示可否经过delete删除属性从而从新定义属性，默认为true函数

b、enumerable：Booleans 表示可否经过for-in循环返回属性，默认值为trueui

c、writable：Booleans 表示可否修改属性的值，默认值为truethis

d、value：包含这个属性的数据值，读取属性值的时候从这个位置读，写入属性值的时候把新值保存在这个位置，默认值为undefinedspa

好比咱们经常使用的对象赋值操做let person = { name: 'Jone' }，用Object.defineProperty()实现以下：scala

let person = {};
Object.defineProrerty( person, 'name', {
    writable: false,    //设置为只读，不可改写
    value: 'Jone'       //设置属性值
}
console.log(person.name);    //'Jone'
person.name = 'Bob';
console.log(person.name);    //'Jons'复制代码

上面的例子中，咱们为person这个对象增长了一个name的属性，而且给该属性赋值，且把该属性设置为只读，若是从新给该属性赋值，在非严格模式下，赋值操做将被忽略，在严格模式下则会报错，另外三个configurable、enumerable这两个属性也一样能够像如上设置，在此就不一一列举，你们能够自行尝试双向绑定

注：IE8是第一个实现Object.defineProperty( )方法的浏览器版本，然而这个版本的实现存在诸多限制：只能在DOM对象上使用这个方法，并且只能建立访问器属性，实现不完全，这也是为何Vue不兼容IE8的一个重要缘由

Object.defineProperty( )内还包含一对儿getter和setter函数，它们被称做这个对象的访问器属性，这两个函数都不是必须的，只是在读取访问对象属性时，会调用getter函数，这个函数负责返回有效值，在写入对象属性时，会调用setter函数并传入新值，这个函数负责决定如何处理数据，请看下面例子：

let obj = {};
Object.defineProperty(obj, 'age', {
  set: function ( value ){
    console.log("正在写值...");
    this.age = value;
  },
  get: function (){
    console.log("正在取值...");
    return this.age
  }
});
obj.age = '20';       //控制台输出：正在写值，说明set函数被调用
let temp = obj.age;   //控制台输出：正在取值，说明get函数被调用复制代码

经过上面的例子咱们能够知道，当一个对象中的属性被读取，或者更改写入的时候，经过Object.defineProperty( )这个函数中的set，和get，访问器均可以拦截到对应的操做，这就是双向绑定的关键所在，利用这一特性，便可实现简单的双向绑定效果，以下代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>原生JS实现双向绑定原理</title>
</head>
<body>
<div>
  <div style="margin-bottom: 20px">
    输入框：<input id="input" type="text">
  </div>
  <div>
    展现框：<span id="show"></span>
  </div>
</div>
<script>
  let model = {};
  let inputObj = document.getElementById('input');
  let showObj = document.getElementById('show');
  Object.defineProperty(model, 'user', {
    set: function ( value ){
      this.user = value;
      showObj.innerText = value;
    },
    get: function (){
      return this.user;
    }
  });
  inputObj.addEventListener('keyup', function (){
    model[ 'user' ] = inputObj.value;
  });
</script>
</body>
</html>复制代码

代码其实很简单，明白了实现原理，你们能够发挥本身的想象把它更加利用起来，我这里只是一个抛砖引玉的效果