什么是RequireJs
RequireJS 是一個JavaScript模塊加載器。
在ES6出現之前，JS不像其他語言同樣擁有“模塊”這一概念，於是為了支持JS模塊化，出現了各種各樣的語言工具，如webpack，如ReuqireJS。
為什么使用RequireJS
· 模塊化：模塊化就是將不同功能的函數封裝起來，並提供使用接口，他們彼此之間互不影響。
· 不會阻塞頁面：RequireJS，會在相關的js加載后執行回調函數，這個過程是異步的，所以它不會阻塞頁面。
· 按需加載：平時我們寫html文件的時候，在底部可能會引用一堆js文件。在頁面加載的時候，這些js也會全部加載。使用require.js就能避免此問題。舉個例子，比如說我寫了一個點擊事件，放到了一個js文件里，並在html引用，在不使用require.js的情況下，頁面加載它跟着加載，使用后則是什么時候觸發點擊事件，什么時候才會加載js。
如何使用RequireJS
1.按照如下目錄結構，創建一個文件夾
注：馬賽克部分是后續寫的模塊；jquery版本需要用1.7.0及以上的；main.js是主要的配置文件；html文件名稱隨意
2.在html引入require.js
<script type="text/javascript" data-main="js/script/main" src="js/lib/require.js"></script> require.js可以npm下載，或者去官網下載。
script里有個data-main屬性，require.js會在加載完成以后通過回調方法去加載這data-main里面的js文件，所以這個js文件被加載的時候，RequireJS已經加載執行完畢。
3.配置main.js，這里主要介紹如何在main.js里引入jquery
require.config({ paths:{ "jquery":'../lib/jquery.min' } }); require(['jquery'],function($){ ... //通過此方式引入jquery才能使用$，接下來正常寫jquery代碼就好 }) require.config()可以對模塊的加載行為進行自定義，並把模塊變為全局可使用的。require.config()就寫在主模塊（main.js）的頭部。參數就是一個對象，這個對象的paths屬性指定各個模塊的加載路徑。
require( [ ] ,function( ){ } )是require.js的核心之一，它接受兩個參數。第一個參數是一個數組，表示所依賴的模塊，上例就是['jquery']；第二個參數是一個回調函數，當前面指定的模塊加載成功后，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊。
既然第一個參數是數組，里面就可以有多個值
eg.
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){ ... }); require()會異步加載每個模塊，瀏覽器不會失去響應；它指定的回調函數，只有前面的模塊都加載成功后，才會運行，解決了依賴性的問題。
4.自己編寫的模塊不像第三方插件可以直接引用，要引用自己寫的模塊，首先要對模塊進行定義。
如下面的例子，我寫了一個彈窗文件，命名為mtWindow.js，也在script目錄下
define(function(){ var mtWindow=function(msg){ $(".body_contanier").append('<div class="modai"><div class="motai_up"><p class="attention">提示</p><p class="charcter">'+msg+'</p></div><span class="mt_line"></span><p class="motai_down">確定</p></div><div class="overlay"></div>'); $(".modai").css("display","block") .next().css("display","block"); $(".motai_down").click(function(){ $(".modai").css("display","none") .next().css("display","none"); $(".modai").remove(); $(".overlay").remove(); }); } return { mtWindow:mtWindow }; }) 注意，此模塊也用到了$，因此在main.js里引用此模塊的時候，需要嵌套引用。
require(['jquery'],function($){ require(['mtWindow'],function(mtWindow){ mtWindow.mtWindow("手機號格式錯誤"); }) }) 注：require數組里的mtWindow是文件路徑，不用寫文件后綴.function里的參數需要與文件名保持一致(非三方插件),否則會報錯。
定義分兩種情況：有依賴、無依賴。
上面的define代碼就是沒有依賴的，即不依賴其他模塊。它返回的是一個對象，相當於對外提供一個接口，在調用此模塊的時候，先使用require()引用，再在回調函數內部使用 A.B的形式調用即可。
如果此模塊依賴其他模塊，define里增加一個數組參數，來說明依賴模塊的路徑
eg.
define(['依賴的模塊路徑'], function(依賴模塊名稱){ ... return { ... }; }); 自定義的模塊如果不需要變為全局來利用，不需要在require.config里配置路徑
5.運行html文件，觀察js的執行順序
eg.
功能：點擊獲取驗證碼，會驗證手機號以及驗證碼格式，格式錯誤則彈窗提示，加載的是mtWindow.js，此時我們可以看到下面並沒有這個文件。
現在我們輸入一個錯誤的手機號碼，來觀察是否會加載mtWindow.js
由此，我們確實看到，當觸發模塊時它才會加載，而不是一開始就全部加載。
注：addClass.js是另外一個模塊，也是彈窗出現后才加載出來的js.
總結
require.js將javascript模塊化確實比較好用，語法也簡單，主要掌握三個語法就能實現一定的功能，即require.config()、require()、define()。但可惜自從webpack出現后，RequireJs幾乎退出了人們的視野，官網也不再升級版本，后續出現的框架如angular、React、Vue又將前端模塊上升到了另外一個高度。跟隨前端時代的變遷固然重要，但有時，嘗試一些“老技術”也無可厚非，或許也能給我們帶來不同的體會。
作者：胖胖的胖胖二
鏈接：https://www.jianshu.com/p/c90fff39c225
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。