上一篇已經實現了發佈訂閱模式了,現在我們實現從model->view的數據綁定,也就是當data中的數據改變後,頁面上的數據也要跟着變化;
1.發佈訂閱代碼的實際應用
我們思考一下,怎麼把我們上一篇實現到的發佈訂閱模式用到我們的vue中去呢?
(1)Watcher應該什麼時機創建呢?
之前說了一個{{xxx}}佔位符就代表一個watcher,那麼剛好在遍歷虛擬節點樹的時候會正則判斷每個出現{{xxx}}的所在節點,此時創建watcher實例正合適;
(2)Watcher構造函數中做了什麼?
在上圖中可以看到Watcher中傳入了三個參數,其中根據第一個和第二個參數就可以取到data中對應的{{user.name}}的值myVue[user][name],由於所有的屬性都綁定了有get方法,所以在獲取myVue[user][name]的時候就會觸發get方法,所以我們可以在get方法中添加新的邏輯,就是將當前Watcher註冊到Dep中一份;
(2.1)Watcher構造器(注意這裏最後設置爲null的這句,後面有用):
(2.2)get方法新增邏輯:
(3)那麼當我們修改myVue.user.name=”hello“的時候會發生什麼?
由於之前的數據劫持和數據代理,所以此時會觸發name這個屬性的set方法,我們需要在這個set方法中添加邏輯,就是觸發Dep中所有的Watcher的回調方法,就是(1)中回調函數;
(4)在(3)調用notify之後,每個watcher將會執行的行爲?
(5)大概捋一下思路:
(5.1)首先啓動項目,就會進行初始化,在編譯模板的階段會把html標籤中的所有{{}}佔位符都找到,我們就在這個時候新建Watcher,並設置回調函數就是給每個{{}},以便於後續調用直接覆蓋這個佔位符
(5.2)在Watcher創建的時候,會由於從data中取值的原因,會觸發該屬性的get方法,我們就把這個Watcher實例的指針丟到這個get方法中,實現註冊到Dep的邏輯
(5.3)在每個屬性的set方法中加入了notify的機制,這是爲了保證只要我們手動的將data數據修改之後,就會調用所有註冊到Dep中的Watcher的回調函數
(5.4)啓動完畢
(5.5)當我們修改data中的數據的時候,首先會觸發set方法中的notify方法,直接調用所有的Watcher的update方法實現發佈,在update方法中會獲取data中修改的最新值(此時雖然也會觸發這個屬性的get方法,但是沒有target屬性,因爲target屬性只會在創建Watcher的時候纔會賦值,創建完了之後就會設置爲null,不會去重複註冊同一個Watcher)
(5.6)獲取到了最新的值之後,傳到(5.1)中的回調函數,就可以實現覆蓋虛擬節點中的佔位符{{}},實現頁面的刷新,我們就能看到效果
2.代碼
html:
<body> <div id="app"> <h1>呵呵:{{user.name}}</h1> </div> <script src="./mvvm.js"></script> <script> // 自定義的myVue實例 let myVue = new MyVue({ el: '#app', data: { user: { name: "小王" } } }) </script> </body>
js:
function MyVue (options = {}) { //第一步:首先就是將實例化的對象給拿到,得到data對象 this.$options = options; this._data = 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); } // 第一個遍歷的節點是<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); }
現階段,當我們在控制檯修改myVue.user.name="xxx"的時候,頁面上也會跟着修改了