AMD 模塊化規范 · 前端知識 -- 學習整理

>[success] # AMD 模塊化規范 ~~~ 1.AMD（Asynchronous Module Definition）是 RequireJS 在推廣過程中對模塊定義的規范化產出,。由于不是 JavaScript原生支持，使用AMD規范進行頁面開發需要用到對應的庫函數，也就是require.js（還有個js庫：curl.js） 2.AMD這個規范約定每一個模塊都必須通過 define 這個函數定義，默認可以接收兩個參數，也可以傳遞三個參數： 2.1.第一個參數是模塊的名字； 2.2.第二個參數是一個數組，用于聲明模塊依賴項； 2.3.第三個參數是一個函數，函數的參數與前面的依賴項一一對應，每一項分別為依賴項這個模塊導出的成員，這個函數的作用可以以理解為為當前的這個模塊提供一個私有的空間。如果需要在這個模塊當中向外部導出一些成員，可以通過 return 實現 3.因此可以通過'Require.js' 來進行AMD這種模塊化規范的開發實現 4.絕大多數第三方庫都支持AMD規范，但是AMD使用起來相對復雜，如果項目中的模塊劃分的非常細致的話，模塊JS文件請求頻繁 5.主要有兩個Javascript庫實現了AMD規范：require.js和curl.js。所以需要第三方的庫配合define才好用 ~~~ >[danger] ##### 案例 ~~~ src ├── index.html ├── index.js ├── lib │ └── require.js // 使用require.js 庫 └── modules ├── dataServe.js └── example.js ~~~ * dataServe ~~~ // 導入example define(['example'], function (example) { let msg = "data" function showMsg () { console.log(msg, example.getName()); } return { showMsg } }) ~~~ * example.js ~~~ define(function () { let name = "w" function getName () { return name } return { getName } }) ~~~ * index.js ~~~ (function () { requirejs.config({ paths: { example: './modules/example', dataServe: './modules/dataServe' } }) requirejs(['dataServe'], function (d) { d.showMsg() }) })() ~~~ * index.html ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <script data-main="./index.js" src="lib/require.js"></script> </body> </html> ~~~ >[danger] ##### 運行 ~~~ 1.上面代碼通過模塊化的形式，分為了'dataServe' 和 'example' 兩個模塊，其中'dataServe' 依賴了'example', 在最后整個頁面使用的時候，script 標簽只是引了'index.js'這個入口文件，相對以前的寫法需要依次手動引入'dataServe' 和 'example' 得到了簡化 2.但實際運行的時候還是會加載'dataServe' 和 'example' ，內部幫助自動創建了'script ' ,因此像開頭第四條說的如果項目中的模塊劃分的非常細致的話，模塊JS文件請求頻繁，只是'require.js' 幫助我們根據依賴關系自動創建了script 3.AMD采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行，也就是說當所有'script ' 標簽執行完成后才運行回調函數邏輯 ~~~ * 雖然頁面上只有script index.js 引入但是實際加載'dataServe' 和 'example' 也會請求 ![](https://img.kancloud.cn/7e/a3/7ea363eb7647b3828ae49b0ec808a041_622x127.png) >[danger] #### 優劣 ~~~ 1.依賴前置：提前引入，文件開頭把需要的模塊一次性全部引入，后面直接使用 ? 2.前期消耗比較大，后期執行效率很高 ~~~ >[info] ## 提前擴充 [JavaScript中的AMD和CMD模塊化](http://caibaojian.com/toutiao/6090/)