快捷導航

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

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

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

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ù)一個字符串生成一個 map，然后根據(jù)該 map 產(chǎn)生一個新函數(shù)，新函數(shù)接收一個字符串參數(shù)作為 key，如果這個 key 在 map 中則返回 true，否則返回 undefined。
參數(shù)：{String} str 一個以逗號分隔的字符串、{Boolean} expectsLowerCase 是否小寫
返回值：根據(jù)生成的 map 產(chǎn)生的函數(shù)

isReservedTag 源碼：

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

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

pluckModuleFunction 源碼：

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

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

如下實例代碼：

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

傳遞給 pluckModuleFunction 函數(shù)的第二個參數(shù)的字符串為 'transformNode'，同時我們觀察 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
};

此時按照 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)建一個新的數(shù)組。

[
  transformNode,
  transformNode$1,
  undefined
]

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

[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ù)用來檢測一個字符串是否以$ 或者 _ 開頭。

如：

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

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

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

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

您可能感興趣的文章: