提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

实现简易版本的MVVM框架(Vue)

2023-02-18 16:40:57 时间

整体流程图

在10~15分钟完成的自定义Vue

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>EasyFrame</title>
    <script src="./easy-frame.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{count}}</p>
      <button @click="add">+1</button>
    </div>
    <script>
      const app = new EasyFrame({
        el: "#app",
        data: {
          count: 0,
        },
        methods: {
          add() {
            console.log("add");
            this.count++;
          },
        },
      });
    </script>
  </body>
</html>

EasyFrame

function EasyFrame(options) {
  this.$options = options;
  this.$el = this.$options.el;
  this.$data = this.$options.data;
  this.$methods = this.$options.methods;
  observe(this.$data);
  proxy(this);
  compile(this.$el, this);
}

observe

function observe(obj) {
  function defineReactive(obj, key, val) {
    observe(val);
    const dep = new Dep();
    Object.defineProperty(obj, key, {
      get() {
        // 绑定后清空target,下个对象响应化时,对应绑定
        Dep.target &amp;&amp; dep.addDep(Dep.target);
        console.log("getter");
        return val;
      },
      set(newVal) {
        if (newVal != val) {
          console.log("setter");
          observe(val);
          val = newVal;
          dep.notify();
        }
      },
    });
  }

  Object.keys(obj).forEach((key) => defineReactive(obj, key, obj[key]));
}

compile

function compile(el, vm) {
  function traverse(nodes) {
    nodes.forEach((node) => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        Array.from(node.attributes).forEach((attr) => {
          if (attr.name.startsWith("@")) {
            const attrName = attr.name.substring(1);
            const attrValue = attr.value;
            node.addEventListener(attrName, vm.$methods[attrValue].bind(vm));
          }
        });
      }
      if (
        node.nodeType === Node.TEXT_NODE &amp;&amp;
        /\{\{(.*)\}\}/.test(node.textContent)
      ) {
        node.textContent = vm[RegExp.$1];
        new Watcher(vm, RegExp.$1, function (val) {
          node.textContent = val;
        });
      }
      if (node.childNodes &amp;&amp; node.childNodes.length > 0) {
        traverse(node.childNodes);
      }
    });
  }
  const childNodes = document.querySelector(el).childNodes;
  traverse(childNodes);
}

Watcher&Dep

function Dep() {
  this.watchers = [];
  this.addDep = function (watcher) {
    this.watchers.push(watcher);
  };
  this.notify = function () {
    this.watchers.forEach((watcher) => watcher.update());
  };
}

function Watcher(vm, key, fn) {
  // 触发依赖收集
  Dep.target = this;
  vm[key];
  Dep.target = null;

  // 回调最新val
  this.update = function () {
    fn &amp;&amp; fn(vm[key]);
  };
}

proxy

function proxy(vm) {
  Object.keys(vm.$data).forEach((key) => {
    Object.defineProperty(vm, key, {
      get() {
        return vm.$data[key];
      },
      set(val) {
        vm.$data[key] = val;
      },
    });
  });
}

相关文章