html
<!-- index.html -->
<!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>
<link
rel="stylesheet"
href="./index.css"
/>
</head>
<body>
<div class="card">
<p id="firstName"></p>
<p id="lastName"></p>
<p id="age"></p>
</div>
<input
type="text"
oninput="user.name = this.value"
/>
<input
type="date"
onchange="user.birth = this.value"
/>
<script src="./euv.js"></script>
<script src="./index.js"></script>
</body>
</html>
css
/* index.css */
.card {
width: 300px;
border: 2px solid rgb(74, 125, 142);
border-radius: 10px;
font-size: 2em;
padding: 0 20px;
margin: 0 auto;
background: lightblue;
color: #333;
}
js
// index.js
var user = {
name: '张三',
birth: '2002-11-26',
};
// 收集依赖变化
observe(user); // 观察
// 显示姓氏
function showFirstName() {
document.querySelector('#firstName').textContent = '姓:' + user.name[0];
}
// 显示名字
function showLastName() {
document.querySelector('#lastName').textContent = '名:' + user.name.slice(1);
}
// 显示年龄
function showAge() {
var birthday = new Date(user.birth);
var today = new Date();
today.setHours(0), today.setMinutes(0), today.setMilliseconds(0);
thisYearBirthday = new Date(
today.getFullYear(),
birthday.getMonth(),
birthday.getDate()
);
var age = today.getFullYear() - birthday.getFullYear();
if (today.getTime() < thisYearBirthday.getTime()) {
age--;
}
document.querySelector('#age').textContent = '年龄:' + age;
}
// user.name = '李四'
// 如果我们想要当属性改变时,页面也会跟着自动改变,那么需要自动调用依赖该函数属性的函数(也就是显示姓,显示名的函数)
// 可以想到 Object.defineProperty() 可以实现这个功能
// const internalValue = user.name
// Object.defineProperty(user, 'name', {
// get: function() {
// console.log('name 属性被读取')
// return internalValue
// },
// set: function(newValue) {
// internalValue = newValue;
// console.log('name 属性被修改')
// showFirstName();
// showLastName();
// },
// })
autorun(showFirstName);
autorun(showLastName);
autorun(showAge);
js
// euv.js
/**
* 观察某个对象的所有属性,改变数据的函数
* @param {Object} obj
*/
function observe(obj) {
for (const key in obj) {
let internalValue = obj[key];
let funcs = [];
// 只有有依赖的触发收集和更新就会执行
Object.defineProperty(obj, key, {
get: function () {
// 如何知道哪些函数的自动调用依赖某属性?
// 依赖收集,记录:是哪个函数在用我
if (window.__func && !funcs.includes(window.__func)) {
funcs.push(window.__func);
}
return internalValue;
},
set: function (val) {
internalValue = val;
// 派发更新,运行:执行用我的函数
// 遍历依赖函数
for (var i = 0; i < funcs.length; i++) {
funcs[i]();
}
},
});
}
}
// 将需要运行的函数全部传给 autorun,渲染数据的函数
function autorun(fn) {
window.__func = fn;
fn();
window.__func = null;
}