瀏覽器端模塊加載器AMD和CMD

1.AMD 異步模塊定義

AMD：瀏覽器端模塊化開發(fā)的規(guī)范。使用AMD規(guī)范快發(fā)需要用到對應(yīng)的庫函數(shù)RequireJs隆箩，也即AMD是RequireJs在推廣過程中對模塊定義的規(guī)范化的產(chǎn)出琅锻。

RequireJs主要解決兩個問題：

多個js文件依賴性宵呛，也即多個有依賴性的js文件唐瀑，會出現(xiàn)被依賴的文件需要早于依賴它的文件加載到瀏覽器中隆夯，但是如果當依賴關(guān)系比較復(fù)雜的時候，代碼的編寫和維護就變得很復(fù)雜了昂芜。
js加載的時候莹规，瀏覽器會停止網(wǎng)頁渲染，加載文件越多泌神，頁面失去響應(yīng)的時間就會越長良漱。

RequireJs作用：

管理模塊之間的依賴性舞虱，便于代碼的編寫和維護
實現(xiàn)js文件的異步加載，避免網(wǎng)頁失去響應(yīng)

RequireJs使用:

下載
- 官網(wǎng)地址：https://requirejs.org/
引用
- ```
<script src="js/require.js"><script>;// 假定下載后的require.js文件放于js目錄下
```
  由于采用以上方式也會在加載js文件時造成網(wǎng)頁失去響應(yīng)母市，解決方法：
  - 把其放于網(wǎng)頁底部加載
  - 為其添加async屬性：該屬性表明這個文件需要異步加載矾兜，避免網(wǎng)頁失去響應(yīng)
```
<script src="js/require.js" defer async="true"><script>;
```
    由于IE不支持這個屬性，只支持defer患久，也需要加上defer
加載自己寫的js文件
```
<script src="js/require.js" data-main="js/main"><script>;
```
- data-main屬性作用：指定網(wǎng)頁的主模塊焕刮，默認后綴名是js，可以不用加上js后綴墙杯。
- main.js此時會被require.js第一個加載。
AMD模塊規(guī)范寫法
- 模塊必須采用特定的define()函數(shù)來定義
- 如果一個模塊不依賴其他模塊
  - 直接將其定義在define()函數(shù)之中
```
// /js/test.js
define(function() {
    var sayHello = function() {
        console.log('hi');
    }
    return {
        sayHello: sayHello
    }
})
```
  - 加載
```
// /js/main.js
require(['test'],function(test){
    test.sayHello();
})
```
    第一個參數(shù)是需要加載模塊數(shù)組括荡，采取異步加載的方式高镐，當模塊加載完成之后將模塊導(dǎo)出對象傳入第二個參數(shù)作為形參，第二個參數(shù)當模塊被加載完成之后進行調(diào)用
- 如果一個模塊依賴其他模塊
  - 第一個參數(shù)是所依賴的模塊數(shù)組畸冲，第二個參數(shù)是當前模塊所要有的邏輯實現(xiàn)
```
// /js/pra.js
define(['other'],function(other) {
    //... code
})
```
    其中兩個參數(shù)的用法與require加載模塊是一樣的原理
  - 那如何找到模塊的呢嫉髓？
    
    以require加載為例:
    
    默認情況下，require.js假定模塊與main.js在同一個目錄下邑闲，文件名為test.js算行，然后自動加載。但是如果是其他路徑下的模塊呢苫耸？此時可以使用require.config()對模塊加載行為進行自定義州邢。
    
    require.config()寫在當前主模塊main.js頭部。參數(shù)是一個對象褪子，paths屬性指定各個模塊加載路徑
    - 文件與main.js同一目錄
```
require.config({
    paths: {
        'test': 'test.js'
    }
})
```
    - 文件與main.js不同目錄
      
      第一種寫法：直接寫路徑
```
require.config({
    paths: {
        'test': '../lib/test.js';// 也可以直接寫絕對路徑量淌，包括網(wǎng)址也可以
    }
})
```
      第二種：改變基目錄（baseUrl）
```
require.config({
    baseUrl: '../lib'
    paths: {
        'test': 'test.js'
    }
})
```

2.CMD 通用模塊定義

類似于AMD，CMD有個瀏覽器的實現(xiàn)：SeaJs嫌褪，SeaJs要解決的問題和RequireJs一樣呀枢，只不過模塊加載時機不一樣。且SeaJs推崇一個模塊一個文件笼痛。

官方地址：https://www.zhangxinxu.com/sp/seajs/

語法與Require.js類似裙秋，就不在此處再贅述了

3.AMD和CMD區(qū)別

兩個最明顯的區(qū)別在于模塊定義時對依賴的處理不同:

AMD推崇前置依賴，在定義模塊的時候就要聲明其依賴的模塊
CMD推崇就近依賴缨伊，只有在用到某個模塊的時候再去require

也即AMD提前執(zhí)行摘刑，CMD延遲執(zhí)行

最后編輯于：2021.03.15 14:18:03

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者