写几行代码，了解响应式原理-Toy模板网

这篇具有很好参考价值的文章主要介绍了写几行代码，了解响应式原理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

作者：袁首京

原创文章，转载时请保留此声明，并给出原文连接。

作为当下的开发人员，无论是不是前端，可能都会频繁的与 React、Vue、Svelte、Solidjs 等等打交道。也许你已经很清楚它们背后的运作原理，那不必往下看了。如果还不是很清楚，那咱们可以一起写几行代码，来瞅一眼这些响应式框架背后的思路。

响应式框架最根本的功能其实只有一条：当数据发生变化时，让界面随之发生变化。

如何达成这一点呢？粗略的想一下就会觉得，首先要在数据和与之对应的 HTML 元素之间建立绑定关系。可以以某种方式给特定的 HTML 元素打个标记，然后当与此元素相关的值发生变更时，我们就能通过这个标记找到此元素，然后动态的改变它展示出来的值。

比如如下 HTML 模板片断：

<p>{{ current_time }}</p>

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

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('<p>{{current_time}}</p>')
<p vid="current_time"></p>

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

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);

最终效果如下：

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

以下是完整代码：文章来源地址https://www.toymoban.com/news/detail-432534.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>
  </head>
  <body>
    <div id="root"></div>
    <script>
      function compile(tpl) {
        const re = /(\{\{\s+)(\w+)(\s+\}\})/m;
        const mg = tpl.match(re);
        return tpl.replace(">{{", ' vid="' + mg[2] + '">{{').replace(mg[0], "");
      }

      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 app = {
        tpl: "<p>{{ current_time }}</p>",

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

        mount() {
          const rootEl = document.querySelector("#root");
          rootEl.innerHTML = compile(this.tpl);

          this.data = reactive(this.data);

          this.mounted();
        },

        mounted() {
          setInterval(() => {
            this.data.current_time = new Date().toISOString();
          }, 1000);
        },
      };

      document.addEventListener("DOMContentLoaded", () => {
        app.mount();
      });
    </script>
  </body>
</html>

到了这里，关于写几行代码，了解响应式原理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！