JavaScript AMD規範簡介(一)

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義".

AMD定義了咱們所用的模塊都是是異步加載的,因此咱們要將依賴模塊的代碼片斷要放在一個回調函數中,當異步加載模塊完畢後(也就是此模塊已可用時)觸發回調函數

經常使用的AMD庫有require.js、sea.js

點擊這裏這裏有一個我本身的示例級別的AMD實現

AMD標準中定義瞭如下兩個API

(1) require([module], callback);

(2) define([depends], callback);   

require接口用來加載一系列模塊,define接口用來定義並暴露一個模塊

在AMD中咱們js的代碼都是放在require的回調中的,require函數幫咱們加載依賴的模塊而且處理器深層次的依賴關係(依賴的依賴等等)並在一切依賴加載完畢後,將模塊做爲回調函數的傳參,並調用回調函數.

看如下場景

咱們的js代碼須要B,C模塊.B模塊不依賴於任何模塊,C模塊依賴於D模塊

require([B,C],function(B,C){       
     var A = {};
     A.say = B.say;
     A.run = C.run;
     return A;
});

B.js
define([], function(){
     var B = {};
     B.say = function() {
          console.info('say hello!');
     }
     return B;
});

C.js
define([D], function(D){
     var C={};
     c.run = function() {
          console.info(D.name + ' free running!');
     }
     return C;
})

D.js
define([],function(){
     var D={'name':'songzheng'};
     return D;
});

先假設一切模塊都還未加載,整個加載過程以下

(1)代碼依賴着B、C模塊,調用require加載B、C模塊

(2)B模塊不依賴於任何模塊當加載成功後,回調factoryB,安裝B模塊

(3)在加載C模塊時發現C模塊依賴着D模塊因而調用require加載D模塊

(4)D模塊不依賴任何模塊,加載成功後,回調factoryD加載安裝D模塊

(5)C依賴的D模塊加載成功後,回調factoryC,安裝C模塊

(6)全部依賴安裝完畢,執行回調函數

我在本身的AMD實現的步驟中加了一些日誌打印,能夠更清晰的看到模塊的加載過程

<script type="text/javascript">
     require(['Iris','cookie'], function(Iris, Cookie){
          console.info(Iris);
          console.info(Cookie);
     });
</script>