前端各種模塊化規(guī)范是什么

這篇文章將為大家詳細(xì)講解有關(guān)前端各種模塊化規(guī)范是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

記錄一些要點(diǎn)，以便于常記起時(shí)有據(jù)可循！

回首來時(shí)走過的-模塊化之路  之前對(duì)于自個(gè)兒模塊化之路的簡單回顧，由于雜七雜八的內(nèi)容太多，屬于只可意會(huì)型，不便于對(duì)前端的模塊化進(jìn)行全面的理解；這幾天面試了些前端，發(fā)現(xiàn)除了大神來秒殺我之外，大多人對(duì)模塊化這塊都比較陌生，甚至沒聽說過模塊化是個(gè)什么玩意兒，那么就有些尷尬了；看看現(xiàn)在三分天下的流行框架：React、Angular(2)、Vue，他們的最大的共同點(diǎn)就是：模塊化、組件化；還有由Nodejs衍生而來的各種前端構(gòu)建工具：Webpack、Gulp、Systemjs，使用它們的基礎(chǔ)也是模塊化、組件化，如果你非要說，你沒有模塊化、組件化，項(xiàng)目也跑的挺歡，也能用上這些構(gòu)建工具，那么，只能呵呵了，何必呢？可見，模塊化是必須的，無論項(xiàng)目大小，都得好好理解，從而應(yīng)用到實(shí)踐中去，一方面提高工作效率，另一方提高自己的前端水平；

至于模塊化的好處，網(wǎng)上各種論調(diào)就不多說了，除此之外，更重要的是：在模塊化的基礎(chǔ)上形成一種團(tuán)隊(duì)成員間的默契化規(guī)范，形成團(tuán)隊(duì)內(nèi)的私有倉庫，統(tǒng)一管理，達(dá)到像后端調(diào)用package一樣自然而然的調(diào)用前端模塊的目的；

一切源自CommonJS：

不要怕這又是個(gè)什么框架要去花時(shí)間學(xué)習(xí)，CommonJS是JS的模塊化規(guī)范，由于JS的歷史原因，起初并沒有模塊化之說，之后JS成為了瀏覽器端的事實(shí)標(biāo)準(zhǔn)，地位越來越重要，CommonJS規(guī)范就是為了解決這個(gè)問題而提出的，并希望JS不僅僅運(yùn)行于瀏覽器端，而是任何地方；感覺很牛逼的樣子！然后，Nodejs在服務(wù)端實(shí)現(xiàn)了CommonJS規(guī)范，從而將JS從瀏覽器的小環(huán)境拉到了前后端通行的大環(huán)境，丑小鴨終于變白天鵝了！

按照CommonJS規(guī)范，文件即模塊，使用require引用和加載模塊，exports定義和導(dǎo)出模塊，module標(biāo)識(shí)模塊，使用require時(shí)需要去讀取并執(zhí)行該文件，然后返回exports導(dǎo)出的內(nèi)容，由于模塊的讀取執(zhí)行是同步的文件操作，所以CommonJS只能在服務(wù)端由Nodejs發(fā)揚(yáng)光大，Nodejs的模塊化可以看看這里：Browserify讓你的Javascript游走于前后端；但是在瀏覽器端，這種同步操作并不適用，至少會(huì)很耗時(shí)，阻塞后續(xù)代碼的運(yùn)行；從而在瀏覽器端由CommonJS衍生出兩大分支：AMD（異步模塊定義）和CMD（通用模塊定義）；

AMD（異步模塊定義）：

AMD的代表是RequireJS，通過define(id?, dependencies?, factory)來定義模塊，require([dependencies], function(){})來調(diào)用模塊，使用提前異步加載依賴模塊的方式，模塊加載完畢后執(zhí)行回調(diào)函數(shù)，這里要好好理解JS的異步機(jī)制，不可按同步順序執(zhí)行的思維去理解，多個(gè)文件異步并行加載，哪個(gè)先執(zhí)行完不是你按照加載順序可預(yù)料到的，而是等所有依賴執(zhí)行完畢，最后一并回調(diào)結(jié)果；

CMD（通用模塊定義）：

CMD的代表是SeaJS，與RequireJS定義和加載模塊的方式略有不同，同樣可以通過define(id?, dependencies?, factory)定義模塊，但是SeaJS是采用的就近依賴的方式來加載模塊，一般不在dependencies里依賴模塊，而是統(tǒng)一寫法：define(function(require, exports, module){})，在factory里就近加載依賴模塊，由seajs.use([dependencies],function(mod,[mod]){})來使用模塊；本質(zhì)上也是異步的加載模塊，只是和RequireJS相比加載和執(zhí)行的時(shí)機(jī)不一樣罷了；

相比來說，Seajs和Requirejs都是很不錯(cuò)的前端模塊化組織方案，各有千秋；Requirejs要等到所有前置依賴加載并執(zhí)行完畢，再回調(diào)主要的代碼邏輯，如果非要說有所欠缺，就得在前置依賴那里做優(yōu)化了，但大致上是很流暢的；Seajs只是將依賴模塊預(yù)先加載并不執(zhí)行，在需要時(shí)就近使用，這時(shí)就可能也許會(huì)出現(xiàn)延遲的現(xiàn)象；

關(guān)于Seajs的簡單理解：

好好的Seajs，說不用就不用了

好好的用好seajs吧！

工具是非常重要的生產(chǎn)力：

雖然瀏覽器端流行的模塊化規(guī)范是AMD和CMD，但是借助工具的力量，我們依然可以在瀏覽器端模擬CommonJS規(guī)范，比如借助Gulp、Webpack之類的工具，我們?cè)陂_發(fā)環(huán)境依然可以像寫Nodejs一樣寫前端的JS代碼，由工具打包成瀏覽器可運(yùn)行的JS，同樣，異步的調(diào)用代碼塊也是可行的；

UMD（通用模塊規(guī)范）：

現(xiàn)在JS已經(jīng)可以通行前后端了，那么很大程度上一個(gè)JS模塊是既可以在瀏覽器端運(yùn)行，同時(shí)也能在服務(wù)端跑了，UMD方案即是對(duì)AMD和CommonJS規(guī)范的整合，實(shí)現(xiàn)對(duì)JS模塊化的跨平臺(tái)；像下面這個(gè)鬼樣子：

(function(root, factory){
if(typeof define ==='function'&& define.amd){
// AMD
define(['jquery'], factory);
}elseif(typeof exports ==='object'){
// Node, CommonJS之類的
module.exports = factory(require('jquery'));
}else{
// 瀏覽器全局變量(root 即 window)
root.returnExports = factory(root.jQuery);
}
}(this,function($){
// 方法
function myFunc(){};
// 暴露公共方法
return myFunc;
}));

ES6的模塊化：

ES6作為JavaScript新的標(biāo)準(zhǔn)，自帶了模塊化的buff，通過import和export導(dǎo)入導(dǎo)出模塊；基本思想與CMD、AMD差不多，只是多了更多語法糖式的東西，畢竟屬于原生的支持，當(dāng)然更加好用和易于理解；由于當(dāng)前的瀏覽器環(huán)境，要想安心的使用，還是得借助工具的力量進(jìn)行轉(zhuǎn)換；

關(guān)于前端各種模塊化規(guī)范是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。