這篇文章主要介紹了JavaScript的RequireJS庫入門指南,RequireJS庫的人氣近來攀升很快,需要的朋友可以參考下
簡介
如今最常用的JavaScript庫之一是RequireJS。最近我參與的每個項(xiàng)目,都用到了RequireJS,或者是我向它們推薦了增加RequireJS。在這篇文章中,我將描述RequireJS是什么,以及它的一些基礎(chǔ)場景。
異步模塊定義(AMD)
談起RequireJS,你無法繞過提及JavaScript模塊是什么,以及AMD是什么。
JavaScript模塊只是遵循SRP(Single Responsibility Principle單一職責(zé)原則)的代碼段,它暴露了一個公開的API。在現(xiàn)今JavaScript開發(fā)中,你可以在模塊中封裝許多功能,而且在大多數(shù)項(xiàng)目中,每個模塊都有其自己的文件。這使得JavaScript開發(fā)者日子有點(diǎn)難過,因?yàn)樗鼈冃枰掷m(xù)不斷的關(guān)注模塊之間的依賴性,按照一個特定的順序加載這些模塊,否則運(yùn)行時將會放生錯誤。
當(dāng)你要加載JavaScript模塊時,就會使用script標(biāo)簽。為了加載依賴的模塊,你就要先加載被依賴的,之后再加載依賴的。使用script標(biāo)簽時,你需要按照此特定順序安排它們的加載,而且腳本的加載是同步的。可以使用async和defer關(guān)鍵字使得加載異步,但可能因此在加載過程中丟失加載的順序。另一個選擇是將所有的腳本捆綁打包在一起,但在捆綁的時候你仍然需要把它們按照正確的順序排序。
AMD就是這樣一種對模塊的定義,使模塊和它的依賴可以被異步的加載,但又按照正確的順序。
CommonJS, 是對通用的JavaScript模式的標(biāo)準(zhǔn)化嘗試,它包含有 AMD 定義 ,我建議你在繼續(xù)本文之前先讀一下。在ECMAScript 6這個下一版本JavaScript 規(guī)范中,有關(guān)于輸出,輸入以及模塊的規(guī)范定義,這些將成為JavaScript語言的一部分,而且這不會太久。這也是關(guān)于RequireJS我們想說的東西。
RequireJS?
RequireJS是一個Javascript 文件和模塊框架,可以從 http://requirejs.org/下載,如果你使用Visual Studio也可以通過Nuget獲取。它支持瀏覽器和像node.js之類的服務(wù)器環(huán)境。使用RequireJS,你可以順序讀取僅需要相關(guān)依賴模塊。
RequireJS所做的是,在你使用script標(biāo)簽加載你所定義的依賴時,將這些依賴通過head.appendChild()函數(shù)來加載他們。當(dāng)依賴加載以后,RequireJS計算出模塊定義的順序,并按正確的順序進(jìn)行調(diào)用。這意味著你需要做的僅僅是使用一個“根”來讀取你需要的所有功能,然后剩下的事情只需要交給RequireJS就行了。為了正確的使用這些功能,你定義的所有模塊都需要使用RequireJS的API,否者它不會像期望的那樣工作。
RequireJS API 存在于RequireJS載入時創(chuàng)建的命名空間requirejs下。其主要API主要是下面三個函數(shù):
define– 該函數(shù)用戶創(chuàng)建模塊。每個模塊擁有一個唯一的模塊ID,它被用于RequireJS的運(yùn)行時函數(shù),define函數(shù)是一個全局函數(shù),不需要使用requirejs命名空間.
require– 該函數(shù)用于讀取依賴。同樣它是一個全局函數(shù),不需要使用requirejs命名空間.
config– 該函數(shù)用于配置RequireJS.
在后面,我們將教你如果使用這些函數(shù),但首先讓我們先了解下RequireJS的加載流程。
data-main屬性
當(dāng)你下載RequireJS之后
新聞熱點(diǎn)
疑難解答
圖片精選