上篇說了一下vue中的資料劫持和資料代理，就是將data中的資料都添加set/get方法，這使得擴展性更好了，后續的會在這個set/get方法添加我們需要的邏輯；
現在我們說說怎么才能夠使得data中的資料和html標簽中的內容系結呢？
1.編譯模板
首先我們要思考一下，如果是你，你會怎么讓data和html標簽中的{{user.name}}這種東西進行匹配啊？
千萬別想花里胡哨的東西，最直接的辦法就是遍歷所有的html標簽，根據正則匹配到有兩個大括號的就行啊，然后就取出大括號中的資料user.name，然后切割一下，就成了[user，name]，再之后遍歷這個陣列，拿到data[user][name]就行了，而且由于前面已經做好資料代理，我們可以直接這樣取值myVue[user][name]，取到值之后，就把html標簽中{{xxx}}進行覆寫，然后繼續找下一個有{{}}占位符的；
這就是大概的邏輯，基于這個就可以將html中的標簽中的{{user.name}}變成實際的資料了；
但是還需要解決一個問題，怎么拿到所有的html標簽呢？而且在遍歷之后把資料渲染到頁面上效率提高一點呢？
所以我們需要知道一個容器：document.createDocumentFragment，這是一個虛擬節點的容器樹，我們可以將當多個dom元素丟到DocumentFragment中，再統一將DocumentFragment添加到頁面，會減少頁面渲染dom的次數，效率會明顯提升，有興趣的可以自行了解一下這個
ok，理論說完了，大概就是這么幾步
（1）首先根據實體化myVue實體時候傳進去的el屬性 "#app"，就可以找到dom節點
let myVue = new MyVue({ el: '#app', data: { message: { a: { b: 1 } } } })
（2）根據document.createDocumentFragment創建虛擬節點的容器樹，遍歷所有的dom節點都丟到容器樹中
（3）再遍歷虛擬容器樹中每個節點，使用正則匹配到有兩個大括號的節點，將節點中的運算式取出來，例如user.name
(4) 根據運算式取出data中的值，由于進行了資料劫持，data中的值可以直接用myVue[user][name]獲取，取到了值之后，就將對應的容器樹中的對應節點中{{user.name}}覆寫掉
（5）將虛擬容器樹渲染到頁面中，我們就能看出效果了；
下面用代碼簡單實作一下模板編譯的代碼：
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]; }) // 把值覆寫到虛擬節點的占位符{{xxx}}這里 node.textContent = nodeText.replace(reg, val); } // 最開始第一個遍歷的節點是<div id="app">這一行后面有個你看不到的換行，所以nodeType等于3，但是沒有占位符{{}}，所以會進行遞回呼叫內部 //的每一個節點，直到找到是文本節點而且有占位符{{}} if (node.childNodes) { replace(node, vm); } }) }
2.js實作發布訂閱模式
我們說說設計模式，什么叫做發布訂閱模式呢？你想想你微信訂閱的公眾號就知道了，假如一個微信的公眾號Dep，然后有3個用戶Watcher去訂閱它，然后公眾號Dep只要一發布什么資訊，那么每一個Watcher都會收到一份；
然后我們要思考，首先是Dep，這里面肯定有一個容器，可以裝訂閱過當前公眾號的所有用戶，而且還需要對外提供兩個api，一個是訂閱當前公眾號的方法，方便用戶使用；另外一個是發布資訊的方法，是給公眾號所屬的那個人使用，只要他呼叫這個方法，就會遍歷這個容器中的所有用戶，向每個用戶發送資訊；
再就是用戶端Watcher，這端需要啥呢？肯定也需要一個對外的api，方便公眾號那一端呼叫這個api把資訊發送到用戶手機這邊來吧！然后每個用戶都是不一樣的，我們需要有個屬性作為標識；
// 可以看做是公眾號端 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 (fn) { // 這個可以看作是用戶的標志；注意，這個fn一般是一個回呼函式 this.fn = fn; } // 用戶端提供的對外api，讓公眾號端使用 Watcher.prototype.update = function () { this.fn(); } // ================================測驗================================ // 新建三個用戶 let watcher1 = new Watcher(() => { console.log('發送給用戶1'); }) let watcher2 = new Watcher(() => { console.log('發送給用戶2'); }) let watcher3 = new Watcher(() => { console.log('發送給用戶3'); }) // 用戶注冊 let dep = new Dep(); dep.addSub(watcher1); dep.addSub(watcher2); dep.addSub(watcher3); // 像每個用戶發送資訊 dep.notify();
使用node運行一下結果如下
理解了這個模式之后，后面我們需要將這個設計模式應用到我們自己的vue中，使得當我們呢修改data中的資料之后，頁面上也會立刻重繪；
其實也很好理解，data只有一份嘛，就可以想象成上面說的公眾號端，然后html中肯定有多個占位符{{}}的吧，那就是用戶端唄！只要data中的資料一修改，這肯定就會觸發資料劫持的那個set方法吧，然后我們只需要再set方法中搞點事，呼叫一下Dep的notify方法通知一下所有的Watcher，在Watcher中就會觸發那個fn回呼函式去把頁面上的資料覆寫局ok了；
這個發布訂閱的實作代碼下一篇再寫；
3.現階段代碼
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 = https://www.cnblogs.com/wyq1995/p/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]; }) // 把值覆寫到虛擬節點的占位符{{}}這里 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) { // 遍歷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 () { return val; }, set (newVal) { if (val === newVal) return; val = newVal; //當后續可能因為業務邏輯使得_data.message = {name: "小王"}，設定物件型別的屬性值，就需要遞回的給物件中{name: "小王"}的每個屬性也添加get和set方法 //否則name是沒有get/set方法的 observe(val); } }) } }View Code
當前代碼的效果是頁面中可以顯示資料了，下一篇我們說說根據發布訂閱原理，使得我們改變data中的資料，頁面上的資料也會跟著變化
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/242284.html
標籤：JavaScript
下一篇：js常用方法封裝