經過了前面這么久，我們已經弄好了資料劫持，資料代理，還通過了發布訂閱模式實作了data中資料變化，頁面上也會跟著變化；
現在還差點東西，就是當頁面上的資料變化的時候，data中的資料也能跟著變化，進而使得頁面的資料都重繪成最新資料，這就是view->model這條線；
1.html準備
首先我們需要準備一個input標簽
<body> <div id="app"> <h1>呵呵：{{message}}</h1> <input type="text" v-model="message"> </div> <script src="./mvvm.js"></script> <script> // 自定義的myVue實體 let myVue = new MyVue({ el: '#app', data: { message: "hello world" } }) </script> </body>
2.資料雙向系結的實作
之前說過，html標簽中每一個{{}}占位符都是對應著一個Watcher，而且{{}}占位符處于文本節點中，我們在初始化的時候使用node.nodeType === 3 && reg.test(nodeText)條件，使用正則就能匹配文本節點中的{{}}占位符；
現在在初始化的程序，添加新邏輯：首先需要找到input標簽，我們可以使用node.nodeType === 1先找到元素節點，再找有v-model屬性的節點，然后取出其中的屬性值，這個屬性就對應著data中的資料；
初始化完成之后，有兩種可能：
（1）當我們手動的在input框中改變值，data中對應的屬性值也應該發生變化，這個就添加監聽事件去處理
node.addEventListener("input", e => {
// 獲取input輸入框中的值
let inputValue =https://www.cnblogs.com/wyq1995/archive/2020/12/30/ e.target.value;
//input中修改的值同步到到data中去，這里又會觸發該屬性的set方法，set方法中又會觸發發布訂閱模式，將所有的Watcher都呼叫一遍
vm[exp] = inputValue;
})
（2）當手動的修改data中的資料，set方法中會觸發所有的Watcher的回呼函式，這里的input標簽中的值也應該變化；
而之前我們只是對{{xxx}}占位符的文本節點創建了Watcher，這種占位符節點的值肯定會重繪，但是input是元素節點，不會重繪！所以需要將這種帶有v-model的元素節點也創建Watcher：
這段邏輯完整的代碼下圖所示，初始化的程序中首先找到v-model所在標簽的屬性值，將data中對應的屬性值覆寫input框中內容！而且還需要創建一個Watcher（Watcher注冊邏輯之前說過）以及給input添加事件監聽；
事件監聽用于初始化完成之后，用戶手動修改input框中的值，觸發data中的資料發生變化，進一步觸發set方法的notify方法，呼叫所有的Watcher的回呼函式，重繪頁面資料；
全部的js代碼：
function MyVue (options = {}) { //第一步：首先就是將實體化的物件給拿到，得到data物件 this.$options = options; this._data = https://www.cnblogs.com/wyq1995/archive/2020/12/30/this.$options.data; //第二步：資料劫持，將data物件中每一個屬性都設定get/set方法 observe(this._data); //第三步：資料代理，這里就是將_data的物件屬性放到myVue實體中一份，實際的資料還是_data中的 for (let key in this._data) { //這里的this代表當前myVue實體物件 Object.defineProperty(this, key, { enumerable: true, get () { return this._data[key]; }, set (newVal) { this._data[key] = newVal; } }) } //第四步：compile模板,需要將el屬性和當前myVue實體 compile(options.el, this) } function compile (el, vm) { return new Compile(el, vm); } function Compile (el, vm) { //將el代表的那個dom節點掛載到myVue實體中 vm.$el = document.querySelector(el); //創建虛擬節點容器樹 let fragment = document.createDocumentFragment(); //將el下所有的dom節點都放到容器樹中,注意appendChild方法，這里是將將dom節點移動到容器樹中啊，不是死回圈！ while (child = vm.$el.firstChild) { // console.log('count:' + vm.$el.childElementCount); fragment.appendChild(child) }; //遍歷虛擬節點中的所有節點，將真實資料填充覆寫這種占位符{{}} replace(fragment, vm); //將虛擬節點樹中內容渲染到頁面中 vm.$el.appendChild(fragment); } function replace (n, vm) { //遍歷容器樹中所有的節點，決議出{{}}里面的內容，然后將資料覆寫到節點中去 Array.from(n.childNodes).forEach(node => { console.log('nodeType:' + node.nodeType); let nodeText = node.textContent; let reg = /\{\{(.*)\}\}/; // 節點型別常用的有元素節點，屬性節點和文本節點，值分別是1,2,3 //一定要弄清楚這三種節點，比如<p id="123">hello</p>,這個p標簽整個的就是元素節點，nodeType==1 //id="123"可以看作是屬性節點，nodeType==2 //hello 表示文本節點，nodeType==3 //因為占位符{{}}只在文本節點中，所以需要判斷是否等于3 if (node.nodeType === 3 && reg.test(nodeText)) { // RegExp.$1是RegExp的一個屬性,指的是與正則運算式匹配的第一個 子匹配(以括號為標志)字串，以此類推，RegExp.$2，，， let arr = RegExp.$1.split("."); let val = vm; // 這個for回圈就是取出這樣的值：myVue[name][user] arr.forEach(i => { val = val[i]; }) // 創建Watcher，最主要的是傳入的這個回呼函式，會覆寫node節點中的占位符{{xxx}} new Watcher(vm, RegExp.$1, function (newVal) { node.textContent = nodeText.replace(reg, newVal); }) // 把值覆寫到虛擬節點的占位符{{}}這里 node.textContent = nodeText.replace(reg, val); } //這里遍歷到元素的節點，例如：<p id="xx">aaa</p></p>，<input type="text v-model=" username"> //然后需要取到其中的vue相關的指令，例如v-model="xxx"，一般是以v-開頭的 if (node.nodeType === 1) { // console.log(node); let nodeAttributes = node.attributes; Array.from(nodeAttributes).forEach(attr => { let name = attr.name; let exp = attr.value; // 找到v-model指令,data中的資料填充到input框中 if (name.indexOf("v-model") == 0) { node.value = vm[exp]; } // data中的資料變化，input中的資料也要跟著變化 new Watcher(vm, exp, function (newVal) { node.value = newVal; }) node.addEventListener("input", e => { // 獲取input輸入框中的值 let inputValue =https://www.cnblogs.com/wyq1995/archive/2020/12/30/ e.target.value; //input中修改的值同步到到data中去，這里又會觸發該屬性的set方法，set方法中又會觸發發布訂閱模式，將所有的Watcher都呼叫一遍 vm[exp] = inputValue; }) }) } // 第一個遍歷的節點是<div id="app">這一行后面的換行，nodeType等于3，但是沒有占位符{{}}，所以會進入到這里進行遞回呼叫內部 //的每一個節點，直到找到文本節點而且占位符{{}} if (node.childNodes) { replace(node, vm); } }) } //資料劫持操作 function observe (data) { // 如果data不是物件，就結束，不然遞回呼叫會堆疊溢位的 if (typeof data !== 'object') return; return new Observe(data); } function Observe (data) { let dep = new Dep(); // 遍歷data所有屬性 for (let key in data) { let val = data[key]; //初始化的時候， data中就有復雜物件的時候，例如data: { message:{a:{b:1}}} ,就需要遞回的遍歷這個物件中每一個屬性都添加get和set方法 observe(val); Object.defineProperty(data, key, { enumerable: true, get () { // 訂閱 Dep.target && dep.addSub(Dep.target); return val; }, set (newVal) { if (val === newVal) return; val = newVal; //當后續可能因為業務邏輯使得_data.message = {name: "小王"}，設定物件型別的屬性值，就需要遞回的給物件中{name: "小王"}的每個屬性也添加get和set方法 //否則name是沒有get/set方法的 observe(val); dep.notify(); } }) } } // ===============================發布訂閱=============================== // 可以看做是公眾號端 function Dep () { // 存放每個用戶的容器 this.subs = []; } //對外提供的api之一，供用戶訂閱 Dep.prototype.addSub = function (sub) { this.subs.push(sub); } // 對外提供的api之二，遍歷每個用戶，給每個用法發資訊 Dep.prototype.notify = function () { this.subs.forEach(sub => { sub.update(); }); } // 用戶端 function Watcher (vm, exp, fn) { // 這個可以看作是用戶的標志；注意，這個fn一般是一個回呼函式 this.vm = vm; this.exp = exp; this.fn = fn; Dep.target = this; let val = vm; let arr = exp.split("."); arr.forEach(item => { val = val[item]; }) Dep.target = null; } // 用戶端提供的對外api，讓公眾號端使用 Watcher.prototype.update = function () { let val = this.vm; let arr = this.exp.split("."); arr.forEach(item => { val = val[item]; }) this.fn(val); }View Code
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/242774.html
標籤：其他
上一篇：promise 學習筆記
下一篇：js常見排序演算法實作