資訊專欄INFORMATION COLUMN
本篇文章為大家介紹關(guān)于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ù)實現(xiàn)過程就是：首先根據(jù)一個字符串生成一個 map，然后根據(jù)該 map 產(chǎn)生一個新函數(shù)，新函數(shù)接收一個字符串參數(shù)作為 key，如果這個 key 在 map 中則返回 true，否則返回 undefined。遮掩的過程。
現(xiàn)在看參數(shù)：{String} str 一個以逗號分隔的字符串 、{Boolean} expectsLowerCase 是否小寫
返回值：根據(jù)生成的 map 產(chǎn)生的函數(shù)
isReservedTag 源碼：
var isReservedTag = function(tag) {
return isHTMLTag(tag) || isSVG(tag)
};上述代碼就是為判斷一個標(biāo)簽是否是保留標(biāo)簽，當(dāng)這個表示是html標(biāo)簽，或者是svg標(biāo)簽，就會認(rèn)為這個標(biāo)簽是可以保留的。
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ù)相當(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ù)用來檢測一個字符串是否以$ 或者 _ 開頭。
如：
new Vue({
data: {
$count: 1, // 不允許
_ret: 2 // 不允許
}
})isReserved是如何判斷一個字符串是否以 $ 或 _ 開頭呢？
可以用符串的 charCodeAt 方法獲得該字符串第一個字符的 unicode，就可以讓0x24 和 0x5F 作比較。當(dāng) $ 對應(yīng)的 unicode 碼為 36，對應(yīng)的十六進(jìn)制值為 0x24；_ 對應(yīng)的 unicode 碼為 95，對應(yīng)的十六進(jìn)制值為 0x5F。這樣就實現(xiàn)了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/127983.html
摘要：神一樣的存在。所以呢，就利用兩天時間，參考了一些他人的文章，查閱了一些官方的配置，就在此先稍微記錄一下。這份配置解析是基于最新版本的。不過，我非常建議，先別看我的文章，自己一句一句的通讀一遍。和中的配置含義相似。 webpack--神一樣的存在。無論寫了多少次，再次相見，仍是初見。有的時候開發(fā)vue項目，對尤大的vue-cli感激涕零。但是，但是，但是。。。不是自己的東西，真的很不想折...
摘要：的作用官方文檔的解釋安裝插件。下面展示源碼源碼中采用了的語法。語法，官方解釋是簡單的意思就是是代碼的靜態(tài)類型檢查工具。官網(wǎng)鏈接使用的好處就是在編譯期對代碼變量做類型檢查，縮短調(diào)試時間，減少因類型錯誤引起的。此時方法內(nèi)的指向?qū)ο蟆? Vue.use() vue.use()的作用： 官方文檔的解釋： 安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。如果插件是一...
摘要：首先看下的代碼編譯前刪除之前編譯生成的靜態(tài)資源首先需要改的是入口文件，因為是多頁面應(yīng)用，需要多個入口文件來保證打包成不同的。 一.項目簡介 ? ? 本項目使用vue作為前端框架，thinkJs作為后端框架，構(gòu)建個人博客網(wǎng)站，頁面分為博客展示和后臺管理，主要目的是學(xué)習(xí)使用thinkJs?，F(xiàn)在只完成了主要的博客增刪改功能，發(fā)現(xiàn)webpack的配置遇到了一些坑，這里先記錄下。項目目錄結(jié)構(gòu)如下...
摘要：首先看下的代碼編譯前刪除之前編譯生成的靜態(tài)資源首先需要改的是入口文件，因為是多頁面應(yīng)用，需要多個入口文件來保證打包成不同的。 一.項目簡介 ? ? 本項目使用vue作為前端框架，thinkJs作為后端框架，構(gòu)建個人博客網(wǎng)站，頁面分為博客展示和后臺管理，主要目的是學(xué)習(xí)使用thinkJs?，F(xiàn)在只完成了主要的博客增刪改功能，發(fā)現(xiàn)webpack的配置遇到了一些坑，這里先記錄下。項目目錄結(jié)構(gòu)如下...
摘要：注冊成功后會返回注冊用戶的此就是上面說到的，用于用戶登陸的基礎(chǔ)，請保管好。 地址 https://github.com/billyhoomm...http://blog.billyhu.com 說明（Instructions） 本項目后臺基于express、mongodb，前臺基于Vue2.0全家桶、bootstrap、scss預(yù)編譯器以及一眾工具類插件 項目前后臺代碼在同一個目錄中...
閱讀 773·2023-03-27 18:33
閱讀 1001·2023-03-26 17:27
閱讀 889·2023-03-26 17:14
閱讀 826·2023-03-17 21:13
閱讀 756·2023-03-17 08:28
閱讀 2229·2023-02-27 22:32
閱讀 1632·2023-02-27 22:27
閱讀 2595·2023-01-20 08:28
