import Dep from "./Dep.js"; import Watcher from "./Watcher.js"; export function observer(vm, obj) { const dep = new Dep(); // 创建一个发布者实例 Object.keys(obj).forEach((key) => { let internalValue = obj[key]; // 保存内部值 Object.defineProperty(vm, key, { get() { // 在获取响应式数据的时候,要做依赖的收集 if (Dep.target) { dep.addSub(Dep.target); } return internalValue; }, set(newVal) { // 在设置响应式数据的时候,要做依赖的通知 internalValue = newVal; dep.notify(); }, }); }); } export function compile(vm) { const el = document.querySelector(vm.$el); if (!el) { throw new Error(`Element with selector "${vm.$el}" not found.`); } const documentFragment = document.createDocumentFragment(); const reg = /\{\{(.*)\}\}/; while (el.firstChild) { const child = el.firstChild; if (child.nodeType === Node.ELEMENT_NODE) { const element = child; if (reg.test(element.innerHTML || "")) { const vmKey = RegExp.$1.trim(); new Watcher(vm, child, vmKey); } else { Array.from(element.attributes).forEach((attr) => { if (attr.name === "v-model") { const vmKey = attr.value; element.addEventListener("input", (event) => { const target = event.target; vm[vmKey] = target.value; }); } }); } } else if ( child.nodeType === Node.TEXT_NODE && reg.test(child.nodeValue || "") ) { const vmKey = RegExp.$1.trim(); new Watcher(vm, child, vmKey); } documentFragment.appendChild(child); } el.appendChild(documentFragment); }