1. 程式人生 > >關於AMD(異步加載模塊)和CMD(同步加載模塊),require.js

關於AMD(異步加載模塊)和CMD(同步加載模塊),require.js

一個數 全局 瀏覽器 加載模塊 cal efi 實戰 意思 環境

1.CommonJS,有一個全局性方法require(),用於加載模塊。假定有一個數學模塊math.js,就可以像下面這樣加載。

 var math = require(‘math‘);

然後,就可以調用模塊提供的方法:

  var math = require(‘math‘);

  math.add(2,3); // 5

第二行math.add(2, 3),在第一行require(‘math‘)之後運行,因此必須等math.js加載完成。也就是說,如果加載時間很長,整個應用就會停在那裏等。

這對服務器端不是一個問題,因為所有的模塊都存放在本地硬盤,可以同步加載完成,等待時間就是硬盤的讀取時間。但是,對於瀏覽器,這卻是一個大問題,因為模塊都放在服務器端,等待時間取決於網速的快慢,可能要等很長時間,瀏覽器處於"假死"狀態。

因此,瀏覽器端的模塊,不能采用"同步加載"(synchronous),只能采用"異步加載"(asynchronous)。這就是AMD規範誕生的背景。

2:AMD是"Asynchronous Module Definition"的縮寫,意思就是"異步模塊定義"。它采用異步方式加載模塊,模塊的加載不影響它後面語句的運行。所有依賴這個模塊的語句,都定義在一個回調函數中,等到加載完成之後,這個回調函數才會運行。

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

關於AMD(異步加載模塊)和CMD(同步加載模塊),require.js