原生JS搭建数据双向绑定
程序员文章站
2024-01-30 11:20:10
...
双向绑定原理就是利用了Object.defineProperty这个方法去重新定义对象获取属性值和设置属性值的操作来实现(vue)
let obj = {};
let count;
// 1. obj 需要定义属性的当前对象 2.prop 当前需要定义的属性名 3.desc 属性描述符(get set)
Object.defineProperty(obj, "age", {
get: function () {
return count;
},
set: function (news) {
count = news
}
})
obj.age = 14;
console.log(obj.age)这个时候是控制台输出的值就是14，我们在设置obj.age=14的时候就会触Object.defineProperty描述符里的set方法，set是有个默认参数，这个参数就是新的数据把新的数据赋给count，再视图更新的视图会去访问get方法，get会返回count。这个时候数据双向绑定就实现。
这里还没明白的话，我们可以这么理解：model --> view Object.defineProperty劫持了对象属性的值，set方法里就去修改然后触发view
<body>
<div class="box">
<span>输入框---</span> <input type="text" id="ModelInput" >
<div id="View"></div>
</div>
</body>
<script>
let msg = '起始值'
let data = {};
// model --> view
Object.defineProperty(data,"str",{
get:function(){
return msg;
},
set:function(val){ //触发set方法 修改或添加data.str值
msg = val;
document.getElementById('ModelInput').value = val;
document.getElementById("View").innerHTML = val;
}
})
// view --> model
document.getElementById('ModelInput').oninput = function(ev){
ev = ev || window.event; //浏览器兼容
data.str = ev.target.value;
};
// data.str = msg;
</script>简单的数据双向绑定 --- data.str = msg 是给输入框赋一个默认值 可有可无
上一篇： 为链表数据结构实现iterator接口
下一篇： Windows 文件检索工具