RequireJS的基本使用
RequireJs的基本使用
requireJS是js模組化開發的一個載入器。為什麼要使用模組化開發呢？隨著前端開發程式碼量的增加，一個js檔案是不夠用的，那麼就需要分成很多個檔案，依次載入，如下程式碼所示：
<
script
src
=
“1。js”
>
script
>
<
script
src
=
“2。js”
>
script
>
<
script
src
=
“3。js”
>
script
>
<
script
src
=
“4。js”
>
script
>
<
script
src
=
“5。js”
>
script
>
<
script
src
=
“6。js”
>
script
>
<
script
src
=
“7。js”
>
script
>
這樣的寫法有很大的缺點，首先，載入的時候，瀏覽器會停止網頁渲染，載入檔案越多，網頁失去響應的時間就會越長；其次，由於js檔案之間存在依賴關係，因此必須嚴格保證載入順序（比如上例的1。js要在2。js的前面），依賴性最大的模組一定要放到最後載入，當依賴關係很複雜的時候，程式碼的編寫和維護都會變得困難。
模組化開發的好處（1）實現js檔案的非同步載入，避免網頁失去響應；（2）管理模組之間的依賴性，便於程式碼的編寫和維護。
1。 下載requireJs
首先去官網下載requireJs的庫檔案，官網地址RequireJS
2。 新建一個模組化檔案
在資料夾新建一個js檔案，檔案的用途是模組化編寫程式碼。比如，我將檔案命名為teacherManage。js，說明我將在這個模組內進行老師管理業務邏輯的編寫。
js檔案內使用define進行定義業務邏輯。define的第一個引數是一個數組，陣列內的元素資料型別都應該是字串，具體語義是define的這個模組將呼叫的其他模組的檔案路徑。比如例子中我們呼叫了jQuery和teacherAdd模組。第二個引數是一個回撥函式，回撥函式的形參將接收前面對應的呼叫模組的函式返回值。這種方式叫做依賴注入。
define
（［
“。。/jquery-2。1。4。js”
，
“teacherAdd”
］，
function
（
$
，
teacherAdd
）
{
return
function
（）
{
$
（
“
”）。
css
（{
width
：
300
，
height
：
300
，
border
：
“1px solid red”
}）。
appendTo
（
$
（
“body”
））。
on
（
“click”
，
“button”
，
function
（）
{
teacherAdd
（）；
}）
}
}）
（1） 回撥函式的形參
關於回撥函式的形參問題，形參接收返回值是按照前面的陣列中元素的順序來進行的，因此對於順序是不能隨意書寫的，如果前面的陣列中模組之間的書寫位置發生變化，那麼後面接收引數的順序也將發生變化。
其次，回撥函式的形參最好對應的有語義，最好與前面的模組同名，以便於函式內部的呼叫，以免發生錯亂。例如jQuery的對應的形參是該外掛特有的$符號，teacherAdd對應的的形參是同名的teacherAdd。在呼叫模組化函式的時候，有的函式沒有返回值，這樣的函式一般放在陣列的後面，對應的回撥函式也不需要用形參去接收返回值。
那麼，用形參接收返回值的意義在哪裡呢？直接在回撥函數里面寫業務邏輯不行嗎？實際上，透過形參傳入模組的返回值，這叫做依賴注入，在某些特定的場合可以精確地區分匯入模組的變數命名出現的衝突問題。
比如，我同時匯入了jQuery和zepto，如果不透過回撥函式的形參去接收模組的返回值的話，直接在回撥函式體寫$，那到底指向的是jQuery物件呢還是zepto的物件呢？這樣就會出現混淆。因此使用依賴注入的方式可以有效地避免這些情況的發生。
（2）函式體的內容
回撥函式的函式體內的程式碼，如果直接書寫，那麼該模組被呼叫的時候就直接會執行，一般我們的業務需求是程式碼在某些特定的情景下才能執行，因此有這方面需求的程式碼需要儲存在函式的返回值裡面，在呼叫該模組的函式內部設定符合程式碼執行的條件。比如上面程式碼中的teacherAdd模組，在傳入teacherManage之後透過回撥函式的引數接收，設定為當頁面中按鈕被點選的時候再執行。
3。 新建一個入口檔案
在專案模組化元件的js資料夾新建一個main。js的入口檔案，使用require入口，匯入teacherManage模組，使用回撥函式的形參teacherManage來接收模組的返回值，然後再在函式體呼叫，這樣就能實現業務功能的模組化，從而達到模組化程式設計的目的。
require
（［
“teacherManage”
］，
function
（
teacherManage
）
{
teacherManage
（）
}）
require的語法和define基本一致，都是前面的陣列引入模組（以字串的形式書寫模組的路徑），後面的回撥函式透過形參接收前面對應的模組的返回值。
4。引入RequireJS檔案和入口檔案
在html檔案頁面透過script標籤的src屬性引入RequireJS檔案，透過data-main屬性引入入口檔案main。js。main。js的檔案拓展名可以省略。這樣可以實現一行就匯入元件，不用兩個script標籤。
<
script
src
=
“。。/require。js”
data
-
main
=
“main”
><
/script>
5。 AMD規範的問題
AMD規範可以簡單地理解為，該模組在呼叫時，是否會有返回值。也就是說，如果該模組支援AMD規範，那麼在使用RequireJS呼叫該模組時，能夠透過回撥函式的形參接收模組的返回值。
判斷外部引用的庫檔案是否支援AMD規範，可以在庫檔案的原始碼中查詢類似於如下的程式碼：
if
（
typeof
define
===
“function”
&&
define
。
amd
）
{
define
（［］，
function
（）
{
//函式體
}）；
}
6。 模組路徑的設定
一般使用模組開發的專案都是模組較多，因此會使用require。baseUrl來統一設定模組的路徑。
在下面的程式碼中，所有的檔案都從js目錄開始查詢。此外，還能在
設定基本路徑的基礎上
使用paths給單個的檔案和資料夾設定路徑，儲存在變數中，比如將a。js 的路徑設定為a，要是有模組呼叫a。js，就能直接寫a就可以。
require
。
config
（{
baseUrl
：
“。/js”
，
paths
：
{
a
：
“asset/a”
，
jquery
：
“。。/jquery-2。1。4”
，
bootstrap
：
“。。/bootstrap/js/bootstrap”
}
}）
7。 shim的使用
有時候我們需要匯入多個外部庫檔案，有的不支援AMD標準，而這樣的庫檔案又是基於某些支援AMD的庫檔案的，比如，bootstrap不支援AMD，但是bootstrap又是基於jQuery的，jQuery支援AMD，如果模組化需要使用bootstrap的元件，那麼使用起來就很麻煩。透過shim能比較好的解決這種問題，透過shim，可以告訴瀏覽器bootstrap是基於jQuery的，因此會在jQuery載入之後再執行bootstrap的內容，這樣就不會報錯了。
require
。
config
（{
shim
：
{
bootstrap
：
{
deps
：
［
“jquery”
］
}
}
}）
