中国网站建设市场分析讯杰网站建设

中国网站建设市场分析,讯杰网站建设,wordpress 3.3.1 漏洞,怎么向搜索引擎提交网站手写一个简易 MVVM 框架#xff1a;数据劫持、模板编译与发布订阅的整合各位开发者朋友#xff0c;大家好#xff01;今天我们来一起手写一个简易但完整的 MVVM 框架。这个框架虽然不复杂#xff0c;但它融合了前端开发中最核心的三大技术点#xff1a;数据劫持#xff0…手写一个简易 MVVM 框架数据劫持、模板编译与发布订阅的整合各位开发者朋友大家好今天我们来一起手写一个简易但完整的 MVVM 框架。这个框架虽然不复杂但它融合了前端开发中最核心的三大技术点数据劫持响应式原理模板编译视图更新机制发布-订阅模式状态同步机制我们将从零开始构建它让你真正理解 Vue.js 这类框架底层是如何工作的。文章会以讲座形式展开逻辑清晰、代码详实、语言自然适合有一定 JavaScript 基础的同学阅读。一、什么是 MVVMMVVM 是 Model-View-ViewModel 的缩写是一种用于构建用户界面的设计模式层级职责Model数据层通常是 JS 对象或 API 返回的数据ViewUI 层HTML CSS 构成的页面结构ViewModel连接 Model 和 View 的桥梁负责数据绑定和事件处理在我们的框架中ViewModel 就是我们要实现的核心对象 —— 它监听数据变化并自动更新 DOM。二、整体架构设计我们先定义一个简单的入口类MVVM它包含以下关键功能class MVVM { constructor(options) { this.$options options; this.$data options.data; // 1. 数据劫持让 data 变成响应式的 observe(this.$data); // 2. 编译模板将 {{xxx}} 替换为实际值 new Compile(this.$options.el, this); } }接下来我们分步实现这三个模块observe数据劫持、Compile模板编译、Watcher发布订阅。三、第一步数据劫持observe目标让this.$data中的所有属性变成“可观察”的一旦修改就能触发更新。核心思想使用Object.defineProperty劫持每个属性的 getter/setter当访问或修改时通知订阅者。function observe(data) { if (!data || typeof data ! object) return; Object.keys(data).forEach(key { defineReactive(data, key, data[key]); }); } function defineReactive(obj, key, val) { const dep new Dep(); // 每个属性对应一个 Dep 实例 Object.defineProperty(obj, key, { enumerable: true, configurable: true, get() { // 如果有 watcher 正在读取该属性则添加到依赖列表 if (Dep.target) { dep.addSub(Dep.target); } return val; }, set(newVal) { if (newVal val) return; val newVal; // 数据变更后通知所有订阅者watcher dep.notify(); } }); }这里引入了一个新的概念Dep依赖收集器class Dep { constructor() { this.subs []; // 存储所有订阅者watcher } addSub(sub) { this.subs.push(sub); } notify() { this.subs.forEach(sub sub.update()); } }注意Dep.target是一个全局变量用来临时保存当前正在执行的 Watcher后续详解。这一步完成后任何对$data的访问都会被拦截且赋值时能触发更新四、第二步模板编译Compile目标解析 HTML 中的插值表达式{{xxx}}并将其替换为真实数据。比如div idapp p{{name}}/p p{{age}}/p /div我们要把它变成div idapp p张三/p p25/p /div编译过程分为两步Step 1遍历 DOM 节点找到所有{{xxx}}表达式class Compile { constructor(el, vm) { this.el document.querySelector(el); this.vm vm; // 把真实 DOM 移动到 fragment 中提高性能 this.fragment this.nodeToFragment(this.el); // 编译 fragment 中的内容 this.compileElement(this.fragment); // 最终把 fragment 插入原容器 this.el.appendChild(this.fragment); } nodeToFragment(el) { const fragment document.createDocumentFragment(); let child; while ((child el.firstChild)) { fragment.appendChild(child); } return fragment; } compileElement(node) { if (node.nodeType 1) { // 元素节点如 p、div this.compileAttrs(node); } else if (node.nodeType 3) { // 文本节点如 Hello {{name}} this.compileText(node); } // 递归子节点 Array.from(node.childNodes).forEach(child { this.compileElement(child); }); } compileAttrs(node) { const attrs node.attributes; Array.from(attrs).forEach(attr { const attrName attr.name; const exp attr.value; if (attrName.startsWith(v-bind:)) { const key attrName.slice(7); // v-bind:name - name this.bindAttr(node, key, exp); } }); } compileText(node) { const text node.textContent.trim(); const reg /{{(.?)}}/g; // 匹配 {{xxx}} if (reg.test(text)) { node.textContent text.replace(reg, (_, key) { // 创建 watcher 监听这个 key 的变化 new Watcher(this.vm, key, (newVal) { node.textContent text.replace(reg, (_, k) newVal); }); return this.vm.$data[key]; }); } } bindAttr(node, key, exp) { new Watcher(this.vm, exp, (newVal) { node.setAttribute(key, newVal); }); node.setAttribute(key, this.vm.$data[exp]); } }关键点说明使用document.createDocumentFragment()避免频繁 DOM 操作。compileText处理文本节点中的{{xxx}}并创建 Watcher。bindAttr支持v-bind:绑定属性例如img src{{url}} /。现在只要你在data中改了某个字段对应的 DOM 就会自动刷新五、第三步发布订阅Watcher这是整个框架最精妙的部分 —— Watcher 是连接数据和视图的纽带。Watcher 类定义如下class Watcher { constructor(vm, exp, cb) { this.vm vm; this.exp exp; this.cb cb; // 当前 watcher 被 push 到 Dep.target 上 Dep.target this; // 触发一次 getter 获取初始值同时触发 dep.addSub this.value this.get(); Dep.target null; } get() { return this.vm.$data[this.exp]; // 触发 defineReactive 中的 getter } update() { const newVal this.get(); if (newVal ! this.value) { this.cb(newVal); // 更新回调函数 this.value newVal; } } }工作流程总结创建 Watcher 时设置Dep.target this执行this.get()→ 触发defineReactive.get()→ 添加当前 Watcher 到 Dep 的 subs 列表后续数据变更 →dep.notify()→ 所有 Watcher 执行update()在update()中调用用户传入的回调函数如更新 DOM这就是经典的观察者模式Observer Pattern六、完整示例演示让我们用一个完整的例子验证整个框架是否正常工作!DOCTYPE html html head titleMVVM Demo/title /head body div idapp h1{{title}}/h1 p姓名span v-bind:textname/span/p p年龄span{{age}}/span/p button onclickapp.change()改变数据/button /div script class MVVM { constructor(options) { this.$options options; this.$data options.data; observe(this.$data); new Compile(this.$options.el, this); } change() { this.$data.name 李四; this.$data.age 1; } } const app new MVVM({ el: #app, data: { title: 我的应用, name: 张三, age: 25 } }); window.app app; /script /body /html运行效果页面显示“我的应用”、“张三”、“25”点击按钮后名字变为 “李四”年龄加 1变为 26自动更新 DOM无需手动操作整个过程完全由框架内部完成你只需要关心业务数据七、对比传统做法 vs MVVM 框架方式缺点MVVM 解决方案手动操作 DOM如document.getElementById(...).innerHTML xxx易出错、难以维护数据驱动视图减少手动 DOM 操作事件监听 DOM 更新分离逻辑混乱、耦合度高Watcher 统一管理数据变更与视图同步不支持双向绑定需要额外逻辑处理输入框同步可扩展为双向绑定只需加 input 监听八、优化建议 扩展方向目前框架已经具备基础能力但可以进一步增强功能实现思路双向绑定v-model监听 input 输入事件同步到 datadata 变化也同步回 input计算属性computed将 computed 字段作为 Watcher缓存结果避免重复计算生命周期钩子如 mounted、updated提供 hook 函数供用户自定义行为指令系统v-if / v-for扩展 Compile 类支持更多语法糖异步更新队列避免多次 set 引起的频繁渲染合并成一次批量更新这些都可以基于现有结构轻松扩展九、总结今天我们亲手打造了一个简易但完整的 MVVM 框架其核心在于数据劫持observe通过Object.defineProperty实现响应式模板编译Compile识别并处理{{xxx}}和v-bind:发布订阅Watcher Dep建立数据与视图之间的通信链路。这套机制正是 Vue.js 的前身也是现代前端框架React Hooks、Svelte 等背后的通用思想。推荐学习路径先理解本文内容再看 Vue 源码尤其是observer、compiler、watcher尝试自己加上v-model、computed、filter等特性最终目标是掌握“如何从无到有搭建一个小型前端框架”希望这篇文章能帮你打通前端框架的理解壁垒不再只是“会用”而是“懂原理”。谢谢大家欢迎留言交流