javascript原生完成双向数据绑定

2019年9月1日 179次阅读 来源: yang

<body>

<h1 id="h1">
</h1>
<input type="text" id="input">
<button id="button">change</button>
<script>
    var data = {
        msg : "我是一个数据"
    }

    **页面上的初始化**

    h1.innerText = data.msg
    input.value = data.msg

Object.defineProperty(obj, prop, descriptor)

参数申明：

      1. obj:目的对象
      2. prop 需定义或修正的属性的名字  
      3. descriptor 目的属性所具有的特征 
              
     数据挟制 ， 这个api可以对一个对象的属性举行准确的掌握
     掌握这个属性可以被赋值 可以被重写 可否被猎取
     掌握这个属性的读取 或许 写入

get/set

    **get 猎取值  或许叫 读取**
    **set 设置值  或许叫 赋值**
    
    Object.defineProperty(data,"msg",{
        get(){
             **当我猎取msg的值的时刻 我愿望猎取到的是什么效果呢？**
            return input.value
        },
        set(newValue){
              **当我给msg属性赋值的时刻 我愿望做一些事变**
              **data.msg ="咳咳"**
              **由于要模仿双向数据绑定 那末获得的新的值 input与h1中的内容也要跟新的值一致**
              **实际上在vue的底层这一步是经由过程观察者 / 定阅者形式完成**
            h1.innerText = newValue;
            input.value = newValue
        }
    })

    button.onclick = function(){
        data.msg += 1
    }

    input.onkeyup = function(){
         **当键盘抬起的时刻 我们让 data.msg 猎取新的值 也就是对data.msg 从新赋值**
        data.msg = input.value
        console.log(data.msg)
    }

</script>

</body>

    原文作者：yang
    原文地址: https://segmentfault.com/a/1190000018978966
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞