JavaScript练习 - 数据监听和双向绑定-Object.
2021-06-13 本文已影响0人
张中华
在使用vue时，我们在最初对数据响应式就会遇到一个概念，叫数据绑定。至于vue中怎么写的并不是很清楚，只是知道vue2里面利用object.defineProperty方式对get/set进行拦截。知道这个概念基本大概知道怎么去实现了。可能不对，只是在表象上进行一次模拟。
示例如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label>输入: </label><input class="input" /><br />
<label>输出: </label><span class="output"></span><br />
<label>输出: </label><span class="output"></span><br />
<label>输出: </label><span class="output"></span><br />
<script>
window.viewModel = {};
let input = document.querySelector('.input');
let outputs = document.querySelectorAll('.output');
Object.defineProperty(viewModel, 'inputValue', {
enumerable: true,
configurable: true,
get: function () {
return input.value;
},
set: function (value) {
input.value = value;
inputListener(value);
}
});
const eventNames = ['input', 'change'];
eventNames.forEach(eventName => {
input.addEventListener(eventName, function (e) {
window.viewModel.inputValue = e.target.value;
});
});
inputListener = function (value) {
outputs.forEach(output => {
output.innerHTML = value;
});
}
</script>
</body>
</html>
知识点
Object.defineProperty
给某一对象添加属性，并且可以设置get/set属性
input.addEventListener
给属性添加事件见监听
该实例利用拦截get/set方法，实现与output之间的数据绑定。
