歡迎訪問我的博客https://qqqww.com/，祝所有碼農(nóng)同胞們早日走上人生巔峰，迎娶白富美~~
@[TOC]
1 前言
前段時間做的項目，其中也用到了模塊化編程的思路，所以就想來總結(jié)下，方便以后使用，歡迎道友們踩點
1.1 什么是模塊化
將一個項目按照功能劃分，理論上一個功能一個模塊，互不影響，在需要的時候載入，盡量遵循高內(nèi)聚低耦合，關(guān)于高內(nèi)聚低耦合可以看我的另一篇博客ES6中的Symbol中的章節(jié)
1.4中有對耦合性和內(nèi)聚性的解釋
1.2 引入模塊化的意義
以往在
javascript中，沒有明確的模塊化的概念，不能夠?qū)⒁粋€大的項目分成一些相互依賴的小文件，這對于項目的開發(fā)就很難受，看看以往我們載入js文件
<script src = '1.js'></script>
<script src = '2.js'></script>
<script src = '3.js'></script>
<script src = '4.js'></script>
<script src = '5.js'></script>
<script src = '6.js'></script>
- 這里解釋一下
src，想必很多人都知道，src相當于下載文檔，且當執(zhí)行src嵌入文件時，下面的程序都不會執(zhí)行，將src指向的內(nèi)容嵌入到文檔標簽所在位置，向更加深入理解移步這里src和href的區(qū)別- 那么我們理解了
src是直接嵌入內(nèi)容到指定標簽之后再去加載很多js文件，就會知道，它會產(chǎn)生很多問題：
- 變量沖突，腳本過多，不利于維護等
- 必須按照嚴格的依賴文件順序
src對文件的加載時必須要將當前src加載的文件加載完成才會執(zhí)行下面的代碼，當過多的腳本載入頁面，就增加了頁面等待時間，影響用戶體驗
由于諸如以上的原因，引入模塊化的解決方案
2 CommonJS
請移步我的另一篇博客模塊化開發(fā)之CommonJS規(guī)范
3 AMD 規(guī)范
請移步我的另一篇博客模塊化開發(fā)之AMD規(guī)范
4 CMD規(guī)范
請移步我的另一篇博客模塊化開發(fā)之CMD規(guī)范
5 AMD VS CMD
-
依賴規(guī)范：
AMD依賴RequireJS，而CMD依賴SeaJS -
依賴模塊：
AMD是提前執(zhí)行，CMD是延遲執(zhí)行，不過RequireJS從2.0開始，也改成可以延遲執(zhí)行（根據(jù)寫法不同，處理方式不同） -
API職責：
AMD的API默認是一個當多個用，CMD的API嚴格區(qū)分，推崇職責單一，比如AMD里，require分全局require和局部require，都叫require。CMD里，沒有全局require，而是根據(jù)模塊系統(tǒng)的完備性，提供seajs.use來實現(xiàn)模塊系統(tǒng)的加載啟動。CMD里，每個API都簡單純粹
6 ES6中的Module
請移步我的另一篇博客ES6中Module語法與加載實現(xiàn)
7 ES6 中的模塊與 CommonJS 模塊差異
-
CommonJS模塊輸出的是一個值的拷貝，ES6模塊輸出的是值的引用 -
CommonJS模塊是運行時加載，其中的require全部下載模塊，ES6模塊是編譯時輸出接口，其中的import可以按需加載
9 參考文章
- 阮一峰老師的module語法
- 玉伯大大的AMD 和 CMD 的區(qū)別有哪些？
