双向数据绑定原理

基本

双向数据绑定原理主要依赖ES5的Object.defineProperty方法，通过该方式定义对象，设置存取描述符，在存取的时候，加入自定义的操作，从而实现无感知（侵入）的双向绑定（同时也需要输入控事件的支持）。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

以下是一个简单的例子

<input type="text" id="ipt" />
<div id="box"></div>
<script>
let obj = {};
let eIpt = document.querySelector('#ipt');
let eBox = document.querySelector('#box');
Object.defineProperty(obj,  'name',  {
    configurable: true,
    enumerable: true,
    get: function() {
        console.log('获取值的时候');  // 此处也可以执行自定义的操作
        return val;
    },
    set: function(newVal) {
        console.log('设置值的时候');
        eIpt.value = newVal;
        eBox.innerHTML = newVal; // 执行自定义的操作
    }
});
eIpt.addEventListener('input', function(e) {
    obj.name = e.target.value; // 用户输入数据时，box中的内容会跟随改变
});
obj.name = '小红帽'; 
</script>

Lenny-Hu / note

双向数据绑定原理 #85

基本