amd規範&require.js

%就是我發表於2018-08-14
UIJS

AMD是一種為瀏覽器環境設計的一種非同步模組載入規範，

AMD規範全稱是Asynchronous Module Definition，即非同步模組載入機制。從它的規範描述頁面看，AMD很短也很簡單，但它卻完整描述了模組的定義，依賴關係，引用關係以及載入機制。從它被requireJS，NodeJs，Dojo，JQuery使用也可以看出它具有很大的價值，沒錯，JQuery近期也採用了AMD規範。　　作為一個規範，只需定義其語法API，而不關心其實現。

AMD規範簡單到只有一個API，即define函式：
　　define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
　　其中：
　　module-name: 模組標識，可以省略。
　　array-of-dependencies: 所依賴的模組，可以省略。
　　module-factory-or-object: 模組的實現，或者一個JavaScript物件。

require.js

遵循AMD規範，是一種小巧的js模組載入框架，可以執行在瀏覽器以及node環境下，實現模組化載入。

優點：

1、防止js載入阻塞頁面渲染

2、使用程式呼叫的方式載入js，實現非同步載入，按需載入

基本API

定義三個變數：

1、define：定義一個模組

a.js

define(function(){
    function fun1(){
      alert("it works");
    }

    fun1();
})複製程式碼

2、require===require.js，一般使用require更簡短：載入依賴模組，並執行載入完後的回撥函式

通過define函式定義了一個模組，然後再頁面中使用：

require(["js/a"]);複製程式碼

來載入該模組(

注意require中的依賴是一個陣列，即使只有一個依賴，你也必須使用陣列來定義

)，require API的第二個引數是callback，一個function，是用來處理載入完畢後的邏輯，如：

require(["js/a"],function(){
    alert("load finished");
})複製程式碼


相關文章