前端之js双向数据绑定

来源:互联网 发布:手办 预订软件 编辑:程序博客网 时间:2024/05/01 22:34
<!DOCTYPE html><html><head>    <title>textBind</title> </head><body><input type="text" name="infoInsert"> <p id="infoShow"></p><script type="text/javascript">    var obj = {        seeYou: 'Hello'    };    Object.defineProperty(obj, 'infoBind', {        get: function () {            return this.seeYou;        },        set: function (newValue) {            document.getElementById('infoShow').innerText = newValue;            document.getElementsByName('infoInsert')[0].value = newValue;        }    });    document.getElementsByName('infoInsert')[0].addEventListener('keyup', function () {        obj.infoBind = this.value;    });</script></body></html>通过以上代码,不难看出框架中使用的双向数据绑定的底层实现原理是通过ES5中的defineProperty属性来实现的