JavaScript实现一个简单的MVVM框架_js框架原理-js教程-PHP中文网

JavaScript实现一个简单的MVVM框架_js框架原理

狼影

发布： 2025-11-06 18:09:02

原创

303人浏览过

答案：通过Object.defineProperty实现数据劫持，结合模板编译与Watcher订阅者模式，构建极简MVVM框架，实现数据变化自动更新视图的核心机制。

javascript实现一个简单的mvvm框架_js框架原理

要实现一个简单的MVVM（Model-View-ViewModel）框架，核心是数据绑定和响应式更新。我们可以通过JavaScript的Object.defineProperty或Proxy监听数据变化，并在视图中自动更新对应的内容。下面是一个极简版MVVM的实现思路与代码示例。

1. 核心原理：数据劫持 + 模板编译

MVVM的核心在于双向绑定：当数据变化时，视图自动更新；视图变化（如输入框输入）也能反过来影响数据。这需要以下三个关键部分：

Observer（监听器）：监听数据变化，使用defineProperty或Proxy对数据进行劫持
Compiler（编译器）：解析模板中的指令（如v-model, {{ }}），绑定数据并初始化视图
Watcher（订阅者）：连接Observer和Compiler，当数据变化时触发视图更新

2. 使用 defineProperty 实现响应式数据

通过Object.defineProperty对对象的属性进行getter/setter重写，从而实现监听。

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

  Object.keys(data).forEach(key => {
    let value = data[key];
    observe(value); // 递归监听嵌套对象

    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get() {
        return value;
      },
      set(newVal) {
        if (value === newVal) return;
        value = newVal;
        observe(newVal); // 新值如果是对象也要监听
        updateView(); // 触发视图更新
      }
    });
  });
}

登录后复制

3. 编译模板并替换插值表达式

遍历DOM节点，查找{{ }}语法并替换成对应的数据值。

立即学习“Java免费学习笔记（深入）”；

function compile(el, vm) {
  const element = document.querySelector(el);
  _compile(element);

  function _compile(node) {
    if (node.nodeType === 3) { // 文本节点
      const text = node.textContent;
      const reg = /\{\{(.+?)\}\}/g; // 匹配 {{ }}
      if (reg.test(text)) {
        const prop = RegExp.$1.trim();
        node.textContent = text.replace(reg, vm[prop]);
        // 创建 watcher 监听数据变化
        new Watcher(vm, prop, (newVal) => {
          node.textContent = text.replace(/\{\{.+?\}\}/g, newVal);
        });
      }
    }

    if (node.childNodes && node.childNodes.length) {
      Array.from(node.childNodes).forEach(n => _compile(n));
    }
  }
}

登录后复制

4. 实现简易 Watcher 订阅器

Watcher用于在数据变化时执行对应的更新函数。

seacms影视管理系统

海洋影视管理系统（seacms，海洋cms）是一套专为不同需求的站长而设计的视频点播系统，灵活，方便，人性化设计简单易用是最大的特色，是快速架设视频网站首选，只需5分钟即可建立一个海量的视频讯息的行业网站。海洋cms采用PHP+MYSQL架构,原生PHP代码带来卓越的访问速度和负载能力免去您的后顾之优。海洋cms支持一键转换原max的模板和数据，实现网站无缝迁移到新平台。众多人性化功能设计，超

116

查看详情

class Watcher {
  constructor(vm, prop, callback) {
    this.vm = vm;
    this.prop = prop;
    this.callback = callback;
    this.value = this.get(); // 触发 getter，完成依赖收集
  }

  get() {
    Dep.target = this; // 暂存当前 watcher
    const value = this.vm[this.prop]; // 触发 getter，会通知它被访问了
    Dep.target = null;
    return value;
  }

  update() {
    const newVal = this.vm[this.prop];
    if (newVal !== this.value) {
      this.callback(newVal);
    }
  }
}

登录后复制

可以配合一个简单的Dep类来管理依赖：

const Dep = {
  target: null,
  dependents: []
};

登录后复制

5. 整合成一个 MVVM 类

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

    // 数据代理：让 this.xxx 可以访问 this.$data.xxx
    Object.keys(this.$data).forEach(key => {
      this.proxyData(key);
    });

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

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

登录后复制

使用方式：

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

登录后复制

HTML 示例：

<div id="app">
  <p>{{ message }}</p>
</div>

登录后复制

当vm.message = "Updated"时，页面上的文本会自动更新。

基本上就这些。虽然这个实现非常简化，没有处理复杂指令、事件绑定或数组变化，但它展示了MVVM的核心机制：数据劫持、依赖收集、模板编译和自动更新。理解这些原理有助于深入掌握Vue等现代框架的工作方式。

以上就是JavaScript实现一个简单的MVVM框架_js框架原理的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Vue 3中独立响应式实例的创建与应用状态管理库实现_javascript应用架构 JavaScript拖放API_复杂交互场景实战指南 Vue v-for 指令中字符串类型 Props 导致渲染失败的解决方案 Vue v-for循环渲染异常：props类型转换的陷阱与解决方案