vueparseHTML函數拿到返回值后的處理源碼解析

3403771864 發布于2022-09-18 16:26 / 421人閱讀

　　承繼上篇內容：下面是parseHTML 函數源碼解析

　　var startTagMatch = parseStartTag();
　　if (startTagMatch) {
　　handleStartTag(startTagMatch);
　　if (shouldIgnoreFirstNewline(startTagMatch.tagName, html)) {
　　advance(1);
　　}
　　continue
　　}

　　在之前這篇文章中寫明startTagMatch 就用來獲取parseStartTag函數的返回值。并只有在成功匹配到開始標簽的情況下parseStartTag 才會返回解析結果(一個對象)，否則返回undefined。

　　假設有如下html（template）字符串：

　　<div id="box" v-if="watings"></div>

　　parseStartTag函數返回值

　　則parseStartTag函數的返回值如下：

　　match = {
　　tagName: 'div',
　　attrs: [
　　[
　　'id="box"',
　　'id',
　　'=',
　　'box',
　　undefined,
　　undefined
　　],
　　[
　　' v-if="watings"',
　　'v-if',
　　'=',
　　'watings',
　　undefined,
　　undefined
　　]
　　],
　　start: index,
　　unarySlash: undefined,
　　end: index
　　}

　　handleStartTag源碼

　　如果匹配成功，if語句代碼被執行，得出的結果作為參數傳遞給 handleStartTag 函數，handleStartTag源碼如下：

　　function handleStartTag(match) {
　　var tagName = match.tagName;
　　var unarySlash = match.unarySlash;
　　if (expectHTML) {
　　if (lastTag === 'p' &amp;&amp; isNonPhrasingTag(tagName)) {
　　parseEndTag(lastTag);
　　}
　　if (canBeLeftOpenTag$$1(tagName) &amp;&amp; lastTag === tagName) {
　　parseEndTag(tagName);
　　}
　　}
　　var unary = isUnaryTag$$1(tagName) || !!unarySlash;
　　var l = match.attrs.length;
　　var attrs = new Array(l);
　　for (var i = 0; i &lt; l; i++) {
　　var args = match.attrs[i];
　　var value = args[3] || args[4] || args[5] || '';
　　var shouldDecodeNewlines = tagName === 'a' &amp;&amp; args[1] === 'href' ?
　　options.shouldDecodeNewlinesForHref :
　　options.shouldDecodeNewlines;
　　attrs[i] = {
　　name: args[1],
　　value: decodeAttr(value, shouldDecodeNewlines)
　　};
　　}
　　if (!unary) {
　　stack.push({
　　tag: tagName,
　　lowerCasedTag: tagName.toLowerCase(),
　　attrs: attrs
　　});
　　lastTag = tagName;
　　}
　　if (options.start) {
　　options.start(tagName, attrs, unary, match.start, match.end);
　　}
　　}

　　tagName 及unarySlash

　　handleStartTag函數的作用就是處理標簽的解析結果，所以它接收parseStartTag函數的返回值作為參數。handleStartTag函數的一開始定義兩個常量：tagName 以及 unarySlash：

　　var tagName = match.tagName;
　　var unarySlash = match.unarySlash;

　　通過對于上章節內容解析，tagName 存儲解析開始標簽的標簽名，unarySlash 是判斷開始標簽是否為一元標簽。

　　接著是一個if語句塊，if語句的判斷條件是if (expectHTML)，前面說過expectHTML 是parser選項，是一個布爾值，如果為真則該 if 語句塊的代碼將被執行。但是現在我們暫時不看這段代碼，因為這段代碼包含 parseEndTag 函數的調用，所以待我們講解完 parseEndTag 函數之后，再回頭來說這段代碼。

　　在往下定義了三個變量：

　　var unary = isUnaryTag$$1(tagName) || !!unarySlash;
　　var l = match.attrs.length;
　　var attrs = new Array(l);

　　變量 unary 是一個布爾值，當它為真時代表著標簽是一元標簽，否則是二元標簽。

　　他們通過isUnaryTag來判斷，其原理通過傳遞的標簽名判斷是否有跟預設標準HTML中規定的那些一元標簽一致。

　　l 和 attrs ，其中常量 l 的值存儲著 match.attrs 數組的長度，而 attrs 常量則是一個與match.attrs數組長度相等的數組。

　　這兩個常量將被用于接下來的for循環中：

　　for (var i = 0; i < l; i++) {
　　var args = match.attrs[i];
　　var value = args[3] || args[4] || args[5] || '';
　　var shouldDecodeNewlines = tagName === 'a' && args[1] === 'href' ?
　　options.shouldDecodeNewlinesForHref :
　　options.shouldDecodeNewlines;
　　attrs[i] = {
　　name: args[1],
　　value: decodeAttr(value, shouldDecodeNewlines)
　　};
　　}

　　具體看一下循環體的代碼，首先定義 args 常量，它的值就是每個屬性的解析結果，即match.attrs 數組中的元素對象。

　　變量 value 中就保存著最終的屬性值，如果第4、5、6 項都沒有獲取到屬性值，那么屬性值將被設置為一個空字符串：''。

　　屬性值獲取到了之后，就可以拼裝最終的 attrs 數組。

　　attrs 數組的每個元素對象只包含兩個元素，即屬性名 name 和屬性值 value ，對于屬性名直接從 args[1] 中即可獲取，但我們發現屬性值卻沒有直接使用前面獲取到的 value ，而是將傳value 遞給了decodeAttr 函數，并使用該函數的返回值作為最終的屬性值。

　　decodeAttr 函數的作用是對屬性值中所包含的 html 實體進行解碼，將其轉換為實體對應的字符。關于 shouldDecodeNewlinesForHref 與 shouldDecodeNewlines 可回顧章節

　　接下來是：

　　if (!unary) {
　　stack.push({
　　tag: tagName,
　　lowerCasedTag: tagName.toLowerCase(),
　　attrs: attrs
　　});
　　lastTag = tagName;
　　}

　　這個if條件是當開始標簽是非一元標簽時才會執行，其目的是: 如果開始標簽是非一元標簽，則將該開始標簽的信息入棧，即push到stack數組中，并將lastTag的值設置為該標簽名。

　　在講解 parseHTML 函數開頭定義的變量和常量的過程中，我們講解過 stack 常量以及lastTage 變量，其目的是將來判斷是否缺少閉合標簽，并且現在大家應該知道為什么 lastTag 所存儲的標簽名字始終保存著 stack 棧頂的元素了。

　　調用parser鉤子函數

　　最后一段代碼調用parser鉤子函數的：

　　if (options.start) {
　　options.start(tagName, attrs, unary, match.start, match.end);
　　}

　　當 parser 選項中包含 options.start 函數，表示調用，同時將開始標簽的名字命名為tagName ，當格式化后的屬性數組為 attrs。那是不是一元標簽 unary ，且開始標簽的開始和技術位置是在原 html 中match.start 和 match.end 作為參數傳遞。

GPU云服務器云服務器拿到源碼函數返回引用函數返回值 return返回函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/127766.html

【Vue原理】Filters - 源碼版

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版嗨，又到周末啦，又可以睡寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

oujie 2019-08-23 18:22 評論0 收藏0
【Vue原理】Slot - 白話版

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理白話版插槽作為組件一個重要的部寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

chanthuang 2019-08-23 18:27 評論0 收藏0
【Filecoin源碼倉庫全解析】第三章（上）：存儲提供方（礦工）的配置操作

摘要：我們會在后面的源碼倉庫全解析第三章下存儲提供方礦工的配置操作章節重點介紹這個過程。參考文獻本章贊助品牌深圳牛鏈科技有限公司，是一家專注存儲類礦機研發生產銷售托管為一體的高科技企業。感謝深圳牛鏈科技有限公司對嘉樂的原創內容提供支持。歡迎大家來到第三章，經過前章《【Filecoin源碼倉庫全解析】第二章：如何創建賬戶錢包并獲取FIL Mock代幣的內容閱讀后，我們應該能順利在Filec...

rose 2019-06-27 19:09 評論0 收藏0
深入理解react

摘要：最近在看源碼，發覺以前對的理解實在浮淺，這里記錄了一些以前疏忽的點。和在里面，經過的解析后，會變成執行后的結果。原來對的理解就是類似這種寫法，現在看了實現之后才理解。最近在看react源碼，發覺以前對react的理解實在浮淺，這里記錄了一些以前疏忽的點。 createElement和component 在react里面，經過babel的解析后，jsx會變成createElement執...

CoderStudy 2019-08-23 13:52 評論0 收藏0
一個有味道的函數

摘要：所以我們分析這個新需求的效果我們在函數執行到一半時，執行了，的返回值為后續函數的執行返回值。也就是說，我們在中處理，直接調用隊列中的下一個函數即可然后監聽和回調，即可在當前函數中獲取到返回值拿到返回值后就可以執行我們后續的代碼。最近想到了一個自認為很有意思的面試題如何實現一個compose函數。函數接收數個參數，參數均為Function類型，右側函數的執行結果將作為左側函數執行的參數...

megatron 2019-08-22 15:50 評論0 收藏0