js mvvm 实现
MVVM 模式简介
MVVM（Model-View-ViewModel）是一种前端架构模式，核心思想是通过数据绑定实现视图（View）与数据模型（Model）的自动同步。ViewModel 作为中间层，负责处理业务逻辑和数据转换。
实现 MVVM 的关键技术
数据劫持（响应式核心）
通过 Object.defineProperty 或 Proxy 监听数据变化：
// 使用 Proxy 实现数据劫持
function observe(data) {
return new Proxy(data, {
get(target, key) {
return target[key];
},
set(target, key, value) {
target[key] = value;
updateView(); // 触发视图更新
return true;
}
});
}模板编译
解析 DOM 模板中的指令（如 v-model）并建立绑定：
function compile(el, vm) {
el.querySelectorAll('[v-model]').forEach(node => {
const key = node.getAttribute('v-model');
node.value = vm.data[key];
node.addEventListener('input', (e) => {
vm.data[key] = e.target.value;
});
});
}依赖收集
实现 Watcher 类跟踪依赖关系：
class Watcher {
constructor(vm, key, updateFn) {
this.vm = vm;
this.key = key;
this.updateFn = updateFn;
Dep.target = this;
this.vm[this.key]; // 触发getter收集依赖
Dep.target = null;
}
update() {
this.updateFn.call(this.vm, this.vm[this.key]);
}
}完整实现示例
class MVVM {
constructor(options) {
this.$el = document.querySelector(options.el);
this._data = options.data;
this.data = observe(this._data);
this.compile(this.$el);
}
compile(el) {
el.querySelectorAll('[v-model]').forEach(node => {
const key = node.getAttribute('v-model');
node.value = this.data[key];
new Watcher(this, key, value => {
node.value = value;
});
node.addEventListener('input', e => {
this.data[key] = e.target.value;
});
});
}
}实现注意事项
- 性能优化：避免频繁 DOM 操作，可使用虚拟 DOM 或差异化更新
- 指令扩展：支持
v-for、v-if等复杂指令 - 内存管理：及时清除无用的事件监听和 Watcher
现代框架对比
- Vue 2.x 使用
Object.defineProperty - Vue 3.x 改用
Proxy - React 虽然非 MVVM 但理念相似（单向数据流）
- Angular 采用更完整的 MVVM 实现
以上实现展示了 MVVM 的核心原理，实际项目中建议直接使用成熟框架。理解这些底层机制有助于更好地使用框架和解决复杂问题。
