目前,通行的Javascript模塊規範***有兩種:CommonJS和AMD。
1、commonjs
2009年,美國程序員Ryan Dahl創造了node.js項目,將javascript語言用於服務器端編程,這標誌”Javascript模塊化編程”正式誕生。
在瀏覽器環境下,沒有模塊也不是特別大的問題,畢竟網頁程序的復雜性有限;但是在服務器端,壹定要有模塊,與操作系統和其他應用程序互動,否則根本沒法編程。
node.js的模塊系統,就是參照CommonJS規範實現的。在CommonJS中,有壹個全局性方法require(),用於加載模塊。
假定有壹個數學模塊math.js,就可以像下面這樣加載。
var math = require('math');
然後,就可以調用模塊提供的方法:
var math = require('math');
math.add(2,3); // 5
因為這個系列主要針對瀏覽器編程,不涉及node.js,所以對CommonJS就不多做介紹了。我們在這裏只要知道,require()用於加載模塊就行了。
2、AMD
AMD是”Asynchronous Module Definition”的縮寫,意思就是”異步模塊定義”。它采用異步方式加載模塊,模塊的加載不影響它後面語句的運行。所有依賴這個模塊的語句,都定義在壹個回調函數中,等到加載完成之後,這個回調函數才會運行。
模塊定義
define(id?, dependencies?, factory);
其中:
id: 模塊標識,可以省略。
dependencies: 所依賴的模塊,可以省略。
factory: 模塊的實現,或者壹個JavaScript對象。
模塊加載
AMD也采用require()語句加載模塊,但是不同於CommonJS,它要求兩個參數:
require([module], callback);
第壹個參數[module],是壹個數組,裏面的成員就是要加載的模塊;第二個參數callback,則是加載成功之後的回調函數。如果將前面的代碼改寫成AMD形式,就是下面這樣:
require(['math'], function (math) {
math.add(2, 3);
});
math.add()與math模塊加載不是同步的,瀏覽器不會發生假死。所以很顯然,AMD比較適合瀏覽器環境。
目前,主要有兩個Javascript庫實現了AMD規範:require.js和curl.js。本系列的第三部分,將通過介紹require.js,進壹步講解AMD的用法,以及如何將模塊化編程投入實戰。
二、requirejs模塊化編程
require.js加載的模塊,采用AMD(異步模塊定義規範) 規範。也就是說,模塊必須按照AMD的規定來寫。
require.js的兩個重要的特點:
1、實現js文件的異步加載,避免網頁失去響應
2、管理模塊之間的依賴性,便於代碼的編寫和維護
加載requirejs:
<script src="js/require.js" data-main="js/main"></script>
data-main屬性的作用是,指定網頁程序的主模塊。在上例中,就是js目錄下面的main.js,這個文件會第壹個被require.js加載。由於require.js默認的文件後綴名是js,所以可以把main.js簡寫成main。
main.js常見實例:
require.config({
paths: {
moduleA: '',
moduleB:'',
moduleC:''
}
});
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
1、require.config
require.config用來配置壹些參數,它將影響到requirejs庫的壹些行為。
require.config的參數是壹個JS對象,常用的配置有baseUrl,paths等。
這裏配置了paths參數,使用模塊名“jquery”,其實際文件路徑jquery-1.7.2.js(後綴.js可以省略)。
我們知道jQuery從1.7後開始支持AMD規範,即如果jQuery作為壹個AMD模塊運行時,它的模塊名是“jquery”。註意“jquery”是固定的,不能寫“jQuery”或其它。
註:如果文件名“jquery-1.7.2.js”改為“jquery.js”就不必配置paths參數了。
如果將jQuery應用在模塊化開發時,其實可以不使用全局的,即可以不暴露出來。需要用到jQuery時使用require函數即可。
2、require()函數
require()函數接受兩個參數。第壹個參數是壹個數組,表示所依賴的模塊,上例就是['moduleA', 'moduleB',
'moduleC'],即主模塊依賴這三個模塊;第二個參數是壹個回調函數,當前面指定的模塊都加載成功後,它將被調用。加載的模塊會以參數形式傳入該函數,從而在回調函數內部就可以使用這些模塊。