JavaScript 实现最简双向绑定的代码示例
作者:青柠时间:2026-10-22 11:28:45浏览:381
本文介绍如何使用 Object.defineProperty 实现 JavaScript 中最简单的双向绑定。通过定义 getter 和 setter,监听对象属性变化并更新视图,同时监听视图输入以同步对象数据,从而达成数据与界面的双向同步。
JavaScript 实现最简双向绑定的代码示例
将代码复制并放入页面中运行,即可查看效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="myinput" >
<script>
function watch(obj,key,callback) {
var old = obj[key];
Object.defineProperty(obj,key,{
set:function(val){
var oldVal = old;
old = val;
callback(val,oldVal,this);
},
get:function(){
return old;
}
});
}
var input = document.getElementById("myinput");
var obj = {};
watch(obj, "input",function (val) {
input.value = val;
console.log("这里是不管view层,还是module层修改后的回调,最后设置的值是"+val);
});
input.onkeyup = function () {
obj.input = input.value;
};
</script>
</body>
</html>
代码测试
修改 input 输入框内的值后,控制台会打印出更新后的新值。
在控制台修改 obj.input 的值时,input 输入框内的值也会随之改变,同时触发事件以获取新值。
以上关于 JavaScript 最简单双向绑定的实例讲解内容,希望能为大家提供参考。
作者最新文章
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
