詳解Vue中的MVVM原理和實(shí)現(xiàn)方法
下面由我阿巴阿巴的詳細(xì)走一遍Vue中MVVM原理的實(shí)現(xiàn)，這篇文章大家可以學(xué)習(xí)到：
1.Vue數(shù)據(jù)雙向綁定核心代碼模塊以及實(shí)現(xiàn)原理
2.訂閱者-發(fā)布者模式是如何做到讓數(shù)據(jù)驅(qū)動(dòng)視圖、視圖驅(qū)動(dòng)數(shù)據(jù)再驅(qū)動(dòng)視圖
3.如何對(duì)元素節(jié)點(diǎn)上的指令進(jìn)行解析并且關(guān)聯(lián)訂閱者實(shí)現(xiàn)視圖更新
一、思路整理
實(shí)現(xiàn)的流程圖：
我們要實(shí)現(xiàn)一個(gè)類(lèi)MVVM簡(jiǎn)單版本的Vue框架,就需要實(shí)現(xiàn)一下幾點(diǎn)：
1、實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽(tīng)Observer，對(duì)數(shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽(tīng)，數(shù)據(jù)發(fā)生變化可以獲取到最新值通知訂閱者。
2、實(shí)現(xiàn)一個(gè)解析器Compile解析頁(yè)面節(jié)點(diǎn)指令，初始化視圖。
3、實(shí)現(xiàn)一個(gè)觀(guān)察者Watcher，訂閱數(shù)據(jù)變化同時(shí)綁定相關(guān)更新函數(shù)。并且將自己放入觀(guān)察者集合Dep中。Dep是Observer和Watcher的橋梁，數(shù)據(jù)改變通知到Dep，然后Dep通知相應(yīng)的Watcher去更新視圖。
二、實(shí)現(xiàn)
以下采用ES6的寫(xiě)法，比較簡(jiǎn)潔，所以大概在300多行代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的MVVM框架。
1、實(shí)現(xiàn)html頁(yè)面
按Vue的寫(xiě)法在頁(yè)面定義好一些數(shù)據(jù)跟指令，引入了兩個(gè)JS文件。先實(shí)例化一個(gè)MVue的對(duì)象，傳入我們的el，data，methods這些參數(shù)。待會(huì)再看Mvue.js文件是什么？
html
<body> <div id='app'> <h2>{{person.name}} --- {{person.age}}</h2> <h3>{{person.fav}}</h3> <h3>{{person.a.b}}</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <h3>{{msg}}</h3> <div v-text='msg'></div> <div v-text='person.fav'></div> <div v-html='htmlStr'></div> <input type='text' v-model='msg'> <button v-on:click='click111'>按鈕on</button> <button @click='click111'>按鈕@</button> </div> <script src='http://www.gepszalag.com/bcjs/MVue.js'></script> <script src='http://www.gepszalag.com/bcjs/Observer.js'></script> <script> let vm = new MVue({ el: ’#app’, data: { person: { name: ’星哥’, age: 18, fav: ’姑娘’, a: { b: ’787878’ } }, msg: ’學(xué)習(xí)MVVM實(shí)現(xiàn)原理’, htmlStr: ’<h4>大家學(xué)的怎么樣</h4>’, }, methods: { click111() { console.log(this) this.person.name = ’學(xué)習(xí)MVVM’ // this.$data.person.name = ’學(xué)習(xí)MVVM’ } } }) </script></body>
2、實(shí)現(xiàn)解析器和觀(guān)察者
MVue.js
// 先創(chuàng)建一個(gè)MVue類(lèi),它是一個(gè)入口Class MVue { construction(options) { this.$el = options.el this.$data = options.data this.$options = options } if(this.$el) { // 1.實(shí)現(xiàn)一個(gè)數(shù)據(jù)的觀(guān)察者 --先看解析器，再看Obeserver new Observer(this.$data) // 2.實(shí)現(xiàn)一個(gè)指令解析器 new Compile(this.$el,this) }}// 定義一個(gè)Compile類(lèi)解析元素節(jié)點(diǎn)和指令class Compile { constructor(el,vm) { // 判斷el是否是元素節(jié)點(diǎn)對(duì)象，不是就通過(guò)DOM獲取 this.el = this.isElementNode(el) ? el : document.querySelector(el) this.vm = vm // 1.獲取文檔碎片對(duì)象，放入內(nèi)存中可以減少頁(yè)面的回流和重繪 const fragment = this.node2Fragment(this.el) // 2.編輯模板 this.compile(fragment) // 3.追加子元素到根元素(還原頁(yè)面) this.el.appendChild(fragment) } // 將元素插入到文檔碎片中 node2Fragment(el) { const f = document.createDocumnetFragment(); let firstChild while(firstChild = el.firstChild) { // appendChild // 將已經(jīng)存在的節(jié)點(diǎn)再次插入，那么原來(lái)位置的節(jié)點(diǎn)自動(dòng)刪除，并在新的位置重新插入。 f.appendChild(firstChild) } // 此處執(zhí)行完，頁(yè)面已經(jīng)沒(méi)有元素節(jié)點(diǎn)了 return f } // 解析模板 compile(frafment) { // 1.獲取子節(jié)點(diǎn) conts childNodes = fragment.childNodes; [...childNodes].forEach(child => { if(this.isElementNode(child)) {// 是元素節(jié)點(diǎn)// 編譯元素節(jié)點(diǎn)this.compileElement(child) } else {// 文本節(jié)點(diǎn)// 編譯文本節(jié)點(diǎn)this.compileText(child) } // 嵌套子節(jié)點(diǎn)進(jìn)行遍歷解析 if(child.childNodes && child.childNodes.length) {this.compule(child) } }) } // 判斷是元素節(jié)點(diǎn)還是屬性節(jié)點(diǎn) isElementNode(node) { // nodeType屬性返回 以數(shù)字值返回指定節(jié)點(diǎn)的節(jié)點(diǎn)類(lèi)型。1-元素節(jié)點(diǎn) 2-屬性節(jié)點(diǎn) return node.nodeType === 1 } // 編譯元素節(jié)點(diǎn) compileElement(node) { // 獲得元素屬性集合 const attributes = node.attributes [...attributes].forEach(attr => { const {name, value} = attr if(this.isDirective(name)) { // 判斷屬性是不是以v-開(kāi)頭的指令// 解析指令（v-mode v-text v-on:click 等...）const [, dirctive] = name.split(’-’)const [dirName, eventName] = dirctive.split(’:’)// 初始化視圖 將數(shù)據(jù)渲染到視圖上compileUtil[dirName](node, value, this.vm, eventName)// 刪除有指令的標(biāo)簽上的屬性node.removeAttribute(’v-’ + dirctive) } else if (this.isEventName(name)) { //判斷屬性是不是以@開(kāi)頭的指令// 解析指令let [, eventName] = name.split(’@’)compileUtil[’on’](node,val,this.vm, eventName)// 刪除有指令的標(biāo)簽上的屬性node.removeAttribute(’@’ + eventName) } else if(this.isBindName(name)) { //判斷屬性是不是以:開(kāi)頭的指令// 解析指令let [, attrName] = name.split(’:’)compileUtil[’bind’](node,val,this.vm, attrName)// 刪除有指令的標(biāo)簽上的屬性node.removeAttribute(’:’ + attrName) } }) } // 編譯文本節(jié)點(diǎn) compileText(node) { const content = node.textContent if(/{{(.+?)}}/.test(content)) { compileUtil[’text’](node, content, this.vm) } } // 判斷屬性是不是指令 isDirective(attrName) { return attrName.startsWith(’v-’) } // 判斷屬性是不是以@開(kāi)頭的事件指令 isEventName(attrName) { return attrName.startsWith(’@’) } // 判斷屬性是不是以:開(kāi)頭的事件指令 isBindName(attrName) { return attrName.startsWith(’:’) }}// 定義一個(gè)對(duì)象，針對(duì)不同指令執(zhí)行不同操作const compileUtil = { // 解析參數(shù)(包含嵌套參數(shù)解析)，獲取其對(duì)應(yīng)的值 getVal(expre, vm) { return expre.split(’.’).reduce((data, currentVal) => { return data[currentVal] }, vm.$data) }, // 獲取當(dāng)前節(jié)點(diǎn)內(nèi)參數(shù)對(duì)應(yīng)的值 getgetContentVal(expre,vm) { return expre.replace(/{{(.+?)}}/g, (...arges) => { return this.getVal(arges[1], vm) }) }, // 設(shè)置新值 setVal(expre, vm, inputVal) { return expre.split(’.’).reduce((data, currentVal) => { return data[currentVal] = inputVal }, vm.$data) }, // 指令解析：v-test test(node, expre, vm) { let value; if(expre.indexOf(’{{’) !== -1) { // 正則匹配{{}}里的內(nèi)容 value = expre.replace(/{{(.+?)}}/g, (...arges) => {// new watcher這里相關(guān)的先可以不看，等后面講解寫(xiě)到觀(guān)察者再回頭看。這里是綁定觀(guān)察者實(shí)現(xiàn) 的效果是通過(guò)改變數(shù)據(jù)會(huì)觸發(fā)視圖，即數(shù)據(jù)=》視圖。// 沒(méi)有new watcher 不影響視圖初始化(頁(yè)面參數(shù)的替換渲染)。// 訂閱數(shù)據(jù)變化，綁定更新函數(shù)。new watcher(vm, arges[1], () => { // 確保 {{person.name}}----{{person.fav}} 不會(huì)因?yàn)橐粋€(gè)參數(shù)變化都被成新值 this.updater.textUpdater(node, this.getgetContentVal(expre,vm))})return this.getVal(arges[1],vm) }) } else { // 同上，先不看 // 數(shù)據(jù)=》視圖 new watcher(vm, expre, (newVal) => { // 找不到{}說(shuō)明是test指令，所以當(dāng)前節(jié)點(diǎn)只有一個(gè)參數(shù)變化，直接用回調(diào)函數(shù)傳入的新值 this.updater.textUpdater(node, newVal) }) value = this.getVal(expre,vm) } // 將數(shù)據(jù)替換，更新到視圖上 this.updater.textUpdater(node,value) }, //指令解析： v-html html(node, expre, vm) { const value = this.getVal(expre, vm) // 同上，先不看 // 綁定觀(guān)察者 數(shù)據(jù)=》視圖 new watcher(vm, expre (newVal) => { this.updater.htmlUpdater(node, newVal) }) // 將數(shù)據(jù)替換，更新到視圖上 this.updater.htmlUpdater(node, newVal) }, // 指令解析：v-mode model(node,expre, vm) { const value = this.getVal(expre, vm) // 同上，先不看 // 綁定觀(guān)察者 數(shù)據(jù)=》視圖 new watcher(vm, expre, (newVal) => { this.updater.modelUpdater(node, newVal) }) // input框 視圖=》數(shù)據(jù)=》視圖 node.addEventListener(’input’, (e) => { //設(shè)置新值 - 將input值賦值到v-model綁定的參數(shù)上 this.setVal(expre, vm, e.traget.value) }) // 將數(shù)據(jù)替換，更新到視圖上 this.updater.modelUpdater(node, value) }, // 指令解析： v-on on(node, expre, vm, eventName) { // 或者指令綁定的事件函數(shù) let fn = vm.$option.methods && vm.$options.methods[expre] // 監(jiān)聽(tīng)函數(shù)并調(diào)用 node.addEventListener(eventName,fn.bind(vm),false) }, // 指令解析： v-bind bind(node, expre, vm, attrName) { const value = this.getVal(expre,vm) this.updater.bindUpdate(node, attrName, value) }// updater對(duì)象，管理不同指令對(duì)應(yīng)的更新方法updater: { // v-text指令對(duì)應(yīng)更新方法 textUpdater(node, value) { node.textContent = value }, // v-html指令對(duì)應(yīng)更新方法 htmlUpdater(node, value) { node.innerHTML = value }, // v-model指令對(duì)應(yīng)更新方法 modelUpdater(node,value) { node.value = value }, // v-bind指令對(duì)應(yīng)更新方法 bindUpdate(node, attrName, value) { node[attrName] = value } },}
3、實(shí)現(xiàn)數(shù)據(jù)劫持監(jiān)聽(tīng)
我們有了數(shù)據(jù)監(jiān)聽(tīng)，還需要一個(gè)觀(guān)察者可以觸發(fā)更新視圖。因?yàn)樾枰獢?shù)據(jù)改變才能觸發(fā)更新，所有還需要一個(gè)橋梁Dep收集所有觀(guān)察者(觀(guān)察者集合)，連接Observer和Watcher。數(shù)據(jù)改變通知Dep，Dep通知相應(yīng)的觀(guān)察者進(jìn)行視圖更新。
Observer.js
// 定義一個(gè)觀(guān)察者class watcher { constructor(vm, expre, cb) { this.vm = vm this.expre = expre this.cb =cb // 把舊值保存起來(lái) this.oldVal = this.getOldVal() } // 獲取舊值 getOldVal() { // 將watcher放到targe值中 Dep.target = this // 獲取舊值 const oldVal = compileUtil.getVal(this.expre, this.vm) // 將target值清空 Dep.target = null return oldVal } // 更新函數(shù) update() { const newVal = compileUtil.getVal(this.expre, this.vm) if(newVal !== this.oldVal) { this.cb(newVal) } }}// 定義一個(gè)觀(guān)察者集合class Dep { constructor() { this.subs = [] } // 收集觀(guān)察者 addSub(watcher) { this.subs.push(watcher) } //通知觀(guān)察者去更新 notify() { this.subs.forEach(w => w.update()) }}// 定義一個(gè)Observer類(lèi)通過(guò)gettr，setter實(shí)現(xiàn)數(shù)據(jù)的監(jiān)聽(tīng)綁定class Observer { constructor(data) { this.observer(data) } // 定義函數(shù)解析data,實(shí)現(xiàn)數(shù)據(jù)劫持 observer (data) { if(data && typeof data === ’object’) { // 是對(duì)象遍歷對(duì)象寫(xiě)入getter，setter方法 Reflect.ownKeys(data).forEach(key => {this.defineReactive(data, key, data[key]); }) } } // 數(shù)據(jù)劫持方法 defineReactive(obj,key, value) { // 遞歸遍歷 this.observer(data) // 實(shí)例化一個(gè)dep對(duì)象 const dep = new Dep() // 通過(guò)ES5的API實(shí)現(xiàn)數(shù)據(jù)劫持 Object.defineProperty(obj, key, { enumerable: true, configurable: false, get() {// 當(dāng)讀當(dāng)前值的時(shí)候，會(huì)觸發(fā)。// 訂閱數(shù)據(jù)變化時(shí)，往Dep中添加觀(guān)察者Dep.target && dep.addSub(Dep.target)return value }, set: (newValue) => {// 對(duì)新數(shù)據(jù)進(jìn)行劫持監(jiān)聽(tīng)this.observer(newValue)if(newValue !== value) { value = newValue}// 告訴dep通知變化dep.notify() } }) }}
三、總結(jié)
其實(shí)復(fù)雜的地方有三點(diǎn)：
1、指令解析的各種操作有點(diǎn)復(fù)雜饒人，其中包含DOM的基本操作和一些ES中的API使用。但是你靜下心去讀去想，肯定是能理順的。
2、數(shù)據(jù)劫持中Dep的理解，一是收集觀(guān)察者的集合，二是連接Observer和watcher的橋梁。
3、觀(guān)察者是什么時(shí)候進(jìn)行綁定的？又是如何工作實(shí)現(xiàn)了數(shù)據(jù)驅(qū)動(dòng)視圖，視圖驅(qū)動(dòng)數(shù)據(jù)驅(qū)動(dòng)視圖的。
在gitHub上有上述源碼地址，歡迎clone打樁嘗試，還請(qǐng)不要吝嗇一個(gè)小星星喲！
以上就是詳解Vue中的MVVM原理和實(shí)現(xiàn)方法的詳細(xì)內(nèi)容，更多關(guān)于Vue中的MVVM的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. 刪除docker里建立容器的操作方法2. xml中的空格之完全解說(shuō)3. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法4. ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹(shù)形下拉框的方法5. 使用Docker的NFS-Ganesha鏡像搭建nfs服務(wù)器的詳細(xì)過(guò)程6. IntelliJ IDEA設(shè)置編碼格式的方法7. IntelliJ IDEA調(diào)整字體大小的方法8. IntelliJ IDEA設(shè)置條件斷點(diǎn)的方法步驟9. VMware中如何安裝Ubuntu10. Django使用HTTP協(xié)議向服務(wù)器傳參方式小結(jié)
網(wǎng)公網(wǎng)安備