Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。
详细介绍也不多说了直接上代码 Proxy详细原理与介绍请看阮一峰ES6入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 首先模拟出vue中写法 -->
<div id="div1">
<input type="text" v-model="name"><br>
姓名:{{name}}<br>
年龄:{{age}}
</div>
</body>
<script>
//获取DOM元素,类似于挂载点
let el=document.getElementById('div1');
//存一下当前html结构
let template=el.innerHTML;
//定义一个json
let _data={
name: 'wuchangdong',
age: 18
};
//用Proxy来监听当前json是否改变
let data=new Proxy(_data,{
set(obj,name,value){
obj[name]=value;
//数据变了
console.log(`当前${name}的值为${value}`);
//调用渲染函数
render();
}
});
render();
//渲染函数
function render(){
//用正则找出所有这种{{}}结构并将其变为我们的数据
el.innerHTML=template.replace(/\{\{\w+\}\}/g,str => {
str=str.substring(2, str.length-2);
return _data[str];
});
//找出input中所有的v-model
Array.from(el.getElementsByTagName("input"))
.filter(ele=>ele.getAttribute("v-model"))
.forEach(input=>{
let name=input.getAttribute('v-model');
input.value=_data[name];
//监听输入事件
input.oninput=function(){
//这里一定是data不是_data
data[name]=this.value;
};
});
};
</script>
</html>
效果如下
当然这只是其中一种方法简单的实现这个双向数据绑定,小伙伴们可以自行研究