如何实现一个轻量级的MVVM框架-js教程-PHP中文网

如何实现一个轻量级的MVVM框架

紅蓮之龍

发布： 2025-11-01 10:59:23

原创

952人浏览过

实现轻量级MVVM需核心四步：1. 用Proxy劫持数据实现响应式；2. 遍历DOM解析{{}}和v-model指令；3. 编译时收集依赖，将更新函数存入watchers；4. 数据变化时触发回调，通知所有依赖更新视图。

如何实现一个轻量级的mvvm框架

实现一个轻量级的MVVM框架，核心在于数据绑定、响应式更新和视图与模型的分离。不需要依赖庞大的库，只需抓住几个关键机制：数据劫持、模板解析、依赖收集和视图更新。下面一步步说明如何从零构建一个极简但可用的 MVVM 框架。

数据劫持与响应式系统

要让数据变化能自动触发视图更新，必须监听数据的变化。在现代 JavaScript 中，可以使用 Proxy 或 Object.defineProperty 来实现属性的 getter 和 setter 劫持。

这里以 Proxy 为例，因为它更简洁且支持数组和动态属性：

这个函数将传入的对象包装成响应式对象，每次修改属性时都会调用回调函数。

模板解析与指令识别

MVVM 的核心是把数据渲染到 DOM。我们需要解析模板中的绑定语法，比如 {{ message }} 或自定义指令如 v-model。

遍历 DOM 节点，查找文本节点中的插值表达式或元素上的指令：

const compile = (el, data, updateView) => { const childNodes = el.childNodes; childNodes.forEach(node => { if (node.nodeType === 3) { // 文本节点 const text = node.textContent; const reg = /\{\{(.+?)\}\}/g; if (reg.test(text)) { const key = RegExp.$1.trim(); updateView(node, key); // 初次更新 // 数据变化时重新执行 updateView } } else if (node.nodeType === 1) { // 元素节点 const attrs = node.attributes; Array.from(attrs).forEach(attr => { if (attr.name === 'v-model') { const key = attr.value; node.value = data[key]; node.addEventListener('input', () => { data[key] = node.value; }); updateView(node, key, true); // 绑定 input 更新 } }); } if (node.childNodes.length) { compile(node, data, updateView); // 递归子节点 } }); };

依赖收集与视图更新

当数据变化时，需要知道哪些视图依赖了该数据。可以在初始化编译时记录每个绑定对应的 DOM 节点和更新逻辑。

一键职达

AI全自动批量代投简历软件，自动浏览招聘网站从海量职位中用AI匹配职位并完成投递的全自动操作，真正实现'一键职达'的便捷体验。

查看详情

定义一个简单的更新函数：

在数据劫持的回调中通知所有订阅者更新：

this.$watchers = {}; Object.keys(this.$data).forEach(key => { this.$watchers[key] = []; }); // 在 observe 的 callback 中： callback = (key, value) => { this.$watchers[key].forEach(fn => fn()); };

整合成 MVVM 类

把以上逻辑封装成一个类：

class TinyMVVM { constructor(options) { this.$el = options.el; this.$data = options.data(); this.$watchers = {}; Object.keys(this.$data).forEach(key => { this.$watchers[key] = []; }); // 响应式化数据 this.$data = observe(this.$data, (key, value) => { this.$watchers[key].forEach(fn => fn()); }); // 编译模板 const el = document.querySelector(this.$el); compile(el, this.$data, (node, key, isInput) => { const updateFn = () => { if (isInput) { node.value = this.$data[key]; } else { node.textContent = this.$data[key]; } }; updateFn(); this.$watchers[key].push(updateFn); }); } }

使用方式：

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

HTML 示例：

<div id="app"> <p>{{ message }}</p> <input v-model="message" /> </div> 基本上就这些。一个轻量级 MVVM 的核心就是数据劫持 + 模板解析 + 视图更新。虽然没有 Vue 那样完整的虚拟 DOM 和编译优化，但理解这些原理有助于掌握响应式框架的本质。不复杂但容易忽略细节，比如递归编译、事件绑定和依赖管理。

以上就是如何实现一个轻量级的MVVM框架的详细内容，更多请关注php中文网其它相关文章！