16、前端知识点--Object.defineProperty 的用法+双向数据绑定原理解析
一、Object.defineProperty 的用法
Object.defineProperty 可以用于给对象添加更新属性。
<script> // Object.defineProperty可以用于给对象添加或更新属性。 // 它里面有下面三个参数: 给设置属性的对象、设置属性的属性名、以及设置的配置项 // 先声明的一个对象 var obj = {} Object.defineProperty(obj,"name",{ // 这个配置项里面有两个函数,分别是getter函数 和 setter函数 //getter函数 get(){ console.log('获取的值是:',name) // 相当于 obj.name // get函数里面必须有一个return,将这个属性返回出去 return name }, //setter函数,这个函数包含一个参数,这个参数表示给当前这个属性设置的新的值,例如obj.name = newName 这样 set(newName){ name = newName console.log('这里给name传递的新的值是:',name) } }) </script>
二、模拟双向数据绑定
<!-- 模拟一个双向数据绑定 --> <input type="text " id="myinput"> <h1 id="myh"></h1> <script> //先声明一个对象 let obj = {} //利用Object.defineProperty()来从后台设置改变页面的值 Object.defineProperty(obj,'name',{ get(){ return name }, set(newName){ // 给属性赋值 name = newName // 将后台设置的值在前台页面展示出来 document.getElementById('myh').innerText = newName //上面是展示了H1标签的内容了,下面也要让输入框的内容同步展示,即手动改变obj.name的值时,要把改变后的值赋给输入框 document.getElementById('myinput').value = newName } }) // 下面是获取输入的值 // 给input绑定input的事件, document.getElementById('myinput').addEventListener('input',function(e){ // 当页面输入时,在控制台就会同一时间打印出来,利用下面这句 // console.log(e.target.value) // 将输入的值赋给对象的属性 obj.name = e.target.value }) </script>
双向数据绑定:就是页面视图的输入发生变化,后台的数据会随着改变。