前端各種模塊化規范是什么

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

記錄一些要點，以便于常記起時有據可循！

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

至于模塊化的好處，網上各種論調就不多說了，除此之外，更重要的是：在模塊化的基礎上形成一種團隊成員間的默契化規范，形成團隊內的私有倉庫，統一管理，達到像后端調用package一樣自然而然的調用前端模塊的目的；

一切源自CommonJS：

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

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

AMD（異步模塊定義）：

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

CMD（通用模塊定義）：

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

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

關于Seajs的簡單理解：

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

好好的用好seajs吧！

工具是非常重要的生產力：

雖然瀏覽器端流行的模塊化規范是AMD和CMD，但是借助工具的力量，我們依然可以在瀏覽器端模擬CommonJS規范，比如借助Gulp、Webpack之類的工具，我們在開發環境依然可以像寫Nodejs一樣寫前端的JS代碼，由工具打包成瀏覽器可運行的JS，同樣，異步的調用代碼塊也是可行的；

UMD（通用模塊規范）：

現在JS已經可以通行前后端了，那么很大程度上一個JS模塊是既可以在瀏覽器端運行，同時也能在服務端跑了，UMD方案即是對AMD和CommonJS規范的整合，實現對JS模塊化的跨平臺；像下面這個鬼樣子：

(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新的標準，自帶了模塊化的buff，通過import和export導入導出模塊；基本思想與CMD、AMD差不多，只是多了更多語法糖式的東西，畢竟屬于原生的支持，當然更加好用和易于理解；由于當前的瀏覽器環境，要想安心的使用，還是得借助工具的力量進行轉換；

關于前端各種模塊化規范是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。