vue編譯器util工具使用方法示例
makeMap源碼：
function makeMap(str, expectsLowerCase) {
var map = Object.create(null);
var list = str.split(',');
for (var i = 0; i < 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存在則，調用 modules.map 創(chuàng)建一個新的數(shù)組。
[ transformNode, transformNode$1, undefined ]
還沒完緊接著又在新生成的數(shù)組之上調用了 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 作比較。其中 $ 對應的 unicode 碼為 36，對應的十六進制值為 0x24；_ 對應的 unicode 碼為 95，對應的十六進制值為 0x5F。
以上就是vue編譯器util工具使用方法示例的詳細內容，更多關于vue編譯器util工具的資料請關注腳本之家其它相關文章！
相關文章
今天小編就為大家分享一篇vue.js 子組件無法獲取父組件store值的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue3?使用v-model實現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)
這篇文章主要介紹了Vue3?使用v-model實現(xiàn)父子組件通信(常用在組件封裝規(guī)范中)的方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要介紹了Vue.js子組件向父組件通信的方法實例代碼，非常不錯，具有一定的參考價借鑒價值，需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue3 provide與inject的使用小技巧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中安裝使用cesium方式(親測可用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
最近入門vue,用字節(jié)跳動的arco初始化一個項目的時候報錯自己解決后沒來的及截圖,從別人那拷貝個網(wǎng)圖把,是一樣的報錯,本文給大家分享vue 解決報錯問題小結,感興趣的朋友一起看看吧2023-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面添加水印功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Vue系列：通過vue-router如何傳遞參數(shù)示例
本篇文章主要介紹了Vue系列：通過vue-router如何傳遞參數(shù)示例，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
這篇文章主要介紹了vue設置默認首頁的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue如何通過插槽組件之間數(shù)據(jù)傳遞問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06