js mvvm实现
MVVM 模式简介
MVVM（Model-View-ViewModel）是一种前端架构模式，通过数据绑定实现视图（View）与数据模型（Model）的分离。ViewModel 作为中间层，负责处理业务逻辑和状态管理。
核心实现步骤
数据绑定
通过 Object.defineProperty 或 ES6 Proxy 实现数据劫持，监听数据变化并更新视图。以下是基于 Proxy 的简单实现：
class Observer {
constructor(data) {
return new Proxy(data, {
set(target, key, value) {
target[key] = value;
updateView(); // 触发视图更新
return true;
}
});
}
}视图模板解析
使用文档片段（DocumentFragment）或正则表达式解析模板中的指令（如 v-model、v-bind）：
function compile(template, data) {
const fragment = document.createDocumentFragment();
fragment.appendChild(document.querySelector(template).content.cloneNode(true));
Array.from(fragment.querySelectorAll('[v-model]')).forEach(node => {
node.value = data[node.getAttribute('v-model')];
node.addEventListener('input', (e) => {
data[node.getAttribute('v-model')] = e.target.value;
});
});
document.body.appendChild(fragment);
}ViewModel 层 整合数据绑定与视图逻辑，典型实现示例：
class ViewModel {
constructor(options) {
this.data = new Observer(options.data);
this.methods = options.methods;
compile(options.template, this.data);
}
}完整示例
<div id="app">
<input v-model="message" type="text">
<p>{{ message }}</p>
</div>
<script>
const vm = new ViewModel({
template: '#app',
data: { message: 'Hello MVVM' },
methods: {
showAlert() { alert(this.data.message); }
}
});
</script>进阶优化方向
- 虚拟 DOM Diff 算法：类似 Vue/React 的差异化更新策略提升性能
- 指令扩展：支持
v-for、v-if等复杂指令 - 依赖收集系统：精确追踪数据依赖关系避免不必要的更新
现有库对比
- Vue.js：最成熟的 MVVM 实现，支持响应式系统和组件化
- Knockout.js：早期 MVVM 库，依赖
observable手动声明 - MobX：专注于状态管理的响应式实现
以上方案可根据项目复杂度选择从零实现或采用现有库。核心在于理解数据驱动视图的绑定机制和单向数据流原则。
