写几行代码，了解响应式原理

食人鱼 · 发表于 2023-5-3 22:49:50

作者：袁首京原创文章，转载时请保留此声明，并给出原文连接。
作为当下的开发人员，无论是不是前端，可能都会频繁的与 React、Vue、Svelte、Solidjs 等等打交道。也许你已经很清楚它们背后的运作原理，那不必往下看了。如果还不是很清楚，那咱们可以一起写几行代码，来瞅一眼这些响应式框架背后的思路。
响应式框架最根本的功能其实只有一条：当数据发生变化时，让界面随之发生变化。
如何达成这一点呢？粗略的想一下就会觉得，首先要在数据和与之对应的 HTML 元素之间建立绑定关系。可以以某种方式给特定的 HTML 元素打个标记，然后当与此元素相关的值发生变更时，我们就能通过这个标记找到此元素，然后动态的改变它展示出来的值。
比如如下 HTML 模板片断：

{{ current_time }}

复制代码

我们可以定义一个模板编译函数：

function compile(tpl) {
const re = /(\{\{\s+)(\w+)(\s+\}\})/m;
const mg = tpl.match(re);
return tpl.replace(">{{", ' vid="' + mg[2] + '">{{').replace(mg[0], "");
}

复制代码

执行该函数，就会给相关元素打上 vid 标记：

> compile('{{current_time}}')

复制代码

这样如果需要，我们就可以很方便的找到页面上需要响应的元素：

const vel = document.querySelector("[vid=current_time]");

复制代码

接下来是数据部分。如何监测数据的变化呢？一种方案是使用代理。假如我们有如下数据对象：

{
current_time: "2023-05-03T05:14:46.176Z";
}

复制代码

可以使用如下函数，为其生成一个代理，拦截其赋值操作：

function reactive(data) {
return new Proxy(data, {
set(target, property, value) {
const prev = target[property];
target[property] = value;
if (prev !== value) {
const vel = document.querySelector(`[vid=${property}]`);
vel.innerHTML = value;
}
return true;
},
});
}

复制代码

接下来，就可以面向数据编程了：

const data = reactive({
current_time: "2023-05-03T05:14:46.176Z",
});
setInterval(() => {
data.current_time = new Date().toISOString();
}, 1000);

复制代码

最终效果如下：

以下是完整代码：

<!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>
</body>
</html>

复制代码

来源:https://www.cnblogs.com/rockety/p/17369256.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！

写几行代码，了解响应式原理

本帖子中包含更多资源