点击查看基础Proxy认知

这篇我们集中如何使用js实现类似vue的简单数据双向绑定；

拿input和textarea两个html标签作为展示

show.gif

two-way data binding

一、html

<input type="text" id="inputName" />
<textarea name="haha" id="myArea" cols="30" rows="10">hello world</textarea>

二、js代码

Proxy: target -- handler -- traps

//创建一个对象
 const myUser = {
     id:'inputName',
     name:''  //用来存储和更新input的value值
 };

//第一步：当用户改变input输入值时更新myUser.name ,通过onchange事件处理程序来实现
inputChange(myUser);
function inputChange(myObject) {
    if (!myObject || !myObject.id) return;  //如果传入的对象不存在或者没有id属性，return出去
    const input = document.getElementById(myObject.id); //通过对象里的id从而获取对应id的input标签
    input.addEventListener('onchange', function(e) {
        myObject.name = input.value;
    });
}

//第二步：在js代码中修改myUse.name时，跟新input里的内容，这一步略微复杂，但是proxy代理提供了一个解决方案
    const inputHandler = {
     set:function (target,prop,newValue) {
         if(prop =='name' && target.id ) { //prop指的是传入的对象里的属性：
             //更新对象的属性
            target[prop] = newValue;
            document.getElementById(target.id).value = newValue;
            return true;  //set方法返回值只有false或true；
         }
         else return false;
     }
    };

 //创建proxy
    const myUserProxy = new Proxy(myUser,inputHandler);

一、测试：

//手动设置一个新的名字：
    myUserProxy.name = 'Lily';
    console.log(myUserProxy.name);  //Lily
    console.log(document.getElementById('inputName').value);  //Lily

预览：

静态.png

二、方案1：原生js实现数据绑定

oninput事件可以监听框的value变化
为了实现实时，先将数据绑定提取出来成单独的函数，这样每次oninput事件触发就调用一次getChange，

var myArea = document.getElementById('myArea');
//初始textarea的值先给input框
var input = document.getElementById('inputName');
input.value = myArea.value;
function getChange() {
    myUserProxy.name =myArea.value;
    console.log(myUserProxy.name);  //Lily
    console.log(document.getElementById('inputName').value);  //Lily
}
myArea.oninput = function () {
    getChange()
}

三：方案2：jQuery实现数据绑定

记得先引入jquery库
为了实现实时，使用setTimeout间歇调用触发keydown事件

$("#myArea").keydown(function () {
    myUserProxy.name = $("#myArea").val();
    console.log(myUserProxy.name);  //Lily
    console.log(document.getElementById('inputName').value);  //Lily
});
setTimeout(function () {
    $("#myArea").trigger('keydown')
},100);