# requireJS 首先看下目錄結構，我們需要使用 requireJS 搭建以下結構的應用 : :-:  ## 引入 requireJS 在入口文件 index.html 中引入 requireJS，使用 `data-main` 定義入口文件。 ```html <script src="./require.js" data-main="./main"></script> ``` ## config 使用 `require.config` 對 requireJS 進行基礎配置。 其中 : （1）baseUrl：模塊默認加載路徑； （2）paths：自定義模塊加載路徑； （3）shim：定義模塊之間的依賴關系。 比如在 `main.js` 中 : ```js require.config({ 'baseUrl': './js/', 'paths': { 'jquery': '../lib/jquery-3.3.1.min' } } ``` 以上代碼進行了基本的 requireJS 配置，其中 baseUrl 將默認加載目錄設置在 js 目錄下，paths 中的依賴都將相對于 baseUrl 進行配置。 ## require 使用 `require` 對加載的文件進行引用，如使用 jquery，在 `main.js` 中 : : ```js require(['jquery'], ($) => { $('body').css({'background-color':'#0f0'}) }) ``` ## define 使用 `define` 自定義要導出的模塊，比如在 `test.js` 中 : ```js define(['jquery'], () => { return { changeBgColor () { $('body').css({'background-color':'#f00'}) }, changeTextSize () { $('body').css({'font-size':'20px'}) } } }) ``` 這里定義了一個自定義模塊，define 的第一參數為依賴項，第二參數為回調函數，在里面使用 return 導出需要導出的模塊。 使用自定義模塊也很容易，在 `main.js` 中 : ```js require.config({ 'baseUrl': './js/', 'paths': { 'jquery': '../lib/jquery-3.3.1.min', 'test': 'test' } }) require(['jquery', 'test'], ($, test) => { $('#bgBtn').on('click', () => { test.changeBgColor() }) $('#textBtn').on('click', () => { test.changeTextSize() }) }) ``` 注意到，paths 中的路徑都是基于 baseUrl 的，并不需要帶 js 后綴。 在 `index.html` 中 : ```html <div> <div id="text">Hello world</div> <div> <button id="bgBtn">改變顏色</button> <button id="textBtn">改變字體大小</button> <button id="colorBtn">改變字體顏色</button> <button id="resetBtn">恢復字體顏色</button> <button id="boldBtn">改變字體粗細</button> </div> </div> ``` ## 在 shim 中指定依賴 以上 `test.js` 中，明確指定了其依賴，也可以不在自定義模塊中指定依賴，而使用配置項指定依賴。 比如 `util.js` : ```js define([], function() { return { changeTextColor () { $('#text').css({'color':'#fff'}) } } }) ``` 也可省略第一參數 : ```js define(function() { return { changeTextColor () { $('#text').css({'color':'#fff'}) } } }) ``` 此時，在 `main.js` 中 : ```js require.config({ 'baseUrl': './js/', 'paths': { 'jquery': '../lib/jquery-3.3.1.min', 'util': 'util' }, 'shim': { 'util': { 'deps' : ['jquery'] } } }) require(['jquery', 'util'], ($, util) => { $('#colorBtn').on('click', () => { util.changeTextColor() }) }) ``` 可以看到，在 `shim` 中使用了 `deps` 指定依賴，其實也可以不指定，只需要在 `require` 中前置加載 jquery 依賴即可。 ## 針對非 AMD 模塊 針對非 AMD 模塊，requireJS 也提供了加載機制，只需要在 shim 中指定 export 即可。 比如 `exp.js` : ```js function resetTextColor () { $('#text').css({'color':'#000'}) } ``` 此時在 `main.js` 中 ```js require.config({ 'baseUrl': './js/', 'paths': { 'jquery': '../lib/jquery-3.3.1.min' }, 'shim': { 'exp': { 'export': 'resetTextColor' } } }) require(['jquery', 'exp'], ($, exp) => { $('#resetBtn').on('click', () => { resetTextColor() }) }) ``` 可以看到，在 shim 中制定了 exp 文件的輸出模塊，在 require 里面引用之，可直接調用其方法。 ### 導出多模塊 使用 export 只能指定導出一個模塊，但如果需要導出多個模塊，則需要使用 init 方法。 如改寫 `exp.js` : ```js function resetTextColor () { $('#text').css({'color':'#000'}) } const changeTextWeight = () => { $('#text').css({'font-weight':'bold'}) } ``` 在 `main.js` 中 ```js require.config({ 'baseUrl': './js/', 'paths': { 'jquery': '../lib/jquery-3.3.1.min' }, 'shim': { 'exp': { 'init': function(){ return { 'resetTextColor': resetTextColor, // 注意這里不需要加引號 'changeTextWeight': changeTextWeight } } } } }) require(['jquery', 'exp'], ($, exp) => { $('#resetBtn').on('click', () => { exp.resetTextColor() }) $('#boldBtn').on('click', () => { exp.changeTextWeight() }) }) ``` 注意，跟 export 不同，在調用的時候需要使用 exp 調用。 ## 加載 css 可以使用 `css.js` 加載 css 文件，在 shim 中配置即可，如 : ```js require.config({ 'baseUrl': './js/', 'paths': { 'jquery': '../lib/jquery-3.3.1.min', 'util': 'util', 'css': '../lib/css' }, 'shim': { 'util': { 'deps' : ['jquery', 'css!../css/style.css'] } } }) ``` 案例地址: http://xiaoyulive.oss-cn-beijing.aliyuncs.com/date/2018-03-28/require.js.zip ## 總結 最后總結下RequireJs的原理： （1）我們在使用requireJS時，都會把所有的js交給requireJS來管理，也就是我們的頁面上只引入一個require.js，把data-main指向我們的main.js。 （2）通過我們在main.js里面定義的require方法或者define方法，requireJS會把這些依賴和回調方法都用一個數據結構保存起來。 （3）當頁面加載時，requireJS會根據這些依賴預先把需要的js通過document.createElement的方法引入到dom中，這樣，被引入dom中的script便會運行。 （4）由于我們依賴的js也是要按照requireJS的規范來寫的，所以他們也會有define或者require方法，同樣類似第二步這樣循環向上查找依賴，同樣會把他們村起來。 （5）當我們的js里需要用到依賴所返回的結果時(通常是一個key value類型的object, requireJS 便會把之前那個保存回調方法的數據結構里面的方法拿出來并且運行，然后把結果給需要依賴的方法。