点击查看基础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);
