vue.js響應式原理解析與實現—實現v-model與{{}}指令
上次咱們已經分析了vue.js是經過Object.defineProperty以及發佈訂閱模式來進行數據劫持和監聽,而且實現了一個簡單的demo。今天，咱們就基於上一節的代碼，來實現一個MVVM類，將其與html結合在一塊兒，而且實現v-model以及{{}}語法。html
tips:本節新增代碼（去除註釋）在一百行左右。使用的Observer和Watcher都是延用上一節的代碼，沒有修改。前端
接下來，讓咱們一步步來，實現一個MVVM類。vue
構造函數
首先，一個MVVM的構造函數以下(和vue.js的構造函數同樣)：node
class MVVM {
constructor({ data, el }) {
this.data = data;
this.el = el;
this.init();
this.initDom();
}
}
和vue.js同樣，有它的data屬性以及el元素。git
初始化操做
vue.js能夠經過this.xxx的方法來直接訪問this.data.xxx的屬性，這一點是怎麼作到的呢？其實答案很簡單，它是經過Object.defineProperty來作手腳，當你訪問this.xxx的時候，它返回的實際上是this.data.xxx。當你修改this.xxx值的時候，其實修改的是this.data.xxx的值。具體能夠看以下代碼：github
class MVVM {
constructor({ data, el }) {
this.data = data;
this.el = el;
this.init();
this.initDom();
}
// 初始化
init() {
// 對this.data進行數據劫持
new Observer(this.data);
// 傳入的el能夠是selector,也能夠是元素，所以咱們要在這裏作一層處理，保證this.$el的值是一個元素節點
this.$el = this.isElementNode(this.el) ? this.el : document.querySelector(this.el);
// 將this.data的屬性都綁定到this上，這樣用戶就能夠直接經過this.xxx來訪問this.data.xxx的值
for (let key in this.data) {
this.defineReactive(key);
}
}
defineReactive(key) {
Object.defineProperty(this, key, {
get() {
return this.data[key];
},
set(newVal) {
this.data[key] = newVal;
} //前端全棧學習交流圈：866109386
})//面向1-3年前端開發人員
}//幫助突破技術瓶頸，提高思惟能力。
// 是不是屬性節點
isElementNode(node) {
return node.nodeType === 1;
}
}
在完成初始化操做後，咱們須要對this.$el的節點進行編譯。目前咱們要實現的語法有v-model和{{}}語法,v-model這個屬性只可能會出如今元素節點的attributes裏，而{{}}語法則是出如今文本節點裏。正則表達式
fragment
在對節點進行編譯以前，咱們先考慮一個現實問題：若是咱們在編譯過程當中直接操做DOM節點的話，每一次修改DOM都會致使DOM的迴流或重繪，而這一部分性能損耗是很沒有必要的。所以，咱們能夠利用fragment,將節點轉化爲fragment,而後在fragment裏編譯完成後，再將其放回到頁面上。數組
class MVVM {
constructor({ data, el }) {
this.data = data;
this.el = el;//前端全棧交流學習圈：866109386
this.init();//針對1-3年前端開發人員
this.initDom();//幫助突破技術瓶頸，提高思惟能力。
}
initDom() {
const fragment = this.node2Fragment();
this.compile(fragment);
// 將fragment返回到頁面中
document.body.appendChild(fragment);
}
// 將節點轉爲fragment,經過fragment來操做DOM，能夠得到更高的效率
// 由於若是直接操做DOM節點的話，每次修改DOM都會致使DOM的迴流或重繪，而將其放在fragment裏，修改fragment不會致使DOM迴流和重繪
// 當在fragment一次性修改完後，在直接放回到DOM節點中
node2Fragment() {
const fragment = document.createDocumentFragment();
let firstChild;
while(firstChild = this.$el.firstChild) {
fragment.appendChild(firstChild);
}
return fragment;
}
}
實現v-model
在將node節點轉爲fragment後，咱們來對其中的v-model語法進行編譯。app
因爲v-model語句只可能會出如今元素節點的attributes裏，所以，咱們先判斷該節點是否爲元素節點，若爲元素節點，則判斷其是不是directive(目前只有v-model)，若都知足的話，則調用CompileUtils.compileModelAttr來編譯該節點。函數
編譯含有v-model的節點主要有兩步：
- 爲元素節點註冊input事件，在input事件觸發的時候，更新vm(this.data)上對應的屬性值。
- 對v-model依賴的屬性註冊一個Watcher函數，當依賴的屬性發生變化，則更新元素節點的value。
class MVVM {
constructor({ data, el }) {
this.data = data;
this.el = el;
this.init();
this.initDom();
}
initDom() {
const fragment = this.node2Fragment();
this.compile(fragment);
// 將fragment返回到頁面中
document.body.appendChild(fragment);
}
compile(node) {
if (this.isElementNode(node)) {
// 如果元素節點，則遍歷它的屬性，編譯其中的指令
const attrs = node.attributes;
Array.prototype.forEach.call(attrs, (attr) => {
if (this.isDirective(attr)) {
CompileUtils.compileModelAttr(this.data, node, attr)
}
})
}
// 若節點有子節點的話，則對子節點進行編譯
if (node.childNodes && node.childNodes.length > 0) {
Array.prototype.forEach.call(node.childNodes, (child) => {
this.compile(child);
})
}
}
// 是不是屬性節點
isElementNode(node) {
return node.nodeType === 1;
}
// 檢測屬性是不是指令(vue的指令是v-開頭)
isDirective(attr) {
return attr.nodeName.indexOf('v-') >= 0;
}
}
const CompileUtils = {
// 編譯v-model屬性,爲元素節點註冊input事件，在input事件觸發的時候，更新vm對應的值。
// 同時也註冊一個Watcher函數，當所依賴的值發生變化的時候，更新節點的值
compileModelAttr(vm, node, attr) {
const { value: keys, nodeName } = attr;
node.value = this.getModelValue(vm, keys);
// 將v-model屬性值從元素節點上去掉
node.removeAttribute(nodeName);
node.addEventListener('input', (e) => {
this.setModelValue(vm, keys, e.target.value);
});
new Watcher(vm, keys, (oldVal, newVal) => {
node.value = newVal;
});
},
/* 解析keys，好比，用戶能夠傳入
* <input v-model="obj.name" />
* 這個時候，咱們在取值的時候，須要將"obj.name"解析爲data[obj][name]的形式來獲取目標值
*/
parse(vm, keys) {
keys = keys.split('.');
let value = vm;
keys.forEach(_key => {
value = value[_key];
});
return value;
},
// 根據vm和keys，返回v-model對應屬性的值
getModelValue(vm, keys) {
return this.parse(vm, keys);
},
// 修改v-model對應屬性的值
setModelValue(vm, keys, val) {
keys = keys.split('.');
let value = vm;
for(let i = 0; i < keys.length - 1; i++) {
value = value[keys[i]];
}
value[keys[keys.length - 1]] = val;
},
}
實現{{}}語法
{{}}語法只可能會出如今文本節點中，所以，咱們只須要對文本節點作處理。若是文本節點中出現{{key}}這種語句的話，咱們則對該節點進行編譯。在這裏，咱們能夠經過下面這個正則表達式來對文本節點進行處理，判斷其是否含有{{}}語法。
const textReg = /\{\{\s*\w+\s*\}\}/gi; // 檢測{{name}}語法
console.log(textReg.test('sss'));
console.log(textReg.test('aaa{{ name }}'));
console.log(textReg.test('aaa{{ name }} {{ text }}'));
若含有{{}}語法，咱們則能夠對其處理，因爲一個文本節點可能出現多個{{}}語法，所以編譯含有{{}}語法的文本節點主要有如下兩步：
- 找出該文本節點中全部依賴的屬性，而且保留原始文本信息，根據原始文本信息還有屬性值，生成最終的文本信息。好比說，原始文本信息是"test {{test}} {{name}}",那麼該文本信息依賴的屬性有this.data.test和this.data.name,那麼咱們能夠根據本來信息和屬性值，生成最終的文本。
- 爲該文本節點全部依賴的屬性註冊Watcher函數，當依賴的屬性發生變化的時候，則更新文本節點的內容。
class MVVM {
constructor({ data, el }) {
this.data = data;
this.el = el;
this.init();
this.initDom();
}
initDom() {
const fragment = this.node2Fragment();
this.compile(fragment);
// 將fragment返回到頁面中
document.body.appendChild(fragment);
}
compile(node) {
const textReg = /\{\{\s*\w+\s*\}\}/gi; // 檢測{{name}}語法
if (this.isTextNode(node)) {
// 如果文本節點，則判斷是否有{{}}語法，若是有的話，則編譯{{}}語法
let textContent = node.textContent;
if (textReg.test(textContent)) {
// 對於 "test{{test}} {{name}}"這種文本，可能在一個文本節點會出現多個匹配符，所以得對他們統一進行處理
// 使用 textReg來對文本節點進行匹配，能夠獲得["{{test}}", "{{name}}"]兩個匹配值
const matchs = textContent.match(textReg);
CompileUtils.compileTextNode(this.data, node, matchs);
}
}
// 若節點有子節點的話，則對子節點進行編譯
if (node.childNodes && node.childNodes.length > 0) {
Array.prototype.forEach.call(node.childNodes, (child) => {
this.compile(child);
})
}
}
// 是不是文本節點
isTextNode(node) {
return node.nodeType === 3;
}
}
const CompileUtils = {
reg: /\{\{\s*(\w+)\s*\}\}/, // 匹配 {{ key }}中的key
// 編譯文本節點，並註冊Watcher函數，當文本節點依賴的屬性發生變化的時候，更新文本節點
compileTextNode(vm, node, matchs) {
// 原始文本信息
const rawTextContent = node.textContent;
matchs.forEach((match) => {
const keys = match.match(this.reg)[1];
console.log(rawTextContent);
new Watcher(vm, keys, () => this.updateTextNode(vm, node, matchs, rawTextContent));
});
this.updateTextNode(vm, node, matchs, rawTextContent);
},
// 更新文本節點信息
updateTextNode(vm, node, matchs, rawTextContent) {
let newTextContent = rawTextContent;
matchs.forEach((match) => {
const keys = match.match(this.reg)[1];
const val = this.getModelValue(vm, keys);
newTextContent = newTextContent.replace(match, val);
})
node.textContent = newTextContent;
}
}
結語
這樣，一個具備v-model和{{}}功能的MVVM類就已經完成了
這裏也有一個簡單的樣例(忽略樣式)。
接下來的話，可能會繼續實現computed屬性,v-bind方法，以及支持在{{}}裏面放表達式。若是以爲這個文章對你有幫助的話，麻煩點個贊，嘻嘻。
最後，貼上全部的代碼:
class Observer {
constructor(data) {
// 若是不是對象，則返回
if (!data || typeof data !== 'object') {
return;
}
this.data = data;
this.walk();
}
// 對傳入的數據進行數據劫持
walk() {
for (let key in this.data) {
this.defineReactive(this.data, key, this.data[key]);
}
}
// 建立當前屬性的一個發佈實例，使用Object.defineProperty來對當前屬性進行數據劫持。
defineReactive(obj, key, val) {
// 建立當前屬性的發佈者
const dep = new Dep();
/*
* 遞歸對子屬性的值進行數據劫持，好比說對如下數據
* let data = {
* name: 'cjg',
* obj: {
* name: 'zht',
* age: 22,
* obj: {
* name: 'cjg',
* age: 22,
* }
* },
* };
* 咱們先對data最外層的name和obj進行數據劫持，以後再對obj對象的子屬性obj.name,obj.age, obj.obj進行數據劫持，層層遞歸下去，直到全部的數據都完成了數據劫持工做。
*/
new Observer(val);
Object.defineProperty(obj, key, {
get() {
// 若當前有對該屬性的依賴項，則將其加入到發佈者的訂閱者隊列裏
if (Dep.target) {
dep.addSub(Dep.target);
}
return val;
},
set(newVal) {
if (val === newVal) {
return;
}
val = newVal;
new Observer(newVal);
dep.notify();
}
})
}
}
// 發佈者,將依賴該屬性的watcher都加入subs數組，當該屬性改變的時候，則調用全部依賴該屬性的watcher的更新函數，觸發更新。
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
if (this.subs.indexOf(sub) < 0) {
this.subs.push(sub);
}
}
notify() {
this.subs.forEach((sub) => {
sub.update();
})
}
}
Dep.target = null;
// 觀察者
class Watcher {
/**
*Creates an instance of Watcher.
* @param {*} vm
* @param {*} keys
* @param {*} updateCb
* @memberof Watcher
*/
constructor(vm, keys, updateCb) {
this.vm = vm;
this.keys = keys;
this.updateCb = updateCb;
this.value = null;
this.get();
}
// 根據vm和keys獲取到最新的觀察值
get() {
// 將Dep的依賴項設置爲當前的watcher,而且根據傳入的keys遍歷獲取到最新值。
// 在這個過程當中，因爲會調用observer對象屬性的getter方法，所以在遍歷過程當中這些對象屬性的發佈者就將watcher添加到訂閱者隊列裏。
// 所以，當這一過程當中的某一對象屬性發生變化的時候，則會觸發watcher的update方法
Dep.target = this;
this.value = CompileUtils.parse(this.vm, this.keys);
Dep.target = null;
return this.value;
}
update() {
const oldValue = this.value;
const newValue = this.get();
if (oldValue !== newValue) {
this.updateCb(oldValue, newValue);
}
}
}
class MVVM {
constructor({ data, el }) {
this.data = data;
this.el = el;
this.init();
this.initDom();
}
// 初始化
init() {
// 對this.data進行數據劫持
new Observer(this.data);
// 傳入的el能夠是selector,也能夠是元素，所以咱們要在這裏作一層處理，保證this.$el的值是一個元素節點
this.$el = this.isElementNode(this.el) ? this.el : document.querySelector(this.el);
// 將this.data的屬性都綁定到this上，這樣用戶就能夠直接經過this.xxx來訪問this.data.xxx的值
for (let key in this.data) {
this.defineReactive(key);
}
}
initDom() {
const fragment = this.node2Fragment();
this.compile(fragment);
document.body.appendChild(fragment);
}
// 將節點轉爲fragment,經過fragment來操做DOM，能夠得到更高的效率
// 由於若是直接操做DOM節點的話，每次修改DOM都會致使DOM的迴流或重繪，而將其放在fragment裏，修改fragment不會致使DOM迴流和重繪
// 當在fragment一次性修改完後，在直接放回到DOM節點中
node2Fragment() {
const fragment = document.createDocumentFragment();
let firstChild;
while(firstChild = this.$el.firstChild) {
fragment.appendChild(firstChild);
}
return fragment;
}
defineReactive(key) {
Object.defineProperty(this, key, {
get() {
return this.data[key];
},
set(newVal) {
this.data[key] = newVal;
}
})
}
compile(node) {
const textReg = /\{\{\s*\w+\s*\}\}/gi; // 檢測{{name}}語法
if (this.isElementNode(node)) {
// 如果元素節點，則遍歷它的屬性，編譯其中的指令
const attrs = node.attributes;
Array.prototype.forEach.call(attrs, (attr) => {
if (this.isDirective(attr)) {
CompileUtils.compileModelAttr(this.data, node, attr)
}
})
} else if (this.isTextNode(node)) {
// 如果文本節點，則判斷是否有{{}}語法，若是有的話，則編譯{{}}語法
let textContent = node.textContent;
if (textReg.test(textContent)) {
// 對於 "test{{test}} {{name}}"這種文本，可能在一個文本節點會出現多個匹配符，所以得對他們統一進行處理
// 使用 textReg來對文本節點進行匹配，能夠獲得["{{test}}", "{{name}}"]兩個匹配值
const matchs = textContent.match(textReg);
CompileUtils.compileTextNode(this.data, node, matchs);
}
}
// 若節點有子節點的話，則對子節點進行編譯。
if (node.childNodes && node.childNodes.length > 0) {
Array.prototype.forEach.call(node.childNodes, (child) => {
this.compile(child);
})
}
}
// 是不是屬性節點
isElementNode(node) {
return node.nodeType === 1;
}
// 是不是文本節點
isTextNode(node) {
return node.nodeType === 3;
}
isAttrs(node) {
return node.nodeType === 2;
}
// 檢測屬性是不是指令(vue的指令是v-開頭)
isDirective(attr) {
return attr.nodeName.indexOf('v-') >= 0;
}
}
const CompileUtils = {
reg: /\{\{\s*(\w+)\s*\}\}/, // 匹配 {{ key }}中的key
// 編譯文本節點，並註冊Watcher函數，當文本節點依賴的屬性發生變化的時候，更新文本節點
compileTextNode(vm, node, matchs) {
// 原始文本信息
const rawTextContent = node.textContent;
matchs.forEach((match) => {
const keys = match.match(this.reg)[1];
console.log(rawTextContent);
new Watcher(vm, keys, () => this.updateTextNode(vm, node, matchs, rawTextContent));
});
this.updateTextNode(vm, node, matchs, rawTextContent);
},
// 更新文本節點信息
updateTextNode(vm, node, matchs, rawTextContent) {
let newTextContent = rawTextContent;
matchs.forEach((match) => {
const keys = match.match(this.reg)[1];
const val = this.getModelValue(vm, keys);
newTextContent = newTextContent.replace(match, val);
})
node.textContent = newTextContent;
},
// 編譯v-model屬性,爲元素節點註冊input事件，在input事件觸發的時候，更新vm對應的值。
// 同時也註冊一個Watcher函數，當所依賴的值發生變化的時候，更新節點的值
compileModelAttr(vm, node, attr) {
const { value: keys, nodeName } = attr;
node.value = this.getModelValue(vm, keys);
// 將v-model屬性值從元素節點上去掉
node.removeAttribute(nodeName);
new Watcher(vm, keys, (oldVal, newVal) => {
node.value = newVal;
});
node.addEventListener('input', (e) => {
this.setModelValue(vm, keys, e.target.value);
});
},
/* 解析keys，好比，用戶能夠傳入
* let data = {
* name: 'cjg',
* obj: {
* name: 'zht',
* },
* };
* new Watcher(data, 'obj.name', (oldValue, newValue) => {
* console.log(oldValue, newValue);
* })
* 這個時候，咱們須要將keys解析爲data[obj][name]的形式來獲取目標值
*/
parse(vm, keys) {
keys = keys.split('.');
let value = vm;
keys.forEach(_key => {
value = value[_key];
});
return value;
},
// 根據vm和keys，返回v-model對應屬性的值
getModelValue(vm, keys) {
return this.parse(vm, keys);
},
// 修改v-model對應屬性的值
setModelValue(vm, keys, val) {
keys = keys.split('.');
let value = vm;
for(let i = 0; i < keys.length - 1; i++) {
value = value[keys[i]];
}
value[keys[keys.length - 1]] = val;
},
}
相關文章
- 1. vue.js響應式原理解析與實現—實現v-model與{{}}指令
- 2. 深度解析vue.js響應式原理解析與實現
- 3. vue.js響應式原理解析與實現
- 4. 深刻解析vue.js響應式原理與實現
- 5. Vue2響應式原理與實現
- 6. Vue 3 響應式原理及實現
- 7. Vue響應式原理簡單實現
- 8. Vue3響應式原理與reactive、effect、computed實現
- 9. RNN原理解析與實現(Keras)
- 10. GoogleNet原理解析與tensorflow實現
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • Hibernate實現增刪改查 - Hibernate教程
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
