集團官網
  • 華為授權培訓中心
  • 騰訊云一級認證培訓中心
  • 百度營銷大學豫陜深授權運營中心
  • Oracle甲骨文OAEP中心
  • Microsoft Azure微軟云合作伙伴
  • Unity公司戰略合作伙伴
  • 普華基礎軟件戰略合作伙伴
  • 新開普(股票代碼300248)旗下丹誠開普投資
  • 中國互聯網百強企業銳之旗旗下銳旗資本投資

云和大咖說:基于require.context的模塊化自動引入功能實現

編輯:云和數據 日期:2021-01-20 09:48

基于框架的項目開發中,我們在很多時候都需要將文件按模塊拆分,以此來達到功能復用的目的。在拆分模塊后,我們面臨的往往是模塊的引入及使用所帶來的事件成本的增加。本篇文章就為了解決這樣的問題而產生的。

1 require.context是什么?

require.content 是基于webpack的一個api,它可以引入文件夾中的所有文件,并獲取到文件的內容,以此來實現模塊加載的功能。在前端工程中,如果遇到從一個文件夾引入很多模塊的情況,可以使用這個api,它會遍歷文件夾中的指定文件,然后 自動導入 ,使得不需要每次顯式的調用import導入模塊。

2 require.context語法分析

該api有自己的語法規則,利用對應的規則,我們可以實現對模塊的自動引入的操作。

2.1 基礎語法

require.context(directory,useSubdirectories,regExp)?

require.contenxt有三個參數

directory

useSubdirectories

regExp

const requireComponent = require.context(

? // directory 表示其組件目錄的相對路徑

? './path',

? // useSubdirectories 表示是否查詢其子目錄

? false,

? // regExp 表示匹配基礎組件文件名的正則表達式

? /Base[A-Z]\w+\.(vue|js)$/

)

3 常見應用場景

云和數據課程中包含了Vue及React課程,我們以Vue課程中的內容為例,學習如何利用require.context來實現對模塊的自動加載功能,實現以下兩個功能

路由模塊的自動引入

vuex modules自動引入

3.1 路由模塊的自動引入

3.1.1 目錄分析

– router

?– routes?

? ?– user.js

? ? – posts.js

? ? – comemnt.js

? ? – category.js

? – index.js

3.1.2 代碼實現

在index.js中,我們需要引入routes中的所有的模塊,并在index.js中進行模塊的注冊工作。

import Router from 'vue-router'

// 核心代碼開始

// 引入所有的模塊并獲取到文件名

const files = require.context('./routes', false, /\.js$/)

const _routes = []

// 對文件進行遍歷

files.keys().forEach(key => {

? // 獲取文件中的內容,并添加到事先創建好的數組中

?_routes.push(files(key).default)

})

// 核心代碼結束

m z

3.2 vuex 模塊的自動導入

3.2.1 目錄分析

– store

?– modules

? ?– user.js

? ? – posts.js

? ? – comemnt.js

? ? – category.js

? – index.js

3.2.2 代碼實現

在index.js中,我們需要引入modules中的所有的模塊,并在index.js中進行模塊的注冊工作。

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const context = require.context('./modules', false, /\.js$/)

//獲取moudules文件下所有js文件;

const moduleStores = {}

context.keys().forEach(key => {

? // context.keys() 返回匹配成功模塊的名字組成的數組

? const fileName = key.slice(2, -3)

? //通過 context(key)導出文件內容。在文件中通過 export.default 導出的,所以后邊加.default

? const fileModule = context(key).default;

? moduleStores[fileName] = {

? ? …fileModule,

? ? //文件中有寫可以省略;不過這樣寫可以不用給每個文件寫入;這個屬性不知道自己去查文檔;

? ? namespaced: true,? ??

? }

})

export default new Vuex.Store({

? modules: {

? ? …moduleStores,

? },

})

以上,就是我們通過 require.context 來完成自動化模塊引入的方案,通過這樣的方式。我們可以節省我們開發時的一些時間。

文 / 云和數據H5高級技術專家張老師

001.jpg

云和數據作為一個深耕IT職業教育多年的教育者,目前的課程涵蓋云計算、大數據、人工智能、虛擬現實、軟件工程、用戶體驗設計、網絡安全、電子商務等八大方向,結合企業實際用人需求,只為培養更多高端IT技術人才。

聲明:除云和數據原創文章外,分享和轉載的文章皆為促進IT技術的傳播,并不代表本微信贊同其觀點和對真實性負責,僅做交流學習使用,非商業用途。如有文章或圖片的原作者有異議或涉及版權問題,請立即聯系我們,我們將在第一時間進行改正或刪除,確保您的權益,謝謝支持!

相關內容

云和數據課程發布會:2021震撼來襲!HTML5全棧精英班,打造全新就業崗位“前端架構師”,提升前端技術天花板 【云和數據課程發布會】2021震撼來襲!HTML5全棧精英班引領市場、多端開發、項目驅動,緊跟企業用人需求打造全新就業崗位“前端架構師”,提升前端技術天花板。 如何提高自己的UI設計水平? 設計師的兩大煩惱:無法掌控時間、怎么做都看起來不對勁。如果你發現自己做設計時常常把時間花在一些重復性很高、卻好像沒用到什么大腦的瑣事,那可能是你的方法或習慣有待改進;如果自己做出來的稿子怎么看好像都有哪里不對,卻又說不上來,那可能是因為有些細節不小心被忽略掉了。今天,我們為大家總結了幾個在設計... 月薪過萬的UI設計師都要具備哪些能力? 在互聯網公司,UI設計依舊是一個重要崗位,薪資也比較可觀。但市場對于UI設計師的要求不斷的更迭,我們先來看看現在互聯網大廠對于UI設計師有哪些要求。如此看來,各大企業對于UI設計師的要求不僅僅是要十分熟悉地運用PS、AI、AE、Sketch等相關軟件,還需要有十分敏銳的視覺表現力和對趨勢、新設... 云和大咖說:中國風海報設計探索 中國文化博大精深。以故宮文創為代表的國潮風的出現,讓傳統元素煥發出了新的光彩。原來很多傳統文化元素也會有別樣的風采!歷史的厚重,文化的絢爛,交織成了我們寫意風流的五千年文明長河,演變出了我們獨特的民族特質和風貌。在很長一段時間,中國元素被認為是傳統的象征,提到中國風設計給人兩個極端的印象,一種... 未來前端開發發展的方向是什么? 近年來, Flutter、WebAssembly、Serverless 可謂是前端領域中的最大贏家,TypeScript 的逐步普及,對整個前端發展都有極大的推動作用。Flutter 是 Google 開源的 UI 工具包,幫助開發者通過一套代碼庫高效構建多平臺精美應用,支持移動、Web、桌面... 學JAVA編程,薪資高機會多! 在互聯網高速發展的當下,Java語言已經無處不在,手機軟件、手機Java游戲、電腦軟件等等都有它的身影,作為最熱門的程序開發語言之一,Java在互聯網領域中的地位無需贅言。今天,就讓小編來告訴想要學習Java語言或者剛剛入門學Java的人們,學Java到底有什么好?1 Java語言應用范圍廣J...
×
山西天星麻将 三分赛车是官方开奖吗 比特币价格一年走势 广东赖子麻将 秒速时时彩开奖网站一点击进入 百家乐赢谷输缩 淘宝快3群 篮彩比分网 极速赛车冠军位怎么看 体彩双色球基本走势图 青海11选5派彩电子走势图 莱特币官方钱包下载 麻将外挂下载 广东时时彩11选五开奖结果查询结果一点击进入 35选7中奖号码辽宁 澳洲幸运5开奖综合走势图迪乐 山东福彩3d论坛