手写一个简单的MVVM框架_javascript技巧

function observe(data) {
  if (!data || typeof data !== 'object') return;

  Object.keys(data).forEach(key => {
    let value = data[key];
    const dep = []; // 依赖收集器

    observe(value); // 递归监听嵌套对象

    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get() {
        if (Dep.target) {
          dep.push(Dep.target); // 收集依赖
        }
        return value;
      },
      set(newVal) {
        if (newVal === value) return;
        value = newVal;
        observe(newVal); // 新值也需监听
        dep.forEach(fn => fn()); // 通知更新
      }
    });
  });
}

const Dep = {
  target: null
};

function compile(el, vm) {
  const fragment = document.createDocumentFragment();
  let child;

  while (child = el.firstChild) {
    fragment.appendChild(child);
  }

  function replace(node) {
    const reg = /\{\{(.*)\}\}/;
    if (node.nodeType === 3 && reg.test(node.nodeValue)) {
      const key = RegExp.$1.trim();
      Dep.target = () => {
        node.nodeValue = vm[key];
      };
      node.nodeValue = vm[key]; // 初始化赋值
      Dep.target = null;
    }

    if (node.nodeType === 1) {
      const attrs = node.attributes;
      Array.from(attrs).forEach(attr => {
        const name = attr.name;
        const exp = attr.value;
        if (name === 'v-model') {
          node.value = vm[exp];
          node.addEventListener('input', e => {
            vm[exp] = e.target.value;
          });

          Dep.target = () => {
            node.value = vm[exp];
          };
          Dep.target = null;
        }
      });
    }

    if (node.childNodes && node.childNodes.length) {
      compile(node, vm);
    }
  }

  fragment.childNodes.forEach(replace);
  el.appendChild(fragment);
}

function MVVM(options) {
  this.$data = options.data;
  const id = options.el;
  const el = document.querySelector(id);

  observe(this.$data);
  compile(el, this);

  // 代理this上的属性访问
  Object.keys(this.$data).forEach(key => {
    Object.defineProperty(this, key, {
      get() {
        return this.$data[key];
      },
      set(newVal) {
        this.$data[key] = newVal;
      }
    });
  });
}

new MVVM({
  el: '#app',
  data: {
    message: 'Hello MVVM'
  }
});

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