JS手写双向数据绑定，一看就懂

JS手写双向数据绑定，一看就懂

先搞明白Object.defineProperty()

语法:

const obj = {
    a : 11 ,
    b : 22 
}

// 第一种:
  Object.defineProperty(obj,'a',{
       value:33,
       writeble:false,
  }

// 第二种:挟持对象上单个属性
  Object.defineProperty(obj,'a',{
      get(){
          return a
      },
      set(newValue){
        this.a = newValue //将set捕获的值赋值给对象上的a
      }
  }
  
// 第三种:挟持对象上多个属性
  Object.defineProperties(obj,{
      a:{
          get(){
            return a
          },
         set(newValue){
           this.a = newValue //将set捕获的值赋值给对象上的a
         }
      }
      b:{
          get(){
            returnb
          },
         set(newValue){
           this.b = newValue //将set捕获的值赋值给对象上的a
         }
      }
  } 

Object.defineProperty身上的属性:

• configurable: 该属性为true的时候,该属性才能够被修改或删除;默认为false;
• enumerable: 该属性为true的时候,该属性次啊可以被枚举;默认为false;
• value: 该属性对应的值;默认为undefined;
• writable:该属性为true时,上面的value属性才允许被赋值运算符改变;默认为false;

注意: Object.defineProperty的属性不能够与get和set一起写,否则会报错;

Object.defineProperty详解

手写一个双向数据绑定的js代码

效果图:

思路步骤:

• 第一步 创建一个函数definePropertyFn();
• 第二步 函数内部创建一个对象,并return这个对象;
• 第三步 用Object.defineProperties()挟持这个对象;
• 第四步 创建该对象的 get 与 set ;
• 第五步 首先完成数据改变视图功能,获取dom元素,将obj的值赋值给dom元素;
• 第六步 完成视图驱动数据,在set中将改变的数据赋值给旧的数据;
• 第七步 创建监听事件监听,input框,获取数据赋值给被挟持的对象属性;

案例代码:

 <div>
        展示：<h1></h1>
        输入: <input type="text">
    </div>

    <script> // 创建definePropertyFn来挟持数据
        function definePropertyFn() {
            let obj = {}
            let val = null

            Object.defineProperties(obj, {
                val: {
                    get() {
                        return val
                    },
                    set(newV) {
                        val = newV
                        // 数据控制视图 将更改的数据赋值给h1
                        document.querySelector('h1').innerText = newV
                        console.log('调用了set,获取:' + newV, val);
                    }
                }
            })

            return obj
        }

        let newObj = definePropertyFn()
        document.querySelector('h1').innerText = newObj.val // 调用了get,执行数据渲染视图
        document.querySelector('input').value = newObj.val // 调用了get,执行数据渲染视图

        // 下面监听视图 input 标签，标签一变动，将最新数据获取调用set，赋值给val，并且赋值给h1
        document.querySelector('input').addEventListener('input', function () {
            newObj.val = document.querySelector('input').value
        }) </script> 

结语

以上就是用原生js完成的双向数据绑定代码,虽然简陋,但是能够基本的完成双向数据绑定的需求;当然Vue中的双向数据绑定只是他实现的一个点而已,其中的虚拟DOM,diff算法才是核心;学无止境,低头前行,谢谢你的观看!