vue parseHTML函數源碼解析start鉤子函數

Posted on by

正文

接上章節：parseHTML 函數源碼解析 AST 預備知識

現在我們就可以愉快的進入到Vue start鉤子函數源碼部分瞭。

start: function start(tag, attrs, unary) {
	// check namespace.
	// inherit parent ns if there is one
	var ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag);
	// handle IE svg bug
	/* istanbul ignore if */
	if (isIE && ns === 'svg') {
		attrs = guardIESVGBug(attrs);
	}
	var element = createASTElement(tag, attrs, currentParent);
	if (ns) {
		element.ns = ns;
	}
	if (isForbiddenTag(element) && !isServerRendering()) {
		element.forbidden = true;
		warn$2(
			'Templates should only be responsible for mapping the state to the ' +
			'UI. Avoid placing tags with side-effects in your templates, such as ' +
			"<" + tag + ">" + ', as they will not be parsed.'
		);
	}
	// apply pre-transforms
	for (var i = 0; i < preTransforms.length; i++) {
		element = preTransforms[i](element, options) || element;
	}
	if (!inVPre) {
		processPre(element);
		if (element.pre) {
			inVPre = true;
		}
	}
	if (platformIsPreTag(element.tag)) {
		inPre = true;
	}
	if (inVPre) {
		processRawAttrs(element);
	} else if (!element.processed) {
		// structural directives
		processFor(element);
		processIf(element);
		processOnce(element);
		// element-scope stuff
		processElement(element, options);
	}
	function checkRootConstraints(el) {
		{
			if (el.tag === 'slot' || el.tag === 'template') {
				warnOnce(
					"Cannot use <" + (el.tag) + "> as component root element because it may " +
					'contain multiple nodes.'
				);
			}
			if (el.attrsMap.hasOwnProperty('v-for')) {
				warnOnce(
					'Cannot use v-for on stateful component root element because ' +
					'it renders multiple elements.'
				);
			}
		}
	}
	// tree management
	if (!root) {
		root = element;
		checkRootConstraints(root);
	} else if (!stack.length) {
		// allow root elements with v-if, v-else-if and v-else
		if (root.if && (element.elseif || element.else)) {
			checkRootConstraints(element);
			addIfCondition(root, {
				exp: element.elseif,
				block: element
			});
		} else {
			warnOnce(
				"Component template should contain exactly one root element. " +
				"If you are using v-if on multiple elements, " +
				"use v-else-if to chain them instead."
			);
		}
	}
	if (currentParent && !element.forbidden) {
		if (element.elseif || element.else) {
			processIfConditions(element, currentParent);
		} else if (element.slotScope) { // scoped slot
			currentParent.plain = false;
			var name = element.slotTarget || '"default"';
			(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element;
		} else {
			currentParent.children.push(element);
			element.parent = currentParent;
		}
	}
	if (!unary) {
		currentParent = element;
		stack.push(element);
	} else {
		closeElement(element);
	}
}

如上代碼start 鉤子函數接受三個參數，這三個參數分別是標簽名字 tag，該標簽的屬性數組attrs，以及代表著該標簽是否是一元標簽的標識 unary。

接下來別害怕看不懂，我們一點點來分析它函數體中的代碼。

var ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag);

開頭定義瞭 ns 變量，它的值為標簽的命名空間，如何獲取當前元素的命名空間呢？首先檢測currentParent 變量是否存在，我們知道 currentParent 變量為當前元素的父級元素描述對象，如果當前元素存在父級並且父級元素存在命名空間，則使用父級的命名空間作為當前元素的命名空間。

如果父級元素不存在或父級元素沒有命名空間那麼會調用platformGetTagNamespace函數，platformGetTagNamespace 函數隻會獲取 svg 和 math 這兩個標簽的命名空間，但這兩個標簽的所有子標簽都會繼承它們兩個的命名空間。

platformGetTagNamespace 源碼

function getTagNamespace(tag) {
	if (isSVG(tag)) {
		return "svg"
	}
	if (tag === "math") {
		return "math"
	}
}

接下來源碼：

if (isIE && ns === "svg") {
	attrs = guardIESVGBug(attrs);
}

這裡通過isIE來判斷宿主環境是不是IE瀏覽器，並且前元素的命名空間為svg， 如果是通過guardIESVGBug處理當前元素的屬性數組attrs，並使用處理後的結果重新賦值給attrs變量，該問題是svg標簽中渲染多餘的屬性，如下svg標簽：

<svg xmlns:feature="http://www.openplans.org/topp"></svg>

被渲染為：

<svg xmlns:NS1="" NS1:xmlns:feature="http://www.openplans.org/topp"></svg>

標簽中多瞭 'xmlns:NS1="" NS1:' 這段字符串，解決辦法也很簡單，將整個多餘的字符串去掉即可。而 guardIESVGBug 函數就是用來修改NS1:xmlns:feature屬性並移除xmlns:NS1="" 屬性的。

接下來源碼：

var element = createASTElement(tag, attrs, currentParent);
if (ns) {
	element.ns = ns;
}

在上章節聊過，createASTElement 它將生成當前標簽的元素描述對象並且賦值給 element 變量。緊接著檢查當前元素是否存在命名空間 ns ，如果存在則在元素對象上添加 ns 屬性，其值為命名空間的值。

接下來源碼：

if (isForbiddenTag(element) && !isServerRendering()) {
	element.forbidden = true;
	warn$2(
		'Templates should only be responsible for mapping the state to the ' +
		'UI. Avoid placing tags with side-effects in your templates, such as ' +
		"<" + tag + ">" + ', as they will not be parsed.'
	);
}

這裡的作用就是判斷在非服務端渲染情況下，當前解析的開始標簽是否是禁止在模板中使用的標簽。哪些是禁止的呢？

 isForbiddenTag 函數

function isForbiddenTag(el) {
	return (
		el.tag === 'style' ||
		(el.tag === 'script' &amp;&amp; (
			!el.attrsMap.type ||
			el.attrsMap.type === 'text/javascript'
		))
	)
}

可以看到，style，script 都是在禁止名單中，但通過isForbiddenTag 也發現一個彩蛋。

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>

當定義模板的方式如上，在 <script> 元素上添加 type="text/x-template" 屬性。 此時的script不會被禁止。

最後還會在當前元素的描述對象上添加 element.forbidden 屬性，並將其值設置為true。

接下來源碼：

for (var i = 0; i < preTransforms.length; i++) {
	element = preTransforms[i](element, options) || element;
}

如上代碼中使用 for 循環遍歷瞭preTransforms 數組，preTransforms 是通過pluckModuleFunction 函數從options.modules 選項中篩選出名字為preTransformNode 函數所組成的數組。實際上 preTransforms 數組中隻有一個 preTransformNode 函數該函數隻用來處理 input 標簽我們在後面章節會來講它。

接下來源碼：

if (!inVPre) {
	processPre(element);
	if (element.pre) {
		inVPre = true;
	}
}
if (platformIsPreTag(element.tag)) {
	inPre = true;
}
if (inVPre) {
	processRawAttrs(element);
} else if (!element.processed) {
	// structural directives
	processFor(element);
	processIf(element);
	processOnce(element);
	// element-scope stuff
	processElement(element, options);
}

可以看到這裡會有大量的process*的函數，這些函數是做什麼用的呢？實際上process* 系列函數的作用就是對元素描述對象做進一步處理，比如其中一個函數叫做 processPre，這個函數的作用就是用來檢測元素是否擁有v-pre 屬性，如果有v-pre 屬性則會在 element 描述對象上添加一個 pre 屬性，如下：

{
  type: 1,
  tag,
  attrsList: attrs,
  attrsMap: makeAttrsMap(attrs),
  parent,
  children: [],
  pre: true
}

總結：所有process* 系列函數的作用都是為瞭讓一個元素的描述對象更加充實，使這個對象能更加詳細地描述一個元素， 不過我們本節主要總結解析一個開始標簽需要做的事情，所以稍後去看這些代碼的實現。

接下來源碼：

function checkRootConstraints(el) {
	{
		if (el.tag === 'slot' || el.tag === 'template') {
			warnOnce(
				"Cannot use <" + (el.tag) + "> as component root element because it may " +
				'contain multiple nodes.'
			);
		}
		if (el.attrsMap.hasOwnProperty('v-for')) {
			warnOnce(
				'Cannot use v-for on stateful component root element because ' +
				'it renders multiple elements.'
			);
		}
	}
}

我們知道在編寫 Vue 模板的時候會受到兩種約束，首先模板必須有且僅有一個被渲染的根元素，第二不能使用 slot 標簽和 template 標簽作為模板的根元素。

checkRootConstraints 函數內部首先通過判斷 el.tag === 'slot' || el.tag === 'template' 來判斷根元素是否是slot 標簽或 template 標簽，如果是則打印警告信息。接著又判斷當前元素是否使用瞭 v-for 指令，因為v-for 指令會渲染多個節點所以根元素是不允許使用 v-for 指令的。

接下來源碼：

if (!root) {
	root = element;
	checkRootConstraints(root);
} else if (!stack.length) {
	// allow root elements with v-if, v-else-if and v-else
	if (root.if &amp;&amp; (element.elseif || element.else)) {
		checkRootConstraints(element);
		addIfCondition(root, {
			exp: element.elseif,
			block: element
		});
	} else {
		warnOnce(
			"Component template should contain exactly one root element. " +
			"If you are using v-if on multiple elements, " +
			"use v-else-if to chain them instead."
		);
	}
}

這個 if 語句先檢測 root 是否存在！我們知道 root 變量在一開始是不存在的，如果 root 不存在那說明當前元素應該就是根元素，所以在 if 語句塊內直接把當前元素的描述對象 element 賦值給 root 變量，同時會調用 checkRootConstraints函數檢查根元素是否符合要求。

再來看 else if 語句的條件，當 stack 為空的情況下會執行 else if 語句塊內的代碼, 那stack 什麼情況下才為空呢？前面已經多次提到每當遇到一個非一元標簽時就會將該標簽的描述對象放進數組，並且每當遇到一個結束標簽時都會將該標簽的描述對象從 stack 數組中拿掉，那也就是說在隻有一個根元素的情況下，正常解析完成一段 html 代碼後 stack 數組應該為空，或者換個說法，即當 stack 數組被清空後則說明整個模板字符串已經解析完畢瞭，但此時 start 鉤子函數仍然被調用瞭，這說明模板中存在多個根元素，這時 else if 語句塊內的代碼將被執行：

接下來源碼：

if (root.if &amp;&amp; (element.elseif || element.else)) {
	checkRootConstraints(element);
	addIfCondition(root, {
		exp: element.elseif,
		block: element
	});
} else {
	warnOnce(
		"Component template should contain exactly one root element. " +
		"If you are using v-if on multiple elements, " +
		"use v-else-if to chain them instead."
	);
}

想要能看懂這個代碼，你需要懂一些前置知識。

[ Vue條件渲染 ] (https://cn.vuejs.org/v2/guide/conditional.html)

我們知道在編寫 Vue 模板時的約束是必須有且僅有一個被渲染的根元素，但你可以定義多個根元素，隻要能夠保證最終隻渲染其中一個元素即可，能夠達到這個目的的方式隻有一種，那就是在多個根元素之間使用 v-if 或 v-else-if 或 v-else 。

示例代碼：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

在回歸到代碼部分。

if (root.if && (element.elseif || element.else))

root 對象中的 .if 屬性、.elseif 屬性以及 .else 屬性都是哪裡來的，它們是在通過 processIf 函數處理元素描述對象時，如果發現元素的屬性中有 v-if 或 v-else-if 或 v-else ，則會在元素描述對象上添加相應的屬性作為標識。

上面代碼如果第一個根元素上有 .if 的屬性，而非第一個根元素 element 有 .elseif 屬性或者 .else 屬性，這說明根元素都是由 v-if、v-else-if、v-else 指令控制的，同時也保證瞭被渲染的根元素隻有一個。

接下來繼續看：

if (root.if && (element.elseif || element.else)) {
	checkRootConstraints(element);
	addIfCondition(root, {
		exp: element.elseif,
		block: element
	});
} else {
	warnOnce(
		"Component template should contain exactly one root element. " +
		"If you are using v-if on multiple elements, " +
		"use v-else-if to chain them instead."
	);
}

checkRootConstraints 函數檢查當前元素是否符合作為根元素的要求，這都能理解。

addIfCondition是什麼

看下它的源代碼。

function addIfCondition(el, condition) {
	if (!el.ifConditions) {
		el.ifConditions = [];
	}
	el.ifConditions.push(condition);
}

代碼很簡單，調用addIfCondition 傳遞的參數 root 對象，在函數體中擴展一個屬性addIfCondition， root.addIfCondition 屬性值是一個對象。 此對象中有兩個屬性exp、block。實際上該函數是一個通用的函數，不僅僅用在根元素中，它用在任何由 v-if、v-else-if 以及 v-else 組成的條件渲染的模板中。

通過如上分析我們可以發現，具有 v-else-if 或 v-else 屬性的元素的描述對象會被添加到具有 v-if 屬性的元素描述對象的 .ifConnditions 數組中。

舉個例子，如下模板：

<div v-if="A"></div>
<div v-else-if="B"></div>
<div v-else-if="C"></div>
<div v-else></div>

解析後生成的 AST 如下(簡化版)：

{
  type: 1,
  tag: 'div',
  ifConditions: [
    {
      exp: 'A',
      block: { type: 1, tag: 'div' /* 省略其他屬性 */ }
    },
    {
      exp: 'B',
      block: { type: 1, tag: 'div' /* 省略其他屬性 */ }
    },
    {
      exp: 'C',
      block: { type: 1, tag: 'div' /* 省略其他屬性 */ }
    },
    {
      exp: 'undefined',
      block: { type: 1, tag: 'div' /* 省略其他屬性 */ }
    }
  ]
  // 省略其他屬性...
}

假如當前元素不滿足條件：root.if && (element.elseif || element.else) ，那麼在非生產環境下會打印瞭警告信息。

接下來源碼:

if (currentParent && !element.forbidden) {
	if (element.elseif || element.else) {
		processIfConditions(element, currentParent);
	} else if (element.slotScope) { // scoped slot
		currentParent.plain = false;
		var name = element.slotTarget || '"default"';
		(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element;
	} else {
		currentParent.children.push(element);
		element.parent = currentParent;
	}
}
if (!unary) {
	currentParent = element;
	stack.push(element);
} else {
	closeElement(element);
}

我們先從下往上講, 為什麼呢？原因是在解析根元素的時候currentParent並沒有賦值。

!unary 表示解析的是非一元標簽，此時把該元素的描述對象添加到stack 棧中，並且將 currentParent 變量的值更新為當前元素的描述對象。如果一個元素是一元標簽，那麼應該調用 closeElement 函數閉合該元素。

老生常談的總結：每當遇到一個非一元標簽都會將該元素的描述對象添加到stack數組，並且currentParent 始終存儲的是 stack 棧頂的元素，即當前解析元素的父級。

if (currentParent && !element.forbidden) {
	if (element.elseif || element.else) {
		processIfConditions(element, currentParent);
	} else if (element.slotScope) { // scoped slot
		currentParent.plain = false;
		var name = element.slotTarget || '"default"';
		(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element;
	} else {
		currentParent.children.push(element);
		element.parent = currentParent;
	}
}

這裡的條件要成立，則說明當前元素存在父級( currentParent )，並且當前元素不是被禁止的元素。

常見的情況如下：

if (currentParent && !element.forbidden) {
        if (element.elseif || element.else) {
         //...
	} else if (element.slotScope) { // scoped slot
	 //...
	} else {
		currentParent.children.push(element);
		element.parent = currentParent;
	}
}

在 else 語句塊內，會把當前元素描述對象添加到父級元素描述對象 ( currentParent ) 的children 數組中，同時將當前元素對象的 parent 屬性指向父級元素對象，這樣就建立瞭元素描述對象間的父子級關系。

如果一個標簽使用 v-else-if 或 v-else 指令，那麼該元素的描述對象實際上會被添加到對應的v-if 元素描述對象的 ifConditions 數組中，而非作為一個獨立的子節點，這個工作就是由如下代碼完成：

if (currentParent && !element.forbidden) {
	if (element.elseif || element.else) {
		processIfConditions(element, currentParent);
	} else if (element.slotScope) { // scoped slot
		currentParent.plain = false;
		var name = element.slotTarget || '"default"';
		(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element;
	} else {
	  //...
	}
}

如當前解析的元素使用瞭 v-else-if 或 v-else 指令，則會調用 processIfConditions 函數，同時將當前元素描述對象 element 和父級元素的描述對象 currentParent 作為參數傳遞：

processIfConditions 源碼

function processIfConditions(el, parent) {
	var prev = findPrevElement(parent.children);
	if (prev && prev.if) {
		addIfCondition(prev, {
			exp: el.elseif,
			block: el
		});
	} else {
		warn$2(
			"v-" + (el.elseif ? ('else-if="' + el.elseif + '"') : 'else') + " " +
			"used on element <" + (el.tag) + "> without corresponding v-if."
		);
	}
}

findPrevElement 函數是去查找到當前元素的前一個元素描述對象，並將其賦值給 prev 常量，addIfCondition 不用多說如果prev 、prev.if 存在，調用 addIfCondition 函數在當前元素描述對象添加 ifConditions 屬性，傳入的對象存儲相關信息。

如果當前元素沒有使用 v-else-if 或 v-else 指令，那麼還會判斷當前元素是否使用瞭 slot-scope 特性，如下：

if (currentParent && !element.forbidden) {
	if (element.elseif || element.else) {
          //...
	} else if (element.slotScope) { // scoped slot
		currentParent.plain = false;
		var name = element.slotTarget || '"default"';
		(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element;
	} else {
	  //...
	}
}

如果一個元素使用瞭 slot-scope 特性，那麼該元素的描述對象會被添加到父級元素的scopedSlots 對象下，也就是說使用瞭 slot-scope 特性的元素與使用瞭v-else-if 或 v-else 指令的元素一樣，他們都不會作為父級元素的子節點，對於使用瞭 slot-scope 特性的元素來講它們將被添加到父級元素描述對象的 scopedSlots 對象下。

自 2.6.0 起有所更新。已廢棄的使用slot-scope 特性的語法在這裡。所以此塊內容就不鋪開來講瞭，有興趣的同學可以去瞭解下，更多關於vue parseHTML start鉤子函數的資料請關註WalkonNet其它相關文章！

推薦閱讀：