当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript实现简易MVVM框架详解

JavaScript实现简易MVVM框架详解

2025-11-19 20:34:11 0浏览收藏

想了解如何用JavaScript构建一个简易MVVM框架吗？本文将带你一步步实现数据响应式和视图的自动更新。通过Proxy实现数据劫持，监听数据变化；利用Compiler解析模板指令，建立数据绑定关系；再结合Watcher与Dep完成依赖收集和视图更新，一个极简但完整的MVVM框架就诞生了。本文提供详细代码示例，助你深入理解MVVM的核心原理，让你轻松掌握前端框架的底层实现，为构建更复杂应用打下坚实基础。快来学习吧，打造属于你的MVVM框架！

答案：通过Proxy实现数据响应式，Compiler解析模板指令，Watcher与Dep完成依赖收集和视图更新，构建极简MVVM框架。

使用JavaScript实现一个简单的MVVM框架_javascript框架

要实现一个简单的MVVM（Model-View-ViewModel）框架，核心是数据绑定和响应式更新视图。我们可以通过JavaScript的Object.defineProperty或Proxy来监听数据变化，并在变化时自动更新DOM。下面是一个极简但完整的MVVM框架示例，帮助你理解其基本原理。

1. 响应式数据监听（Observer）

使用Proxy拦截对象属性的读取和赋值操作，当数据变化时通知依赖更新。

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

  return new Proxy(data, {
    get(target, key, receiver) {
      const value = Reflect.get(target, key, receiver);
      // 收集依赖（此处简化，实际可用Dep类管理）
      console.log(`获取 ${key}:`, value);
      return value;
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        console.log(`更新 ${key} 从 ${oldValue} 到 ${value}`);
        dep.notify(); // 触发视图更新
      }
      return result;
    }
  });
}

2. 模板编译与指令解析（Compiler）

遍历DOM节点，识别v-model、{{ }}等语法，并建立数据绑定。

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

  compile(node) {
    if (node.nodeType === 1) { // 元素节点
      Array.from(node.attributes).forEach(attr => {
        const attrName = attr.name;
        const exp = attr.value;
        if (attrName.startsWith('v-model')) {
          node.value = this.vm[exp];
          node.addEventListener('input', e => {
            this.vm[exp] = e.target.value;
          });
          // 添加依赖
          new Watcher(this.vm, exp, value => {
            node.value = value;
          });
        }
      });
    }

    if (node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent)) { // 文本节点
      const exp = RegExp.$1.trim();
      node.textContent = node.textContent.replace(/\{\{(.*)\}\}/, this.vm[exp]);
      new Watcher(this.vm, exp, value => {
        node.textContent = value;
      });
    }

    if (node.childNodes && node.childNodes.length) {
      Array.from(node.childNodes).forEach(child => this.compile(child));
    }
  }
}

3. 依赖收集与更新（Watcher 和 Dep）

Watcher用于观察某个表达式的值，当值变化时执行回调。Dep是依赖管理器，负责收集Watcher并通知更新。

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

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

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

// 全局变量，用于临时存储当前正在求值的Watcher
let currentWatcher = null;

class Watcher {
  constructor(vm, exp, cb) {
    this.vm = vm;
    this.exp = exp;
    this.cb = cb;
    this.value = this.get(); // 初始化时触发getter，完成依赖收集
  }

  get() {
    currentWatcher = this;
    const value = this.vm[this.exp]; // 触发getter
    currentWatcher = null;
    return value;
  }

  update() {
    const newValue = this.vm[this.exp];
    if (newValue !== this.value) {
      this.cb(newValue);
    }
  }
}

// 修改observe中的set逻辑以支持dep
const dep = new Dep(); // 简化处理，实际应为每个属性创建独立dep

4. MVVM 主类集成

将以上模块组合成一个可用的MVVM构造函数。

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

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

    // 数据代理到实例上，方便this.xxx访问
    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;
      }
    });
  }
}

现在你可以这样使用这个简易MVVM：

<div id="app">
  &lt;input v-model=&quot;message&quot; /&gt;
  <p>{{ message }}</p>
</div>

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

输入框内容变化时，

标签也会同步更新，实现了双向绑定。

基本上就这些。虽然这个框架非常基础，但它涵盖了MVVM的核心思想：响应式数据、模板编译、依赖追踪和自动更新。你可以在此基础上扩展更多功能，比如事件绑定（v-on）、计算属性、生命周期钩子等。

今天关于《JavaScript实现简易MVVM框架详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！