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

3403771864 發布于2022-10-10 21:38 / 348人閱讀

　本篇文章為大家介紹關于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 函數實現過程就是：首先根據一個字符串生成一個 map，然后根據該 map 產生一個新函數，新函數接收一個字符串參數作為 key，如果這個 key 在 map 中則返回 true，否則返回 undefined。遮掩的過程。

　　現在看參數：{String} str 一個以逗號分隔的字符串、{Boolean} expectsLowerCase 是否小寫

　　返回值：根據生成的 map 產生的函數

　　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 數組中的成員對象是否有key屬性，如果有"采摘"出來，組成一個新的數組。

　　如下實例代碼：

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

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

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

　　此時按照 pluckModuleFunction 函數的邏輯：

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

　　我們拆分開看：

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

　　如果modules存在則，調用 modules.map 創建一個新的數組。

　　[
　　transformNode,
　　transformNode$1,
　　undefined
　　]

　　還沒完緊接著又在新生成的數組之上調用了 filter 函數相當于:

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

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

　　[transformNode, transformNode$1]

　　isReserved 源碼：

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

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

　　如：

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

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

　　可以用符串的 charCodeAt 方法獲得該字符串第一個字符的 unicode，就可以讓0x24 和 0x5F 作比較。當 $ 對應的 unicode 碼為 36，對應的十六進制值為 0x24；_ 對應的 unicode 碼為 95，對應的十六進制值為 0x5F。這樣就實現了。

云服務器 GPU云服務器數據展示工具報表展示工具大數據展示工具 linux延遲數據展示工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127983.html

一字一句的搞懂vue-cli之vue webpack template配置

摘要：神一樣的存在。所以呢，就利用兩天時間，參考了一些他人的文章，查閱了一些官方的配置，就在此先稍微記錄一下。這份配置解析是基于最新版本的。不過，我非常建議，先別看我的文章，自己一句一句的通讀一遍。和中的配置含義相似。 webpack--神一樣的存在。無論寫了多少次，再次相見，仍是初見。有的時候開發vue項目，對尤大的vue-cli感激涕零。但是，但是，但是。。。不是自己的東西，真的很不想折...

atinosun 2019-08-22 11:20 評論0 收藏0
解讀Vue.use()源碼

摘要：的作用官方文檔的解釋安裝插件。下面展示源碼源碼中采用了的語法。語法，官方解釋是簡單的意思就是是代碼的靜態類型檢查工具。官網鏈接使用的好處就是在編譯期對代碼變量做類型檢查，縮短調試時間，減少因類型錯誤引起的。此時方法內的指向對象。 Vue.use() vue.use()的作用：官方文檔的解釋：安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。如果插件是一...

funnyZhang 2019-08-23 11:42 評論0 收藏0
Vue+thinkJs博客網站（一）之vue多頁面應用的webpack3配置

摘要：首先看下的代碼編譯前刪除之前編譯生成的靜態資源首先需要改的是入口文件，因為是多頁面應用，需要多個入口文件來保證打包成不同的。一.項目簡介 ? ? 本項目使用vue作為前端框架，thinkJs作為后端框架，構建個人博客網站，頁面分為博客展示和后臺管理，主要目的是學習使用thinkJs?，F在只完成了主要的博客增刪改功能，發現webpack的配置遇到了一些坑，這里先記錄下。項目目錄結構如下...

NickZhou 2019-08-23 15:28 評論0 收藏0
Vue+thinkJs博客網站（一）之vue多頁面應用的webpack3配置

摘要：首先看下的代碼編譯前刪除之前編譯生成的靜態資源首先需要改的是入口文件，因為是多頁面應用，需要多個入口文件來保證打包成不同的。一.項目簡介 ? ? 本項目使用vue作為前端框架，thinkJs作為后端框架，構建個人博客網站，頁面分為博客展示和后臺管理，主要目的是學習使用thinkJs。現在只完成了主要的博客增刪改功能，發現webpack的配置遇到了一些坑，這里先記錄下。項目目錄結構如下...

dongxiawu 2019-08-02 14:21 評論0 收藏0
XBlog： Vue+Express+Mongodb的全?？蓴U展的完整博客系統

摘要：注冊成功后會返回注冊用戶的此就是上面說到的，用于用戶登陸的基礎，請保管好。地址 https://github.com/billyhoomm...http://blog.billyhu.com 說明（Instructions）本項目后臺基于express、mongodb，前臺基于Vue2.0全家桶、bootstrap、scss預編譯器以及一眾工具類插件項目前后臺代碼在同一個目錄中...

Salamander 2019-08-22 16:43 評論0 收藏0