vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)
引言
接上文 parseHTML 函數(shù)源碼解析 start鉤子函數(shù)
接下來我們主要講解當(dāng)解析器遇到一個(gè)文本節(jié)點(diǎn)時(shí)會(huì)如何為文本節(jié)點(diǎn)創(chuàng)建元素描述對象，又會(huì)如何對文本節(jié)點(diǎn)做哪些特殊的處理。
parseHTML(template, {
chars: function(){
//...
},
//...
})
chars源碼：
chars: function chars(text) {
if (!currentParent) {
{
if (text === template) {
warnOnce(
'Component template requires a root element, rather than just text.'
);
} else if ((text = text.trim())) {
warnOnce(
("text \"" + text + "\" outside root element will be ignored.")
);
}
}
return
}
// IE textarea placeholder bug
/* istanbul ignore if */
if (isIE &&
currentParent.tag === 'textarea' &&
currentParent.attrsMap.placeholder === text
) {
return
}
var children = currentParent.children;
text = inPre || text.trim() ?
isTextTag(currentParent) ? text : decodeHTMLCached(text)
// only preserve whitespace if its not right after a starting tag
:
preserveWhitespace && children.length ? ' ' : '';
if (text) {
var res;
if (!inVPre && text !== ' ' && (res = parseText(text, delimiters))) {
children.push({
type: 2,
expression: res.expression,
tokens: res.tokens,
text: text
});
} else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {
children.push({
type: 3,
text: text
});
}
}
}當(dāng)解析器遇到文本節(jié)點(diǎn)時(shí)，如上代碼中的 chars 鉤子函數(shù)就會(huì)被調(diào)用，并且接收該文本節(jié)點(diǎn)的文本內(nèi)容作為參數(shù)。
我們來看chars鉤子函數(shù)最開始的這段代碼：
if (!currentParent) {
{
if (text === template) {
warnOnce(
'Component template requires a root element, rather than just text.'
);
} else if ((text = text.trim())) {
warnOnce(
("text \"" + text + "\" outside root element will be ignored.")
);
}
}
return
}
首先判斷了 currentParent 變量是否存在，我們知道 currentParent 變量指向的是當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn):。
如果 currentParent 變量不存在說明什么問題？
- 1：沒有根元素，只有文本。
- 2: 文本在根元素之外。
當(dāng)遇到第一種情況打印警告信息:"模板必須要有根元素"，第二種情況打印警告信息:" 根元素外的文本將會(huì)被忽略"。
接下來：
if (isIE &&
currentParent.tag === 'textarea' &&
currentParent.attrsMap.placeholder === text
) {
return
}
這段代碼是用來解決 IE 瀏覽器中渲染 <textarea> 標(biāo)簽的 placeholder 屬性時(shí)存在的 bug 的。具體的問題大家可以在這個(gè) issue 查看。
接下來是個(gè)嵌套三元表達(dá)式：
var children = currentParent.children; text = inPre || text.trim() ? isTextTag(currentParent) ? text : decodeHTMLCached(text) // only preserve whitespace if its not right after a starting tag : preserveWhitespace && children.length ? ' ' : '';
這個(gè)嵌套三元表達(dá)式判斷了條件 inPre || text.trim() 的真假，如果為 true，檢測了當(dāng)前文本節(jié)點(diǎn)的父節(jié)點(diǎn)是否是文本標(biāo)簽，如果是文本標(biāo)簽則直接使用原始文本，否則使用decodeHTMLCached 函數(shù)對文本進(jìn)行解碼。
inPre || text.trim() 如果為 false，檢測 preserveWhitespace 是否為 true 。preserveWhitespace 是一個(gè)布爾值代表著是否保留空格，只有它為真的情況下才會(huì)保留空格。但即使 preserveWhitespace 常量的值為真，如果當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)沒有子元素則也不會(huì)保留空格，換句話說，編譯器只會(huì)保留那些 不存在于開始標(biāo)簽之后的空格。
接下來：
if (text) {
var res;
if (!inVPre && text !== ' ' && (res = parseText(text, delimiters))) {
children.push({
type: 2,
expression: res.expression,
tokens: res.tokens,
text: text
});
} else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {
children.push({
type: 3,
text: text
});
}
}
這里相當(dāng)就比較簡單了一個(gè) if else if 操作，第一個(gè) if 判斷當(dāng)前元素未使用v-pre 指令，text不為空，使用 parseText 函數(shù)成功解析當(dāng)前文本節(jié)點(diǎn)的內(nèi)容。
對于前兩個(gè)條件很好理解，關(guān)鍵在于 parseText 函數(shù)能夠成功解析文本節(jié)點(diǎn)的內(nèi)容說明了什么，如下示例代碼：
<div> hello: {{ message }} </div>如上模板中存在的文本節(jié)點(diǎn)包含了 Vue 語法中的字面量表達(dá)式，而 parseText 函數(shù)的作用就是用來解析這段包含了字面量表達(dá)式的文本的。此時(shí)會(huì)執(zhí)行以下代碼創(chuàng)建一個(gè)類型為2(type = 2) 的元素描述對象：
children.push({
type: 2,
expression: res.expression,
tokens: res.tokens,
text: text
});
注意：類型為 2 的元素描述對象擁有三個(gè)特殊的屬性，分別是 expression 、tokens 以及text ，其中 text 就是原始的文本內(nèi)容，而 expression 和 tokens 的值是通過 parseText 函數(shù)解析的結(jié)果中讀取的。
后面我們專門會(huì)講講parseText函數(shù)，接下來繼續(xù)看下如果上列的 if 判斷失敗出現(xiàn)的三種可能性。
- 當(dāng)前解析的元素使用v-pre 指令
- text 為空
- parseText 解析失敗
只要以上三種情況中，有一種情況出現(xiàn)則代碼會(huì)來到else...if 分支的判斷，如下：
else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {
children.push({
type: 3,
text: text
});
}
如果滿足 else if 中的條件直接，創(chuàng)建一個(gè)類型為3(type = 3) 的元素描述對象：類型為3 的元素描述對象只擁有一個(gè)的屬性text存儲(chǔ)原始的文本內(nèi)容。
在看下要滿足 else if 中的這些條件吧！
- 文本內(nèi)容不是空格
- 文本內(nèi)容是空格，但是該文本節(jié)點(diǎn)的父節(jié)點(diǎn)還沒有子節(jié)點(diǎn)(即 !children.length )
- 文本內(nèi)容是空格，并且該文本節(jié)點(diǎn)的父節(jié)點(diǎn)有子節(jié)點(diǎn)，但最后一個(gè)子節(jié)點(diǎn)不是空格
接下來我們來聊聊之前講到的parseText 函數(shù)。
parseText
function parseText(
text,
delimiters
) {
var tagRE = delimiters ? buildRegex(delimiters) : defaultTagRE;
if (!tagRE.test(text)) {
return
}
var tokens = [];
var rawTokens = [];
var lastIndex = tagRE.lastIndex = 0;
var match, index, tokenValue;
while ((match = tagRE.exec(text))) {
index = match.index;
// push text token
if (index > lastIndex) {
rawTokens.push(tokenValue = text.slice(lastIndex, index));
tokens.push(JSON.stringify(tokenValue));
}
// tag token
var exp = parseFilters(match[1].trim());
tokens.push(("_s(" + exp + ")"));
rawTokens.push({
'@binding': exp
});
lastIndex = index + match[0].length;
}
if (lastIndex < text.length) {
rawTokens.push(tokenValue = text.slice(lastIndex));
tokens.push(JSON.stringify(tokenValue));
}
return {
expression: tokens.join('+'),
tokens: rawTokens
}
}
parseText 接收兩個(gè)參數(shù) text 要解析的文本，delimiters 是編譯器的一個(gè)用戶自定義選項(xiàng)delimiters ，通過它可以改變文本插入分隔符。所以才有了如下代碼。
var tagRE = delimiters ? buildRegex(delimiters) : defaultTagRE;
這里是解析文本所用正則之間的一個(gè)較量，delimiters 有值就調(diào)用buildRegex函數(shù)，我們默認(rèn)是沒有值，使用 defaultTagRE 來解析文本。
var defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g;
這個(gè)正則還是非常簡單，接下來會(huì)判斷，如果文本中沒有與正則相匹配的文本直接直接終止函數(shù)的執(zhí)行。
if (!tagRE.test(text)) {
return
}
接下來代碼就有意思了一起看下。
var tokens = [];
var rawTokens = [];
var lastIndex = tagRE.lastIndex = 0;
var match, index, tokenValue;
while ((match = tagRE.exec(text))) {
index = match.index;
// push text token
if (index > lastIndex) {
rawTokens.push(tokenValue = text.slice(lastIndex, index));
tokens.push(JSON.stringify(tokenValue));
}
// tag token
var exp = parseFilters(match[1].trim());
tokens.push(("_s(" + exp + ")"));
rawTokens.push({
'@binding': exp
});
lastIndex = index + match[0].length;
}
if (lastIndex < text.length) {
rawTokens.push(tokenValue = text.slice(lastIndex));
tokens.push(JSON.stringify(tokenValue));
}
return {
expression: tokens.join('+'),
tokens: rawTokens
}
這段代碼不難，初始定義了一系列變量。 接著開啟一個(gè)while循環(huán)，使用 tagRE 正則匹配文本內(nèi)容，并將匹配結(jié)果保存在 match 變量中，直到匹配失敗循環(huán)才會(huì)終止，這時(shí)意味著所有的字面量表達(dá)式都已經(jīng)處理完畢了。
在這個(gè)while循環(huán)結(jié)束返回一個(gè)對象，expression、tokens分別存儲(chǔ)解析過程中的信息。
假設(shè)文本如下:
<div id="app">hello {{ message }}</div>parseText 解析文本后返回的對象。
{
expression: "'hello'+_s(message)",
tokens: [
'hello',
{
'@binding': 'message'
}
]
}
接下來我們聊聊對結(jié)束標(biāo)簽的處理。
end 源碼
end: function end() {
// remove trailing whitespace
var element = stack[stack.length - 1];
var lastNode = element.children[element.children.length - 1];
if (lastNode && lastNode.type === 3 && lastNode.text === ' ' && !inPre) {
element.children.pop();
}
// pop stack
stack.length -= 1;
currentParent = stack[stack.length - 1];
closeElement(element);
}
end 鉤子函數(shù)，當(dāng)解析 html 字符串遇到結(jié)束標(biāo)簽的時(shí)候，。那么在 end 鉤子函數(shù)中都需要做哪些事情呢？
在之前的文章中我們講過解析器遇到非一元標(biāo)簽的開始標(biāo)簽時(shí)，會(huì)將該標(biāo)簽的元素描述對象設(shè)置給 currentParent 變量，代表后續(xù)解析過程中遇到的所有標(biāo)簽都應(yīng)該是 currentParent 變量所代表的標(biāo)簽的子節(jié)點(diǎn)，同時(shí)還會(huì)將該標(biāo)簽的元素描述對象添加到 stack 棧中。
而當(dāng)遇到結(jié)束標(biāo)簽的時(shí)候則意味著 currentParent 變量所代表的標(biāo)簽以及其子節(jié)點(diǎn)全部解析完畢了，此時(shí)我們應(yīng)該把 currentParent 變量的引用修改為當(dāng)前標(biāo)簽的父標(biāo)簽，這樣我們就將作用域還原給了上層節(jié)點(diǎn)，以保證解析過程中正確的父子關(guān)系。
下面代碼就是來完成這個(gè)工作:
stack.length -= 1; currentParent = stack[stack.length - 1]; closeElement(element);
首先將當(dāng)前節(jié)點(diǎn)出棧：stack.length -= 1 什么意思呢？
看一個(gè)代碼就懂了。
var arr = [1,2,3,4]; arr.length-=1; >arr [1,2,3]
接著讀取出棧后 stack 棧中的最后一個(gè)元素作為 currentParent 變量的值。 那closeElement 函數(shù)是做什么用的呢？
closeElement 源碼
function closeElement(element) {
// check pre state
if (element.pre) {
inVPre = false;
}
if (platformIsPreTag(element.tag)) {
inPre = false;
}
// apply post-transforms
for (var i = 0; i < postTransforms.length; i++) {
postTransforms[i](element, options);
}
}
closeElement 的作用有兩個(gè)：第一個(gè)是對數(shù)據(jù)狀態(tài)的還原，第二個(gè)是調(diào)用后置處理轉(zhuǎn)換鉤子函數(shù)。
接下來看下end函數(shù)中剩余代碼：
// remove trailing whitespace
var element = stack[stack.length - 1];
var lastNode = element.children[element.children.length - 1];
if (lastNode && lastNode.type === 3 && lastNode.text === ' ' && !inPre) {
element.children.pop();
}
這個(gè)代碼的作用是去除當(dāng)前元素最后一個(gè)空白子節(jié)點(diǎn)，我們在講解 chars 鉤子函數(shù)時(shí)了解到：preserveWhitespace 只會(huì)保留那些不在開始標(biāo)簽之后的空格，所以當(dāng)空白作為標(biāo)簽的最后一個(gè)子節(jié)點(diǎn)存在時(shí)，也會(huì)被保留，如下代碼所示：
<div><span>test</span> <!-- 空白占位 --> </div>
如上代碼中 <span> 標(biāo)簽的結(jié)束標(biāo)簽與 <div> 標(biāo)簽的結(jié)束標(biāo)簽之間存在一段空白，這段空白將會(huì)被保留。如果這段空白被保留那么就可能對布局產(chǎn)生影響，尤其是對行內(nèi)元素的影響。
為了消除這些影響帶來的問題，好的做法是將它們?nèi)サ?，而如代碼就是用來完成這個(gè)工作的。
comment 注釋節(jié)點(diǎn)描述對象
解析器是否會(huì)解析并保留注釋節(jié)點(diǎn)，是由 shouldKeepComment 編譯器選項(xiàng)決定的，開發(fā)者可以在創(chuàng)建Vue 實(shí)例的時(shí)候通過設(shè)置 comments 選項(xiàng)的值來控制編譯器的shouldKeepComment 選項(xiàng)。默認(rèn)情況下 comments 選項(xiàng)的值為 false ，即不保留注釋，假如將其設(shè)置為 true ，則當(dāng)解析器遇到注釋節(jié)點(diǎn)時(shí)會(huì)保留該注釋節(jié)點(diǎn)，此時(shí) parseHTML 函數(shù)的 comment 鉤子函數(shù)會(huì)被調(diào)用，如下：
comment: function comment(text) {
currentParent.children.push({
type: 3,
text: text,
isComment: true
});
}
要注意的是，普通文本節(jié)點(diǎn)與注釋節(jié)點(diǎn)的元素描述對象的類型是一樣的都是 3 ，不同的是注釋節(jié)點(diǎn)的元素描述對象擁有 isComment 屬性，并且該屬性的值為 true，目的就是用來與普通文本節(jié)點(diǎn)作區(qū)分的。
以上就是vue parseHTML源碼解析hars end comment鉤子函數(shù)的詳細(xì)內(nèi)容，更多關(guān)于vue parseHTML鉤子函數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
解決vue動(dòng)態(tài)下拉菜單 有數(shù)據(jù)未反應(yīng)的問題
這篇文章主要介紹了解決vue動(dòng)態(tài)下拉菜單 有數(shù)據(jù)未反應(yīng)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了詳解element-ui中表單驗(yàn)證的三種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Element Cascader 級(jí)聯(lián)選擇器的使用示例
這篇文章主要介紹了Element Cascader 級(jí)聯(lián)選擇器的使用示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue iview組件表格 render函數(shù)的使用方法詳解
下面小編就為大家分享一篇vue iview組件表格 render函數(shù)的使用方法詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue mixins組件復(fù)用的幾種方式（小結(jié)）
這篇文章主要介紹了vue mixins組件復(fù)用的幾種方式（小結(jié)）,vue中提供了一種混合機(jī)制mixins，用來更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用,有興趣的可以了解一下2017-09-09
這篇文章主要介紹了vue組寫一個(gè)組件,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了Vue2.0用戶權(quán)限控制解決方法以及源碼說明，一起學(xué)習(xí)下。2017-11-11
利用Vue3 (一）創(chuàng)建Vue CLI 項(xiàng)目
這篇文章主要介紹利用Vue3 創(chuàng)建Vue CLI 項(xiàng)目，下面文章內(nèi)容附有官方文檔鏈接，安裝過程，需要的可以參考一下2021-10-10
Vue使用ElementUI動(dòng)態(tài)修改table單元格背景顏色或文本顏色
本文主要介紹了Vue使用ElementUI動(dòng)態(tài)修改table單元格背景顏色或文本顏色，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了解決如何el-date-picker 寬度溢出瀏覽器問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07