requireJs使用初探及模組定義define函式的用法
阿新 • • 發佈：2019-01-25
requireJs下載
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 step2 定義main.js檔案的內容
main.js檔案的內容：
/*
可以接受一個數組物件，裡邊以字串的形式指定了模組的路徑，一個模組就是一個Js檔案，像當前這樣指定，意味著showA.js檔案和showB.js檔案和main.js檔案位於同一個目錄，如果showB.js檔案位於和main.js檔案一個目錄的js檔案下邊這裡的"showB"就要換成"lib/showB"。接下來require函式會按照這個陣列的順序，非同步載入對應的模組。這個順序也是傳入回撥函式的引數順序。
*/
require(["showA","showB" 模組的定義–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都是可以的）
}
});