vue?parseHTML函數源碼分析AST

這篇“vue parseHTML函數源碼分析AST”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue parseHTML函數源碼分析AST”文章吧。

正文

在正式扎進Vue parse源碼之前，我們先了解下他周邊的工具函數， 這能幫我們快速的去理解閱讀。

還記得我們在上章節講的element元素節點的描述對象嗎？

var element = {
	type: 1,
	tag: tag,
	parent: null,
	attrsList: attrs,
	children: []
}

在源碼中定義了一個createASTElement函數，用來創建一個元素的描述對象。

createASTElement函數

function createASTElement(tag, attrs, parent) {
		return {
			type: 1,
			tag: tag,
			attrsList: attrs,
			attrsMap: makeAttrsMap(attrs),
			parent: parent,
			children: []
		}
	}

解析指令所用正則

var onRE = /^@|^v-on:/;
var dirRE = /^v-|^@|^:/;
var forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
var forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
var stripParensRE = /^\(|\)$/g;
var argRE = /:(.*)$/;
var bindRE = /^:|^v-bind:/;
var modifierRE = /\.[^.]+/g;

在解析開始標簽的時候你遇到的不僅有屬性，還有一些Vue 自定義的指令。下面一起來分析下解析指令會有用哪些正則。

onRE

var onRE = /^@|^v-on:/;

匹配以字符 @ 或 v-on: 開頭的字符串，主要作用是檢測標簽屬性名是否是監聽事件的指令。

dirRE

var const dirRE = /^v-|^@|^:/

匹配以字符 v- 或 @ 或 : 開頭的字符串，主要作用是檢測標簽屬性名是否是指令。在Vue中所有以 v- 開頭的屬性都被認為是指令，另外@字符是 v-on 的縮寫，: 字符是 v-bind 的縮寫。

forAliasRE

var forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;

匹配 v-for 屬性的值，并捕獲 in 或 of 前后的字符串。都是正則大神就不解釋怎么捕獲的了。

forIteratorRE

var forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;

這個也是匹配v-for的屬性值，不過比之前要稍微復雜點：列表渲染 v-for（https://cn.vuejs.org/v2/guide/list.html)需要先了解下這個。

//示例:1
<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>
//示例:2 
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

沒錯就是用來捕獲，示例1中的：'obj , index' 示例2中的：'value, key, index' 。

stripParensRE

var stripParensRE = /^\(|\)$/g;

這個捕獲組用來捕獲要么以字符 ( 開頭，要么以字符 ) 結尾的字符串，或者兩者都滿足。那么這個正則的作用是什么呢？我們在講解正則 forIteratorRE 時有個細節不知道大家注意到了沒有，就是 forIteratorRE 正則所匹配的字符串是 'obj, index' ，而不是 '(obj, index)' ，這兩個字符串的區別就在于第二個字符串擁有左右括號，所以在使用 forIteratorRE 正則之前，需要使用 stripParensRE 正則去掉字符串 '(obj, index)' 中的左右括號，實現方式很簡單:

"(obj, index)".replace(stripParensRE, "")

argRE

var argRE = /:(.*)$/;

argRE正則用來匹配指令編寫中的參數，并且擁有一個捕獲組，用來捕獲參數的名字。

示例：

<div v-on:click.item="handle"></div>

其中 v-on 為指令，click為傳遞給 v-on 指令的參數，stop 為修飾符。

bindRE

var bindRE = /^:|^v-bind:/;

該正則用來匹配以字符:或字符串 v-bind: 開頭的字符串，主要用來檢測一個標簽的屬性是否是綁定(v-bind)。

modifierRE

var modifierRE = /\.[^.]+/g;

該正則用來匹配修飾符的，但是并沒有捕獲任何東西,但你可以用match、exec等方法獲取與當前正則匹配成功的信息。

parse 函數中的變量

在講解 parse 函數直接我們還需要先了解下它內部所定義的一些變量以及用途。

function parse(template, options) {
	warn$2 = options.warn || baseWarn;
	platformIsPreTag = options.isPreTag || no;
	platformMustUseProp = options.mustUseProp || no;
	platformGetTagNamespace = options.getTagNamespace || no;
	transforms = pluckModuleFunction(options.modules, 'transformNode');
	preTransforms = pluckModuleFunction(options.modules, 'preTransformNode');
	postTransforms = pluckModuleFunction(options.modules, 'postTransformNode');
	delimiters = options.delimiters;
	var stack = [];
	var preserveWhitespace = options.preserveWhitespace !== false;
	var root;
	var currentParent;
	var inVPre = false;
	var inPre = false;
	var warned = false;
	function warnOnce(msg) {
        //...
	}
	function closeElement(element) {
       //...
	}
	parseHTML(template, {
		warn: warn$2,
		expectHTML: options.expectHTML,
		isUnaryTag: options.isUnaryTag,
		canBeLeftOpenTag: options.canBeLeftOpenTag,
		shouldDecodeNewlines: options.shouldDecodeNewlines,
		shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref,
		shouldKeepComment: options.comments,
		start: function start(tag, attrs, unary) {},
		end: function end() {},
		chars: function chars(text) {},
		comment: function comment(text) {},
	});
	return root
}

我們先來看下針對web平臺初始化的一些變量。

warn$2 = options.warn || baseWarn;
platformIsPreTag = options.isPreTag || no;
platformMustUseProp = options.mustUseProp || no;
platformGetTagNamespace = options.getTagNamespace || no;
transforms = pluckModuleFunction(options.modules, 'transformNode');
preTransforms = pluckModuleFunction(options.modules, 'preTransformNode');
postTransforms = pluckModuleFunction(options.modules, 'postTransformNode');
delimiters = options.delimiters;

• warn$2 函數 毋庸置疑它作用是用來打印警告信息的

• platformIsPreTag 函數是一個編譯器選項，其作用是通過給定的標簽名字判斷該標簽是否是 pre 標簽。

• platformMustUseProp 該函數也是一個編譯器選項，其作用是用來檢測一個屬性在標簽中是否要使用元素對象原生的 prop 進行綁定。

• platformGetTagNamespace 該函數是一個編譯器選項，其作用是用來獲取元素(標簽)的命名空間。

• transforms 、preTransforms 、postTransforms 還沒講到它們的上下文，暫時不解釋它們的作用。

• delimiters 它的值為 options.delimiters 屬性，它的值就是在創建 Vue 實例對象時所傳遞的 delimiters 選項。

繼續往下看：

var stack = [];
var preserveWhitespace = options.preserveWhitespace !== false;
var root;
var currentParent;
var inVPre = false;
var inPre = false;
var warned = false;

• stack 初始值是一個空數組，作用在上個章節我們講到，回退操作為了讓子元素描述對象的parent屬性能夠正確指向其父元素。

• preserveWhitespace 是一個布爾值并且它的值與編譯器選項中的options.preserveWhitespace選項有關，只要 options.preserveWhitespace 的值不為false，那么 preserveWhitespace 的值就為真。其中 options.preserveWhitespace 選項用來告訴編譯器在編譯 html 字符串時是否放棄標簽之間的空格，如果為 true 則代表放棄。

• root 存儲最終生成的AST。

• currentParent 通過上章節了解到，該變量維護元素描述對象之間的父子關系。

• inVPre 初始值：false。標識當前解析的標簽是否在擁有 v-pre (跳過這個元素和它的子元素的編譯過程。)的標簽之內。

• inPre 初始值：false。標識當前正在解析的標簽是否在 <pre></pre> 標簽之內。

• warned 初始值：false。用來打印警告信息的函數，只不過 warnOnce 函數就如它的名字一樣，只會打印一次警告信息，并且 warnOnce 函數也是通過調用 warn 函數來實現的。

以上就是關于“vue parseHTML函數源碼分析AST”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。