vue指令写在html中的原理,详解Vue中的MVVM原理和实现方法
對Vue中的MVVM原理解析和實現(xiàn)首先你對Vue需要有一定的了解，知道MVVM。這樣才能更有助于你順利的完成下面原理的閱讀學(xué)習(xí)和編寫下面由我阿巴阿巴的詳細(xì)走一遍Vue中MVVM原理的實現(xiàn)，這篇文章大家可以學(xué)習(xí)到：
1.Vue數(shù)據(jù)雙向綁定核心代碼模塊以及實現(xiàn)原理
2.訂閱者-發(fā)布者模式是如何做到讓數(shù)據(jù)驅(qū)動視圖、視圖驅(qū)動數(shù)據(jù)再驅(qū)動視圖
3.如何對元素節(jié)點(diǎn)上的指令進(jìn)行解析并且關(guān)聯(lián)訂閱者實現(xiàn)視圖更新
1、思路整理
實現(xiàn)的流程圖：
我們要實現(xiàn)一個類MVVM簡單版本的Vue框架,就需要實現(xiàn)一下幾點(diǎn)：
1、實現(xiàn)一個數(shù)據(jù)監(jiān)聽Observer，對數(shù)據(jù)對象的所有屬性進(jìn)行監(jiān)聽，數(shù)據(jù)發(fā)生變化可以獲取到最新值通知訂閱者。
2、實現(xiàn)一個解析器Compile解析頁面節(jié)點(diǎn)指令，初始化視圖。
3、實現(xiàn)一個觀察者Watcher，訂閱數(shù)據(jù)變化同時綁定相關(guān)更新函數(shù)。并且將自己放入觀察者集合Dep中。Dep是Observer和Watcher的橋梁，數(shù)據(jù)改變通知到Dep，然后Dep通知相應(yīng)的Watcher去更新視圖。
2、實現(xiàn)
以下采用ES6的寫法，比較簡潔，所以大概在300多行代碼實現(xiàn)了一個簡單的MVVM框架。
1、實現(xiàn)html頁面按Vue的寫法在頁面定義好一些數(shù)據(jù)跟指令，引入了兩個JS文件。先實例化一個MVue的對象，傳入我們的el，data，methods這些參數(shù)。待會再看Mvue.js文件是什么？
html
{{person.name}} --- {{person.age}}
{{person.fav}}
{{person.a.b}}
- 1
- 2
- 3
{{msg}}
按鈕on
按鈕@
let vm = new MVue({
el: '#app',
data: {
person: {
name: '星哥',
age: 18,
fav: '姑娘',
a: {
b: '787878'
}
},
msg: '學(xué)習(xí)MVVM實現(xiàn)原理',
htmlStr: '
大家學(xué)的怎么樣
',},
methods: {
click111() {
console.log(this)
this.person.name = '學(xué)習(xí)MVVM'
// this.$data.person.name = '學(xué)習(xí)MVVM'
}
}
})
2、實現(xiàn)解析器和觀察者
MVue.js// 先創(chuàng)建一個MVue類,它是一個入口
Class MVue {
construction(options) {
this.$el = options.el
this.$data = options.data
this.$options = options
}
if(this.$el) {
// 1.實現(xiàn)一個數(shù)據(jù)的觀察者 --先看解析器，再看Obeserver
new Observer(this.$data)
// 2.實現(xiàn)一個指令解析器
new Compile(this.$el,this)
}
}
?
// 定義一個Compile類解析元素節(jié)點(diǎn)和指令
class Compile {
constructor(el,vm) {
// 判斷el是否是元素節(jié)點(diǎn)對象，不是就通過DOM獲取
this.el = this.isElementNode(el) ? el : document.querySelector(el)
this.vm = vm
// 1.獲取文檔碎片對象，放入內(nèi)存中可以減少頁面的回流和重繪
const fragment = this.node2Fragment(this.el)
// 2.編輯模板
this.compile(fragment)
// 3.追加子元素到根元素(還原頁面)
this.el.appendChild(fragment)
}
// 將元素插入到文檔碎片中
node2Fragment(el) {
const f = document.createDocumnetFragment();
let firstChild
while(firstChild = el.firstChild) {
// appendChild
// 將已經(jīng)存在的節(jié)點(diǎn)再次插入，那么原來位置的節(jié)點(diǎn)自動刪除，并在新的位置重新插入。
f.appendChild(firstChild)
}
// 此處執(zhí)行完，頁面已經(jīng)沒有元素節(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)類型。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-開頭的指令
// 解析指令(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)) { //判斷屬性是不是以@開頭的指令
// 解析指令
let [, eventName] = name.split('@')
compileUtil['on'](node,val,this.vm, eventName)
// 刪除有指令的標(biāo)簽上的屬性
node.removeAttribute('@' + eventName)
} else if(this.isBindName(name)) { //判斷屬性是不是以:開頭的指令
// 解析指令
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-')
}
// 判斷屬性是不是以@開頭的事件指令
isEventName(attrName) {
return attrName.startsWith('@')
}
// 判斷屬性是不是以:開頭的事件指令
isBindName(attrName) {
return attrName.startsWith(':')
}
}
?
?
// 定義一個對象，針對不同指令執(zhí)行不同操作
const compileUtil = {
// 解析參數(shù)(包含嵌套參數(shù)解析)，獲取其對應(yīng)的值
getVal(expre, vm) {
return expre.split('.').reduce((data, currentVal) => {
return data[currentVal]
}, vm.$data)
},
// 獲取當(dāng)前節(jié)點(diǎn)內(nèi)參數(shù)對應(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àn) 的效果是通過改變數(shù)據(jù)會觸發(fā)視圖，即數(shù)據(jù)=》視圖。
// 沒有new watcher 不影響視圖初始化(頁面參數(shù)的替換渲染)。
// 訂閱數(shù)據(jù)變化，綁定更新函數(shù)。
new watcher(vm, arges[1], () => {
// 確保 {{person.name}}----{{person.fav}} 不會因為一個參數(shù)變化都被成新值
this.updater.textUpdater(node, this.getgetContentVal(expre,vm))
})
return this.getVal(arges[1],vm)
})
} else {
// 同上，先不看
// 數(shù)據(jù)=》視圖
new watcher(vm, expre, (newVal) => {
// 找不到{}說明是test指令，所以當(dāng)前節(jié)點(diǎn)只有一個參數(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)
// 同上，先不看
// 綁定觀察者 數(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)
// 同上，先不看
// 綁定觀察者 數(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)聽函數(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對象，管理不同指令對應(yīng)的更新方法
updater: {
// v-text指令對應(yīng)更新方法
textUpdater(node, value) {
node.textContent = value
},
// v-html指令對應(yīng)更新方法
htmlUpdater(node, value) {
node.innerHTML = value
},
// v-model指令對應(yīng)更新方法
modelUpdater(node,value) {
node.value = value
},
// v-bind指令對應(yīng)更新方法
bindUpdate(node, attrName, value) {
node[attrName] = value
}
},
}
3、實現(xiàn)數(shù)據(jù)劫持監(jiān)聽
我們有了數(shù)據(jù)監(jiān)聽，還需要一個觀察者可以觸發(fā)更新視圖。因為需要數(shù)據(jù)改變才能觸發(fā)更新，所有還需要一個橋梁Dep收集所有觀察者(觀察者集合)，連接Observer和Watcher。數(shù)據(jù)改變通知Dep，Dep通知相應(yīng)的觀察者進(jìn)行視圖更新。
Observer.js// 定義一個觀察者
class watcher {
constructor(vm, expre, cb) {
this.vm = vm
this.expre = expre
this.cb =cb
// 把舊值保存起來
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)
}
}
}
// 定義一個觀察者集合
class Dep {
constructor() {
this.subs = []
}
// 收集觀察者
addSub(watcher) {
this.subs.push(watcher)
}
//通知觀察者去更新
notify() {
this.subs.forEach(w => w.update())
}
}
// 定義一個Observer類通過gettr，setter實現(xiàn)數(shù)據(jù)的監(jiān)聽綁定
class Observer {
constructor(data) {
this.observer(data)
}
// 定義函數(shù)解析data,實現(xiàn)數(shù)據(jù)劫持
observer (data) {
if(data && typeof data === 'object') {
// 是對象遍歷對象寫入getter，setter方法
Reflect.ownKeys(data).forEach(key => {
this.defineReactive(data, key, data[key]);
})
}
}
// 數(shù)據(jù)劫持方法
defineReactive(obj,key, value) {
// 遞歸遍歷
this.observer(data)
// 實例化一個dep對象
const dep = new Dep()
// 通過ES5的API實現(xiàn)數(shù)據(jù)劫持
Object.defineProperty(obj, key, {
enumerable: true,
configurable: false,
get() {
// 當(dāng)讀當(dāng)前值的時候，會觸發(fā)。
// 訂閱數(shù)據(jù)變化時，往Dep中添加觀察者
Dep.target && dep.addSub(Dep.target)
return value
},
set: (newValue) => {
// 對新數(shù)據(jù)進(jìn)行劫持監(jiān)聽
this.observer(newValue)
if(newValue !== value) {
value = newValue
}
// 告訴dep通知變化
dep.notify()
}
})
}
}
總結(jié)
以上是生活随笔為你收集整理的vue指令写在html中的原理,详解Vue中的MVVM原理和实现方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5赛车小游戏,html5公路赛车
- 下一篇： vue 禁止显示本网页由、、_【VUE/