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

3403771864 發(fā)布于2022-10-10 21:38 / 351人閱讀

　本篇文章為大家介紹關(guān)于vue編譯器util工具使用方法，希望對(duì)于大家有幫助。

　　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ù)實(shí)現(xiàn)過程就是：首先根據(jù)一個(gè)字符串生成一個(gè) map，然后根據(jù)該 map 產(chǎn)生一個(gè)新函數(shù)，新函數(shù)接收一個(gè)字符串參數(shù)作為 key，如果這個(gè) key 在 map 中則返回 true，否則返回 undefined。遮掩的過程。

　　現(xiàn)在看參數(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)簽，當(dāng)這個(gè)表示是html標(biāo)簽，或者是svg標(biāo)簽，就會(huì)認(rèn)為這個(gè)標(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è)字符串是否以 $ 或 _ 開頭呢？

　　可以用符串的 charCodeAt 方法獲得該字符串第一個(gè)字符的 unicode，就可以讓0x24 和 0x5F 作比較。當(dāng) $ 對(duì)應(yīng)的 unicode 碼為 36，對(duì)應(yīng)的十六進(jìn)制值為 0x24；_ 對(duì)應(yīng)的 unicode 碼為 95，對(duì)應(yīng)的十六進(jìn)制值為 0x5F。這樣就實(shí)現(xiàn)了。