JS实现双向绑定

最新推荐文章于 2023-07-02 20:21:56 发布

weixin_33692284

最新推荐文章于 2023-07-02 20:21:56 发布

阅读量496

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://juejin.im/post/5c7fb2606fb9a049ac79ee4b

版权

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

Object.defineProperty( obj, propName, desc)

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

propName：要监听属性的名字

desc：描述符对象

a、configurable：Booleans 表示能否通过delete删除属性从而重新定义属性，默认为true

b、enumerable：Booleans 表示能否通过for-in循环返回属性，默认值为true

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

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

比如我们常用的对象赋值操作let person = { name: 'Jone' }，用Object.defineProperty()实现如下：

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>复制代码

代码其实很简单，明白了实现原理，大家可以发挥自己的想象把它更加利用起来，我这里只是一个抛砖引玉的效果

转载于:https://juejin.im/post/5c7fb2606fb9a049ac79ee4b

weixin_33692284

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实现双向绑定

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

扫一扫