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

2023-06-27 13:48| 来源: 网络整理| 查看: 265

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框,获取数据赋值给被挟持的对象属性;

案例代码:

展示：输入: // 创建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 }) 复制代码结语

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

【本文地址】

公司简介

联系我们