前端進階課程之模組化（三）CMD規範

沉默抒懷者發表於2018-11-23
前端

一：sea.js

疑問：為什麼會出現CMD規範？為什麼會出現sea.js，它到底解決了什麼問題？

答案：CMD規範是國內發展起來的，和AMD規範類似，AMD規範有一個require.js的實現，CMD也有一個叫sea.js的實現，這就是他們出現的背景。

至於解決了什麼問題？我們可以暫且認為他和AMD解決的問題是一樣的， 1: 瀏覽器中js檔案的非同步載入，避免的js檔案的阻塞問題 2: 定義了模組之間如何相互依賴，更好的維護檔案程式碼。

這裡就冒出了一個疑問？CMD規範和AMD規範的作用不是一樣嘛，那他倆有什麼區別呢？稍後詳述

二：CMD規範與sea.js的關係

和AMD規範與require.js的關係一樣，CMD是一個規範，sea.js是規範的具體實現。

三：CMD規範程式碼例項

//index.html: 引入sea.js和主入口檔案main.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./sea.js"></script>
<script src="./main.js"></script>
</body>
</html>
複製程式碼
//main.js ,這裡引入了三個模組檔案，
seajs.use(['./lib/a.js', './lib/b.js', './lib/c.js'], function (a, b, c) {
    console.log(a);//{name: 1}
    console.log(b);//{name: 2}
    console.log(c);//{name: 3}
});
複製程式碼
//定義模組檔案
//a.js
define({
    name: 1
});

//b.js
define({
    name: 2
});

//c.js
define({
    name: 3
});

複製程式碼

四：AMD與CMD規範的聯絡與區別

相同點：

思想類似，解決的問題都一樣， 都是非同步載入模組，同時更好的定義了模組之間如何去依賴。

不同點：

1: 模組定義都是採用define()方法，模組引入的api所有不同，但是思想一致，第一個參數列示引入的模組路徑，第二個引數是回撥函式，表示所有模組全部載入完成以後，所呼叫的函式。

AMD規範：採用define去定義模組，採用require(['模組1','模組2'], function() {}) 去引入模組 CMD規範：採用define去定義模組，採用seajs.use('模組1','模組2'], fucntion () {}) 去引入模組

2: 模組載入的時機不同

AMD規範：依賴前置：即在模組中引入其他模組時，必須提前宣告好要引入的模組

//main.js模組
define(['./a', './b'], function(a, b) {

    a.doSomething();

    b.doSomething();

});

說明：
我們分析一下上面的程式碼：
瀏覽器在載入main.js模組時，首先看到了宣告瞭a.js和b.js模組，所以會首先載入這兩個模組，載入完成以後，再執行回撥函式中程式碼。
複製程式碼
CMD規範：依賴就近：即在模組中不需要提起宣告要引入的模組，寫程式碼哪裡用到其他模組，就在哪裡直接引入模組。

//main.js模組
define(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
  var b = require('./b')
  b.doSomething()
})

說明：
我們再來分析一下用cmd規範實現的這段程式碼：
瀏覽器在載入main.js模組時，它會首先遍歷整個檔案中，然後找到所有帶require關鍵字的程式碼，並且載入其對應的模組，所以相對於AMD規範直提前宣告要引用的 模組（依賴前置）而言，
CMD規範 則需要 遍歷 整個檔案，才可以找到需要載入哪些模組 (這一步遍歷整個檔案找requuire關鍵字就犧牲了效能，帶了方便就是書寫的方便，
我們不用考慮提前引入哪些模組，只需要直接寫程式碼，然後寫著寫著，發現這段程式碼需要引入其他模組，然後直接在此處引入其他模組即可）

複製程式碼

相關文章