快捷導(dǎo)航

vue編譯器util工具使用方法示例

更新時(shí)間：2022年07月13日 10:02:18 作者：李李

這篇文章主要為大家介紹了vue編譯器util工具使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

makeMap源碼：

function makeMap(str, expectsLowerCase) {
	var map = Object.create(null);
	var list = str.split(',');
	for (var i = 0; i &lt; list.length; i++) {
		map[list[i]] = true;
	}
	return expectsLowerCase ?
		function(val) {
			return map[val.toLowerCase()];
		} :
		function(val) {
			return map[val];
		}
}

描述：makeMap 函數(shù)首先根據(jù)一個(gè)字符串生成一個(gè) map，然后根據(jù)該 map 產(chǎn)生一個(gè)新函數(shù)，新函數(shù)接收一個(gè)字符串參數(shù)作為 key，如果這個(gè) key 在 map 中則返回 true，否則返回 undefined。
參數(shù)：{String} str 一個(gè)以逗號(hào)分隔的字符串、{Boolean} expectsLowerCase 是否小寫
返回值：根據(jù)生成的 map 產(chǎn)生的函數(shù)

isReservedTag 源碼：

var isReservedTag = function(tag) {
	return isHTMLTag(tag) || isSVG(tag)
};

判斷一個(gè)標(biāo)簽是否是保留標(biāo)簽，我們可以知道，如果一個(gè)標(biāo)簽是html標(biāo)簽，或者是svg標(biāo)簽，那么這個(gè)標(biāo)簽即是保留標(biāo)簽。

pluckModuleFunction 源碼：

function pluckModuleFunction(modules,key) {
	return modules ?
		modules.map(function(m) {
			return m[key];
		}).filter(function(_) {
			return _;
		}) : []
}

檢測在modules 數(shù)組中的成員對(duì)象是否有key屬性，如果有"采摘"出來，組成一個(gè)新的數(shù)組。

如下實(shí)例代碼：

transforms = pluckModuleFunction(options.modules, 'transformNode')

傳遞給 pluckModuleFunction 函數(shù)的第二個(gè)參數(shù)的字符串為 'transformNode'，同時(shí)我們觀察 options.modules 數(shù)組：

var modules$1 = [
	klass$1,
	style$1,
	model$1
];
var klass$1 = {
	staticKeys: ['staticClass'],
	transformNode: transformNode, //處理靜態(tài)屬性和非靜態(tài)屬性
	genData: genData
};
var model$1 = {
	preTransformNode: preTransformNode
};
var style$1 = {
	staticKeys: ['staticStyle'],
	transformNode: transformNode$1, //處理靜態(tài)樣式和非靜態(tài)樣式
	genData: genData$1
};

此時(shí)按照 pluckModuleFunction 函數(shù)的邏輯：

modules ?
	modules.map(function(m) {
		return m[key];
	}).filter(function(_) {
		return _;
	}) : []

我們拆分開看：

modules ? modules.map(function(m) {
		return m[key];
	})

如果modules存在則，調(diào)用 modules.map 創(chuàng)建一個(gè)新的數(shù)組。

[
  transformNode,
  transformNode$1,
  undefined
]

還沒完緊接著又在新生成的數(shù)組之上調(diào)用了 filter 函數(shù)相當(dāng)于:

[transformNode, transformNode$1, undefined].filter(function(_){ return _ });

把值為 undefined 的元素過濾掉，所以最終生成的數(shù)組如下:

[transformNode, transformNode$1]

isReserved 源碼：

function isReserved(str) {
	var c = (str + '').charCodeAt(0);
	return c === 0x24 || c === 0x5F
}

在Vue中不允許使用以$或_開頭的字符串作為data數(shù)據(jù)的字段名, isReserved 函數(shù)用來檢測一個(gè)字符串是否以$ 或者 _ 開頭。

如：

new Vue({
  data: {
    $count: 1,  // 不允許
    _ret: 2   // 不允許
  }
})

isReserved是如何判斷一個(gè)字符串是否以 $ 或 _ 開頭呢？

它的實(shí)現(xiàn)方式是通過字符串的 charCodeAt 方法獲得該字符串第一個(gè)字符的 unicode，然后與 0x24 和 0x5F 作比較。其中 $ 對(duì)應(yīng)的 unicode 碼為 36，對(duì)應(yīng)的十六進(jìn)制值為 0x24；_ 對(duì)應(yīng)的 unicode 碼為 95，對(duì)應(yīng)的十六進(jìn)制值為 0x5F。

以上就是vue編譯器util工具使用方法示例的詳細(xì)內(nèi)容，更多關(guān)于vue編譯器util工具的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: