J*aScript实现一个简单的MVVM框架_js框架原理_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript实现一个简单的MVVM框架_js框架原理

2025-11-06

浏览次数：次

返回列表

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

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

要实现一个简单的MVVM（Model-View-ViewModel）框架，核心是数据绑定和响应式更新。我们可以通过J*aScript的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节点，查找{{ }}语法并替换成对应的数据值。

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用于在数据变化时执行对应的更新函数。

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类来管理依赖：

RhaPHP微信公众号管理系统

RhaPHP 是一款免费开源的微信公众号管理营销系统！也是一款微信公众号开发框架。简洁，灵活，快速易开发，应用模块化，支持移动端管理微信公众号。基于 THINKPHP5，简单的代码即可实现微信公众号通信与接口实现。不需要花大量时间研究系统即可快速开发微信应用，rhaphp在微信开发有着灵活机制，支持移动管理微信公众号。系统运行环境 PHP+MYSQL。

2 查看详情 RhaPHP微信公众号管理系统

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等现代框架的工作方式。

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

# 运行环境 # 学seo网络推广 # 调味品品牌营销推广文案 # 企业营销推广工作计划 # 深圳网站建设专家评价 # 网站宕机优化 # 昆山关键词排名哪里有 # 宜昌网站建设指南公布 # 临沂网络营销推广哪里好 # 泰安产品推广营销公司 # 河东网站优化开发方案 # 遍历 # 也能 # 也要 # vue # 是一个 # 复用 # 递归 # 绑定 # 自动更新 # 管理系统 # proxy # app # node # js # html # java # javascript

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：dc.js 条形图分组与维度：深度解析自定义分箱策略及其对刷选功能的影响

下一篇：WebGL鼠标事件绘制像素：理解顶点属性与绘制调用

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们