requireJs使用實例
step1 定義一個html文件
我們需要定義一個Html文件，文件命名為requireHtml.html
文件內容下
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <!-- 引入require文件，../指的是當前requireHtml.html文件所在目錄的上級目錄。在這里也就是引用requireHtml.html文件所在目錄的上級目錄的lib文件夾下的require.js文件。
data-main屬性必須存在，它指定了主模塊文件。data-main屬性的值默認的后綴為.js。在這里也就是和requireHtml.html同一目錄等級下的main.js文件 --> <script src="../lib/require.js" data-main="main"></script> </body> </html>
step2 定義main.js文件的內容
main.js文件的內容：
/* 可以接受一個數組對象，里邊以字符串的形式指定了模塊的路徑，一個模塊就是一個Js文件，像當前這樣指定，意味着showA.js文件和showB.js文件和main.js文件位於同一個目錄，
如果showB.js文件位於和main.js文件一個目錄的js文件下邊這里的"showB"就要換成"lib/showB"。接下來require函數會按照這個數組的順序，異步加載對應的模塊。這個順序也是傳入回調函數的參數順序。 */ require(["showA","showB"],function(showA,showB){ showA.sA(); showB.sB(); });
模塊的定義–define函數的用法
showA模塊的定義
define(function(){ return ({ sA:function(){ console.log("showA"); } }); });
showB模塊的定義
define(function(){ return { sB:function(){ console.log("showB"); } } });
按照AMD(asynchronous module define)異步模塊加載的規范我們應使用define函數定義一個模塊。
define函數只接受一個函數的時候應返回一個對象，作為模塊導出的對象。傳入的函數對象因為返回對象的屬性中會含有函數對象內的對象引用等而形成閉包。
如果我們定義的模塊引用其他模塊的要這樣寫
//傳入的數組的每個成員為依賴的模塊的路徑 define([moduleA,moduleB,...],function(moduleA,moduleB){ });
注意：使用exports導出模塊會報錯。
使用requireJS的好處
1.解決頁面加載時，因加載腳本而導致頁面掛起的問題。
這個問題的產生是因為頁面加載腳本會暫停當前頁面的渲染去加載腳本，當腳本加載完之后，才會繼續渲染頁面。當腳本比較大時就會造成因為加載腳本使頁面掛起導致頁面無響應的問題。
requireJS因為異步加載模塊從而避免了這個問題。
2.當頁面中多個js文件相互依賴時，使用script標簽引用時要注意文件的先后順序，即被依賴的文件應在前邊。require函數和define函數通過指定依賴的模塊和保證模塊加載完之后才調用回調函數解決了這個問題。
require.config的使用
我們可以在定義的main.js頭部調用require.config函數，接受一個選項對象配置引用模塊的路徑。
demo：
require.config({ paths:{ baseUrl:"" //指定基准url下邊引用模塊的url都相對與此url，可省略此鍵 //傳入require函數數組參數的值作為鍵值 moduleA:"" //路徑。可以使用本地的（../上一級目錄等用法都是可以的），或另一台主機上的文件（cdn都是可以的） } });
//index.html文件里引進來了index.js。index.js文件里寫上如下的代碼。
require.config({ paths: { "Module": "module/complexModule" } }); require(['Module'], function (Module){});
轉載: https://blog.csdn.net/dbTbest/article/details/78324275