歡迎訪問(wèn)我的博客https://qqqww.com/泰偿，祝所有碼農(nóng)同胞們?cè)缛兆呱先松鷰p峰微驶，迎娶白富美~~
@[TOC]
1 前言
前段時(shí)間做的項(xiàng)目银舱，其中也用到了模塊化編程的思路屑咳，所以就想來(lái)總結(jié)下，方便以后使用柑蛇，歡迎道友們踩點(diǎn)
1.1 什么是模塊化
將一個(gè)項(xiàng)目按照功能劃分芥挣，理論上一個(gè)功能一個(gè)模塊，互不影響耻台，在需要的時(shí)候載入空免，盡量遵循高內(nèi)聚低耦合，關(guān)于高內(nèi)聚低耦合可以看我的另一篇博客ES6中的Symbol中的章節(jié)
1.4中有對(duì)耦合性和內(nèi)聚性的解釋
1.2 引入模塊化的意義
以往在
javascript中盆耽，沒(méi)有明確的模塊化的概念蹋砚，不能夠?qū)⒁粋€(gè)大的項(xiàng)目分成一些相互依賴(lài)的小文件，這對(duì)于項(xiàng)目的開(kāi)發(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相當(dāng)于下載文檔匙姜，且當(dāng)執(zhí)行src嵌入文件時(shí)畅厢，下面的程序都不會(huì)執(zhí)行，將src指向的內(nèi)容嵌入到文檔標(biāo)簽所在位置氮昧，向更加深入理解移步這里src和href的區(qū)別- 那么我們理解了
src是直接嵌入內(nèi)容到指定標(biāo)簽之后再去加載很多js文件，就會(huì)知道浦楣，它會(huì)產(chǎn)生很多問(wèn)題：
- 變量沖突袖肥，腳本過(guò)多，不利于維護(hù)等
- 必須按照嚴(yán)格的依賴(lài)文件順序
src對(duì)文件的加載時(shí)必須要將當(dāng)前src加載的文件加載完成才會(huì)執(zhí)行下面的代碼振劳，當(dāng)過(guò)多的腳本載入頁(yè)面椎组，就增加了頁(yè)面等待時(shí)間，影響用戶(hù)體驗(yàn)
由于諸如以上的原因历恐，引入模塊化的解決方案
2 CommonJS
請(qǐng)移步我的另一篇博客模塊化開(kāi)發(fā)之CommonJS規(guī)范
3 AMD 規(guī)范
請(qǐng)移步我的另一篇博客模塊化開(kāi)發(fā)之AMD規(guī)范
4 CMD規(guī)范
請(qǐng)移步我的另一篇博客模塊化開(kāi)發(fā)之CMD規(guī)范
5 AMD VS CMD
-
依賴(lài)規(guī)范：
AMD依賴(lài)RequireJS寸癌，而CMD依賴(lài)SeaJS -
依賴(lài)模塊：
AMD是提前執(zhí)行专筷，CMD是延遲執(zhí)行，不過(guò)RequireJS從2.0開(kāi)始蒸苇，也改成可以延遲執(zhí)行（根據(jù)寫(xiě)法不同磷蛹，處理方式不同） -
API職責(zé)：
AMD的API默認(rèn)是一個(gè)當(dāng)多個(gè)用，CMD的API嚴(yán)格區(qū)分溪烤，推崇職責(zé)單一味咳，比如AMD里，require分全局require和局部require檬嘀，都叫require槽驶。CMD里，沒(méi)有全局require鸳兽，而是根據(jù)模塊系統(tǒng)的完備性掂铐，提供seajs.use來(lái)實(shí)現(xiàn)模塊系統(tǒng)的加載啟動(dòng)。CMD里揍异，每個(gè)API都簡(jiǎn)單純粹
6 ES6中的Module
請(qǐng)移步我的另一篇博客ES6中Module語(yǔ)法與加載實(shí)現(xiàn)
7 ES6 中的模塊與 CommonJS 模塊差異
-
CommonJS模塊輸出的是一個(gè)值的拷貝全陨，ES6模塊輸出的是值的引用 -
CommonJS模塊是運(yùn)行時(shí)加載，其中的require全部下載模塊蒿秦，ES6模塊是編譯時(shí)輸出接口烤镐，其中的import可以按需加載
9 參考文章
- 阮一峰老師的module語(yǔ)法
- 玉伯大大的AMD 和 CMD 的區(qū)別有哪些？
