初步理解require.js模塊化編程

初步理解require.js模塊化編程

1、Javascript模塊化編程

　　目前，通行的Javascript模塊規範共有兩種：CommonJS和AMD。

一、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()用於加載模塊就好了。

二、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的用法，以及如何將模塊化編程投入實戰。

2、requirejs模塊化編程

require.js加載的模塊，採用AMD(異步模塊定義規範) 規範。也就是說，模塊必須按照AMD的規定來寫。

require.js的兩個重要的特色：

一、實現js文件的異步加載，避免網頁失去響應

二、管理模塊之間的依賴性，便於代碼的編寫和維護

加載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 　　

});

一、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函數便可。

二、require()函數

require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的模塊，上例就是['moduleA', 'moduleB', 'moduleC']，即主模塊依賴這三個模塊；第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可使用這些模塊。