从零实现一个简单的MVVM框架_javascript框架原理

function defineReactive(obj, key, val) {
  // 递归监听子对象
  observe(val);

  const dep = []; // 存储依赖（Watcher）

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      // 收集依赖
      if (Dep.target) {
        dep.push(Dep.target);
      }
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      observe(newVal); // 新值如果是对象也需监听
      // 通知所有依赖更新
      dep.forEach(watcher => watcher.update());
    }
  });
}

function observe(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return;
  }
  Object.keys(obj).forEach(key => {
    defineReactive(obj, key, obj[key]);
  });
}

class Dep {
  constructor() {
    this.subs = [];
  }

  addSub(watcher) {
    this.subs.push(watcher);
  }

  notify() {
    this.subs.forEach(watcher => watcher.update());
  }
}

// 全局唯一正在执行的 Watcher
Dep.target = null;

function defineReactive(obj, key, val) {
  observe(val);
  const dep = new Dep();

  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) {
        dep.addSub(Dep.target);
      }
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      observe(newVal);
      dep.notify();
    }
  });
}

class Watcher {
  constructor(vm, expr, cb) {
    this.vm = vm;
    this.expr = expr;
    this.cb = cb;

    // 保存初始值
    this.value = this.get();
  }

  get() {
    Dep.target = this; // 标记当前 Watcher
    const value = this.vm.$data[this.expr]; // 触发 getter，完成依赖收集
    Dep.target = null;
    return value;
  }

  update() {
    const oldValue = this.value;
    const newValue = this.vm.$data[this.expr];
    if (newValue !== oldValue) {
      this.value = newValue;
      this.cb(newValue);
    }
  }
}

class Compiler {
  constructor(el, vm) {
    this.el = document.querySelector(el);
    this.vm = vm;
    this.compile(this.el);
  }

  compile(node) {
    const childNodes = node.childNodes;
    Array.from(childNodes).forEach(n => {
      if (n.nodeType === 1) { // 元素节点
        this.compileElement(n);
      } else if (n.nodeType === 3) { // 文本节点
        this.compileText(n);
      }

      if (n.childNodes && n.childNodes.length) {
        this.compile(n);
      }
    });
  }

  compileText(node) {
    const text = node.textContent;
    const reg = /\{\{(.+?)\}\}/g;
    if (reg.test(text)) {
      const expr = RegExp.$1.trim();
      node.textContent = text.replace(reg, this.vm.$data[expr]);

      // 创建 Watcher 监听数据变化
      new Watcher(this.vm, expr, newValue => {
        node.textContent = text.replace(/\{\{(.+?)\}\}/g, newValue);
      });
    }
  }

  compileElement(node) {
    // 可扩展 v-model、v-on 等指令
    const attrs = node.attributes;
    Array.from(attrs).forEach(attr => {
      const attrName = attr.name;
      const exp = attr.value;
      if (attrName.startsWith('v-model')) {
        node.value = this.vm.$data[exp];
        new Watcher(this.vm, exp, value => {
          node.value = value;
        });

        node.addEventListener('input', e => {
          this.vm.$data[exp] = e.target.value;
        });
      }
    });
  }
}

class TinyVue {
  constructor(options) {
    this.$el = options.el;
    this.$data = options.data;

    // 数据响应化
    observe(this.$data);

    // 数据代理到实例上（可选）
    Object.keys(this.$data).forEach(key => {
      this.proxyData(key);
    });

    // 编译模板
    new Compiler(this.$el, this);
  }

  proxyData(key) {
    Object.defineProperty(this, key, {
      get() {
        return this.$data[key];
      },
      set(newVal) {
        this.$data[key] = newVal;
      }
    });
  }
}

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script>
  const app = new TinyVue({
    el: '#app',
    data: {
      message: 'Hello MVVM'
    }
  });
</script>