模塊化是一種軟件開發(fā)的設(shè)計(jì)模式，它將一個(gè)大型的軟件系統(tǒng)劃分成多個(gè)獨(dú)立的模塊，每個(gè)模塊都有自己的功能和接口，并且能夠與其他模塊獨(dú)立地工作。
?先來(lái)一段八股文
模塊化開發(fā)可以帶來(lái)以下好處：
-
提高代碼的復(fù)用性：模塊化可以將代碼劃分成可重用的部分，降低代碼的冗余和重復(fù)，提高代碼的復(fù)用性。
-
簡(jiǎn)化代碼的維護(hù)和調(diào)試：當(dāng)一個(gè)軟件系統(tǒng)變得越來(lái)越復(fù)雜時(shí)，進(jìn)行模塊化開發(fā)可以使得每個(gè)模塊都相對(duì)獨(dú)立，這樣就可以方便地維護(hù)和調(diào)試每個(gè)模塊，而不必考慮整個(gè)系統(tǒng)的復(fù)雜性。
-
提高代碼的可讀性：模塊化可以使得代碼更加結(jié)構(gòu)化，清晰明了，從而提高代碼的可讀性和可維護(hù)性。
-
提高開發(fā)效率：模塊化開發(fā)可以使得團(tuán)隊(duì)成員在不同模塊上并行開發(fā)，從而提高開發(fā)效率。
-
降低項(xiàng)目的風(fēng)險(xiǎn)：模塊化開發(fā)可以使得開發(fā)人員更加關(guān)注模塊之間的接口和依賴關(guān)系，從而降低項(xiàng)目的風(fēng)險(xiǎn)。
總之，模塊化開發(fā)是一種有效的軟件開發(fā)模式，可以提高軟件開發(fā)的質(zhì)量、效率和可維護(hù)性，特別是在大型軟件系統(tǒng)的開發(fā)中，模塊化更是必不可少的。
實(shí)際工作中如何使用
場(chǎng)景一：在前后端交互的ajax請(qǐng)求中，對(duì)不同的請(qǐng)求進(jìn)行分類，每一個(gè)種類的業(yè)務(wù)放到一個(gè)模塊中，有用戶相關(guān)的、商品列表相關(guān)的、訂單相關(guān)的各種，為了使業(yè)務(wù)邏輯更加清晰，更改相關(guān)代碼的時(shí)候，只需要找到對(duì)應(yīng)的文件，用戶相關(guān)的就去user.js修改，商品相關(guān)的就去goods.js修改等等，是不是清楚多了，這是不是好用多了？
來(lái)看看示例user.js
import axios from?'../utils/request'
import md5 from?'md5'
//?登錄
export?const login?=?async?(params)=>{
??let?{data}?=?await axios.post('users/login',{params})
??if(data.success){
????//?在瀏覽器緩存中存儲(chǔ)token
????sessionStorage.setItem('token',data.token)
??}
??return?data
}
//?修改密碼
export?const resetPwd?=?async?(params)=>{
??//?要對(duì)密碼加密
??let?{data}?=?await axios.post('users/resetPwd',params)
??return?data
}
//...other business示例，goods.js
export?const getDetail?=?async?(id)=>?{
??let?{data}?=??axios.get(`/goods/detail/${id}`);
??return?data
}
export?const getCategory?=?async?()?=>{
??let?{data}?=??axios.get('/categories');
??return?data
}
export?const search?=?(params)?=>{
??let?{data}?=??axios.get('/search',?{?params?});
??return?data
}
每個(gè)js（模塊）都有自己的相關(guān)的代碼，代碼之間互不影響。
如下代碼所示，所有的請(qǐng)求都放到一個(gè)文件中，不分模塊
import axios from?'../utils/request'
import md5 from?'md5'
//?登錄
export?const login?=?async?(params)=>{
??let?{data}?=?await axios.post('users/login',{params})
??if(data.success){
????//?在瀏覽器緩存中存儲(chǔ)token
????sessionStorage.setItem('token',data.token)
??}
??return?data
}
//查詢商品
export?const search?=?(params)?=>{
??let?{data}?=??axios.get('/search',?{?params?});
??return?data
}
//?修改密碼
export?const resetPwd?=?async?(params)=>{
??//?要對(duì)密碼加密
??let?{data}?=?await axios.post('users/resetPwd',params)
??return?data
}
//商品詳情
export?const getDetail?=?async?(id)=>?{
??let?{data}?=??axios.get(`/goods/detail/${id}`);
??return?data
}
//獲取商品分類
export?const getCategory?=?async?()?=>{
??let?{data}?=??axios.get('/categories');
??return?data
}
//...other business
是不是很亂，這只是一點(diǎn)點(diǎn)業(yè)務(wù)，如果大一點(diǎn)業(yè)務(wù)系統(tǒng)，里面有百十個(gè)接口，如果不能按照模塊劃分，代碼就會(huì)是一座屎山，多人協(xié)作會(huì)出問(wèn)題、代碼維護(hù)無(wú)從下手
場(chǎng)景二：大家都知道單頁(yè)面應(yīng)用程序，他的最大優(yōu)勢(shì)就是不用切換頁(yè)面，對(duì)用戶體驗(yàn)極好。例如vue常見(jiàn)的頁(yè)面是頭、尾、菜單不動(dòng)，只有內(nèi)容區(qū)域動(dòng)，在dom中扣去一塊舊的，換一塊新的，這樣看來(lái)，每一塊都應(yīng)該是獨(dú)立存在的，也就是咱們常見(jiàn)的.vue文件，使用webpack將.vue文件轉(zhuǎn)為.js文件，這個(gè)js就是一個(gè)模塊化的文件，通過(guò)路由把頁(yè)面和名字進(jìn)行關(guān)聯(lián)，扣掉和換上新的都需要操作路由來(lái)完成
總結(jié)一下，模塊化其實(shí)就是分門別類。
?附加幾種模塊化語(yǔ)法
不管哪種語(yǔ)法，只是一種固定的寫法，重點(diǎn)了解兩個(gè)概念，一個(gè)導(dǎo)出（暴露當(dāng)前模塊），一個(gè)導(dǎo)入(用那個(gè)模塊)
1.?CommonJS
CommonJS 是一種用于服務(wù)器端 JavaScript 的模塊化規(guī)范，使用 require 和 module.exports 導(dǎo)出和引入模塊。例如：
//?math.js
const add?=?(a,?b)?=>?a?+?b;
const subtract?=?(a,?b)?=>?a?-?b;
const hello?=?()?=>?'千鋒，你好';
module.exports?=?{
??add,
??subtract,
??hello
};
//?app.js
const math?=?require('./math');
console.log(math.add(2,?3));?//?輸出?5
console.log(math.subtract(3,?2));?//?輸出?1
console.log(math.hello);?//?輸出千鋒，你好
2.?AMD
AMD（Asynchronous Module Definition，異步模塊定義）是用于瀏覽器端 JavaScript 的模塊化規(guī)范，使用 define 定義模塊，通過(guò) require 異步加載模塊。例如：
//?math.js
//define第一個(gè)參數(shù)表示當(dāng)前模塊所依賴的模塊，可以是一個(gè)字符串?dāng)?shù)組，也可以是一個(gè)函數(shù)
//?定義一個(gè)名為?"math"?的模塊，依賴于?"jquery"?和?"underscore"?兩個(gè)模塊
define(['jquery',?'underscore'],?function($,?_)?{
??//?定義模塊的功能
??const add?=?function(a,?b)?{
????return?a?+?b;
??};
??const multiply?=?function(a,?b)?{
????return?a?*?b;
??};
??const?test?=?()=>{
????var arr?=?['foo',?'bar',?'qfedu'];
????var arrUpper?=?_.map(arr,?function(str)?{
??????return?str.toUpperCase();
????});
????return??arrUpper;
??}
??
??//?導(dǎo)出模塊的功能
??return?{
????add:?add,
????multiply:?multiply,
????test:test
??};
});
//?app.js
require(['./math'],?function(math)?{
??console.log(math.add(2,?3));?//?輸出?5
??console.log(math.subtract(3,?2));?//?輸出?1
??console.log(math.test())//輸出?["FOO",?"BAR",?"QFEDU"]
});
3.?ES6 模塊
ES6 模塊是 JavaScript 的官方模塊化規(guī)范，使用 import 和 export 導(dǎo)入和導(dǎo)出模塊。例如：
//?math.js
export?const add?=?(a,?b)?=>?a?+?b;
export?const subtract?=?(a,?b)?=>?a?-?b;
//?app.js
import?{?add,?subtract?}?from?'./math';
console.log(add(2,?3));?//?輸出?5
console.log(subtract(3,?2));?//?輸出?1
4.?UMD文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-411559.html
UMD（Universal Module Definition，通用模塊定義）是一種支持多種模塊化規(guī)范的通用模塊化方案，它既支持 CommonJS，又支持 AMD 和全局變量。例如：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-411559.html
(function?(root,?factory)?{
??if?(typeof define?===?'function'?&&?define.amd)?{
????define(['exports'],?factory);
??}?else?if?(typeof module?===?'object'?&&?module.exports)?{
????factory(module.exports);
??}?else?{
????factory((root.myModule?=?{}));
??}
}(typeof self?!==?'undefined'???self?:?this,?function?(exports)?{
??const add?=?(a,?b)?=>?a?+?b;
??const subtract?=?(a,?b)?=>?a?-?b;
??exports.add?=?add;
??exports.subtract?=?subtract;
}));
到了這里，關(guān)于什么是模塊化？為什么要進(jìn)行模塊化開發(fā)？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
