答案：该MVVM框架通过Object.defineProperty实现数据劫持，结合Dep类进行依赖收集与通知，compile函数解析模板指令并绑定更新，最终在MVVM类中整合数据监听与视图渲染，实现数据变化自动驱动视图更新。
实现一个简单的MVVM框架，核心是数据劫持结合发布-订阅模式，通过Object.defineProperty监听数据变化，并在视图中响应更新。下面是一个极简但完整的MVVM示例，帮助理解其工作原理。
1. 数据劫持：监听数据变化
使用Object.defineProperty对数据对象的属性进行 getter/setter 重写，实现数据劫持。
function observe(data) { if (!data || typeof data !== 'object') return; Object.keys(data).forEach(key => { let value = data[key]; const dep = []; // 依赖收集器 observe(value); // 递归监听嵌套对象 Object.defineProperty(data, key, { enumerable: true, configurable: true, get() { if (Dep.target) { dep.push(Dep.target); // 收集依赖 } return value; }, set(newVal) { if (newVal === value) return; value = newVal; observe(newVal); // 新值也需监听 dep.forEach(fn => fn()); // 通知更新 } }); });}
2. 依赖管理：Dep类
Dep（Dependency）用于管理 watcher，实现依赖收集和派发更新。
const Dep = { target: null};
3. 编译模板：解析指令和插值
扫描DOM，解析v-model、{{ }}等语法，绑定数据更新视图。
立即学习“Java免费学习笔记（深入）”；
function compile(el, vm) { const fragment = document.createDocumentFragment(); let child; while (child = el.firstChild) { fragment.appendChild(child); } function replace(node) { const reg = /{{(.*)}}/; if (node.nodeType === 3 && reg.test(node.nodeValue)) { const key = RegExp.$1.trim(); Dep.target = () => { node.nodeValue = vm[key]; }; node.nodeValue = vm[key]; // 初始化赋值 Dep.target = null; } if (node.nodeType === 1) { const attrs = node.attributes; Array.from(attrs).forEach(attr => { const name = attr.name; const exp = attr.value; if (name === 'v-model') { node.value = vm[exp]; node.addEventListener('input', e => { vm[exp] = e.target.value; }); Dep.target = () => { node.value = vm[exp]; }; Dep.target = null; } }); } if (node.childNodes && node.childNodes.length) { compile(node, vm); } } fragment.childNodes.forEach(replace); el.appendChild(fragment);}
4. MVVM主类
整合数据监听、模板编译和初始化逻辑。
function MVVM(options) { this.$data = options.data; const id = options.el; const el = document.querySelector(id); observe(this.$data); compile(el, this); // 代理this上的属性访问 Object.keys(this.$data).forEach(key => { Object.defineProperty(this, key, { get() { return this.$data[key]; }, set(newVal) { this.$data[key] = newVal; } }); });}
使用方式：
new MVVM({ el: '#app', data: { message: 'Hello MVVM' }});
HTML结构：
{{ message }}
当输入框内容变化时，message被更新，setter触发，通知所有依赖重新渲染，视图自动刷新。
总结：这个简易MVVM包含三个核心部分——数据劫持（observe）、依赖收集（Dep）、视图更新（compile）。虽然缺少批量更新、组件系统等高级功能，但已体现MVVM本质：数据驱动视图。基本上就这些。
以上就是手写一个简单的MVVM框架_javascript技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538984.html
微信扫一扫 
支付宝扫一扫 
