共计 894 个字符，预计需要花费 3 分钟才能阅读完成。
<!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>
<h1 id="h1">
</h1>
<input type="text" id="input">
<button id="button">change</button>
<script>
var data = {msg : "我是一个数据"}
// 页面上的初始化
h1.innerText = data.msg
input.value = data.msg
// 数据劫持，这个 api 可以对一个对象的属性进行精确的控制
// 控制这个属性能够被赋值 能够被重写 能否被获取
// 控制这个属性的读取 或者 写入
// get/set
// get 获取值 或者叫 读取
// set 设置值 或者叫 赋值
Object.defineProperty(data,"msg",{get(){
// 当我获取 msg 的值的时候 我希望获取到的是什么结果呢？return input.value
},
set(newValue){
// 当我给 msg 属性赋值的时候 我希望做一些事情
// data.msg ="咳咳"
// 因为要模拟双向数据绑定 那么得到的新的值 input 与 h1 中的内容也要跟新的值一致
// 实际上在 vue 的底层这一步是通过观察者 / 订阅者模式实现
h1.innerText = newValue;
input.value = newValue
}
})
button.onclick = function(){data.msg += 1}
input.onkeyup = function(){
// 当键盘抬起的时候 我们让 data.msg 获取新的值 也就是对 data.msg 重新赋值
data.msg = input.value
console.log(data.msg)
}
</script></body>
</html>
正文完
发表至： javascript
2019-04-24
