前端進階課程之模組化(三)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關鍵字就犧牲了效能,帶了方便就是書寫的方便,
我們不用考慮提前引入哪些模組,只需要直接寫程式碼,然後寫著寫著,發現這段程式碼需要引入其他模組,然後直接在此處引入其他模組即可)

複製程式碼

相關文章