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

作者:袁首京

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

作为当下的开发人员,无论是不是前端,可能都会频繁的与 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);

最终效果如下:

以下是完整代码:

<!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>

热门相关:仙城纪   战神   重生之至尊千金   学霸女神超给力   战神