proxy响应式实现

最新推荐文章于 2024-07-22 15:13:59 发布

南宫玄色

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量128

点赞数

分类专栏： JS实现文章标签： javascript 前端开发语言 proxy模式

本文链接：https://blog.csdn.net/weixin_44076775/article/details/131938881

版权

JS实现专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!--
 * @Author: ly
 * @Date: 2023-07-26 09:45:43
 * @LastEditors: ly
 * @LastEditTime: 2023-07-26 14:41:30
 * @FilePath: \test-demo\html\proxy响应式实现.html
 * @Description: 
 * 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div class="inner1"></div>
    <div class="inner2"></div>
    <div>修改第一个name值<input type="text" class="input1" /></div>
    <div>修改第二个name值<input type="text" class="input2" /></div>
  </body>
  <script>
    const inner1 = document.querySelector(".inner1");
    const inner2 = document.querySelector(".inner2");
    const input1 = document.querySelector(".input1");
    const input2 = document.querySelector(".input2");

    const proxy1 = reactive({
      name: "tsy",
    });
    const proxy2 = reactive({
      name: "nyx",
    });

    input1.onchange = function (e) {
      proxy1.name = e.target.value;
    };
    input2.onchange = function (e) {
      proxy2.name = e.target.value;
    };

    // const buckiet = new Map()
    const buckiet = new WeakMap();
    let effectFunction = null;

    function reactive(state) {
      return new Proxy(state, {
        get(target, key) {
          console.log("target=>", target);
          console.log(`获取了target的${key}属性`);
          track(target, key);
          return target[key];
        },
        set(target, key, value) {
          console.log("target=>", target);
          console.log(`修改了target的>${key}值为${value}`);
          target[key] = value;
          tigger(target, key);
        },
      });
    }

    /**
     * @description 在get时收集属性依赖:
     * @param {*} target 代理对象
     * @param {*} key 代理对象属性key
     * @return {*}
     */
    function track(target, key) {
      if (!effectFunction) return;
      let depMap = buckiet.get(target);
      if (!depMap) {
        depMap = new Map();
        buckiet.set(target, depMap);
      }
      let depSet = depMap.get(key);
      if (!depSet) {
        depSet = new Set();
        depMap.set(key, depSet);
      }
      depSet.add(effectFunction);
    }

    /**
     * @description: 在set触发，执行相关依赖
     * @param {*} target 代理对象
     * @param {*} key 触发修改的代理对象属性key
     * @return {*}
     */
    function tigger(target, key) {
      const depMap = buckiet.get(target);
      if (!depMap) return;
      const depSet = depMap.get(key);
      if (!depSet) return;
      depSet.forEach((fun) => fun());
    }

    /**
     * @description: 记录副作用函数
     * @param {*} fun 操作函数
     * @return {*}
     */
    function effect(fun) {
      if (typeof fun !== "function") return;
      effectFunction = fun;
      effectFunction();
      effectFunction = null;
    }

    // inner.innerHTML = proxy.name

    const handle1 = function () {
      inner1.innerHTML = proxy1.name;
    };
    const handle2 = function () {
      inner2.innerHTML = proxy2.name;
    };

    effect(handle1);
    effect(handle2);

    setTimeout(() => {
      proxy1.name = "糖糖";
    }, 1000);

    setTimeout(() => {
      proxy2.name = "abr";
    }, 2000);
  </script>
</html>

南宫玄色

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
proxy响应式实现

@param {*} key 触发修改的代理对象属性key。* @description: 在set触发，执行相关依赖。* @param {*} key 代理对象属性key。* @param {*} target 代理对象。* @param {*} target 代理对象。* @description: 记录副作用函数。* @param {*} fun 操作函数。修改了target的>获取了target的。
复制链接

扫一扫

专栏目录