1. 為什么要使用模塊化但汞？
什么是模塊化：
一個模塊就是實(shí)現(xiàn)特定功能的文件，有了模塊是辕，我們就可以更方便地使用別人的代碼，想要什么功能猎提，就加載什么模塊获三。模塊開發(fā)需要遵循一定的規(guī)范，否則就都亂套了锨苏。-
模塊化的目的：
解決命名沖突 依賴管理 提高代碼可讀性 代碼解耦疙教，提高復(fù)用性
2.CMD、AMD伞租、CommonJS 規(guī)范分別指什么贞谓？有哪些應(yīng)用
-
CommonJS
因?yàn)樵诰W(wǎng)頁端沒有模塊化編程只是頁面JavaScript復(fù)雜邏輯，但也可以工作下去葵诈，在服務(wù)器端卻一定要有模塊裸弦，所以雖然JavaScript在web端發(fā)展這么多年，第一個流行的模塊化規(guī)范卻由服務(wù)器端的JavaScript應(yīng)用帶來作喘，CommonJS規(guī)范是由NodeJS發(fā)揚(yáng)光大理疙，這標(biāo)志著JavaScript模塊化編程正式登上舞臺。1.定義模塊 根據(jù)CommonJS規(guī)范徊都，一個單獨(dú)的文件就是一個模塊沪斟。每一個模塊都是一個單獨(dú)的作用域，也就是說，在該模塊內(nèi)部定義的變量主之，無法被其他模塊讀取择吊，除非定義為global對象的屬性。
2.模塊輸出： 模塊只有一個出口槽奕，module.exports對象几睛，我們需要把模塊希望輸出的內(nèi)容放入該對象。
3.加載模塊： 加載模塊使用require方法粤攒，該方法讀取一個文件并執(zhí)行所森，返回文件內(nèi)部的module.exports對象。
來看個例子：
//模塊定義 myModel,js
var NamePeople = {
name:'zyn',
sayName: function (){
console.log(this.name);
}
}
module.exports = NamePeople
//模塊加載
var p = require('./myModel')
p.sayName();
console.log('123-測試')
不同的實(shí)現(xiàn)對require時的路徑有不同要求夯接，一般情況可以省略js拓展名焕济，可以使用相對路徑，也可以使用絕對路徑盔几，甚至可以省略路徑直接使用模塊名（前提是該模塊是系統(tǒng)內(nèi)置模塊）
仔細(xì)看上面的代碼晴弃，會發(fā)現(xiàn)require是同步的。模塊系統(tǒng)需要同步讀取模塊文件內(nèi)容逊拍，并編譯執(zhí)行以得到模塊接口上鞠。
這在服務(wù)器端實(shí)現(xiàn)很簡單，也很自然芯丧，然而芍阎， 想在瀏覽器端實(shí)現(xiàn)問題卻很多。
瀏覽器端缨恒，加載JavaScript最佳谴咸、最容易的方式是在document中插入script 標(biāo)簽。但腳本標(biāo)簽天生異步骗露，傳統(tǒng)CommonJS模塊在瀏覽器環(huán)境中無法正常加載寿冕。
- AMD
AMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思椒袍。它是一個在瀏覽器端模塊化開發(fā)的規(guī)范
由于不是JavaScript原生支持，使用AMD規(guī)范進(jìn)行頁面開發(fā)需要用到對應(yīng)的庫函數(shù)藻茂，也就是大名鼎鼎RequireJS驹暑，實(shí)際上AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化的產(chǎn)出
requireJS主要解決兩個問題:
1.多個js文件可能有依賴關(guān)系，被依賴的文件需要早于依賴它的文件加載到瀏覽器
2.js加載的時候?yàn)g覽器會停止頁面渲染辨赐，加載文件越多优俘，頁面失去響應(yīng)時間越長
- 來看下AMD規(guī)范在requireJS中的語法:
requireJS定義了一個函數(shù) define，它是全局變量掀序，用來定義模塊
define(id?, dependencies?, factory);
(1)id：可選參數(shù)帆焕，用來定義模塊的標(biāo)識，如果沒有提供該參數(shù)，腳本文件名（去掉拓展名）
(2)dependencies：是一個當(dāng)前模塊依賴的叶雹，已被模塊定義的模塊標(biāo)識的數(shù)組字面量财饥。 依賴參數(shù)是可選的，如果忽略此參數(shù)折晦，它應(yīng)該默認(rèn)為["require", "exports", "module"]钥星。然而，如果工廠方法的長度屬性小于3满着，加載器會選擇以函數(shù)的長度屬性指定的參數(shù)個數(shù)調(diào)用工廠方法
(3)factory：工廠方法谦炒，模塊初始化要執(zhí)行的函數(shù)或?qū)ο蟆Ｈ绻麨楹瘮?shù)风喇，它應(yīng)該只被執(zhí)行一次宁改。如果是對象，此對象應(yīng)該為模塊的輸出值
在頁面上使用require函數(shù)加載模塊
require([dependencies], function(){});
require()函數(shù)接受兩個參數(shù)
(1)第一個參數(shù)是一個數(shù)組魂莫，表示所依賴的模塊还蹲。
(2)第二個參數(shù)是一個回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后豁鲤，它將被調(diào)用秽誊。加載的模塊會以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊
require()函數(shù)在加載依賴的函數(shù)的時候是異步加載的琳骡，這樣瀏覽器不會失去響應(yīng)锅论，它指定的回調(diào)函數(shù)，只有前面的模塊都加載成功后楣号，才會運(yùn)行最易，解決了依賴性的問題。
2.RequireJs遵循AMD規(guī)范的例子：
//index.html
<body>
<script src="js/lib/require.js"></script>
<script>
requirejs.config({
baseUrl:'js',
paths:{'jquery':'lib/jquery'}
})
requirejs(['app/sub'])
</script>
</body>
//sub.js 接口js文件
define(['jquery','com/people'],function($,people){
people.sayName();
people.Age();
})
//people.js 模塊
define(['jquery'],function(){
var name = 'zyn';
var age = 31
function sayName(){
console.log(name);
}
function Age(){
console.log(age)
}
return {
sayName :sayName,
Age : Age
}
})
來詳細(xì)解釋下：
(1)上圖是每個文件及文件夾的位置炫狱；index.html是我們要展示的頁面藻懒；app里方的是我們的模塊入口接口；com里是我們的模塊视译；lib里是我們公用的的js文件
(2) <script src="js/lib/require.js"></script>在頁面上加載對應(yīng)路徑的require.js;也就是./js/lib/require.js嬉荆；
(3)配置requirejs
<script>
requirejs.config({
baseUrl:'js',
paths:{'jquery':'lib/jquery'}
})
requirejs(['app/sub'])
</script>
baseUrl:'js'我們手動配置了基本路徑,即js
paths:{jquery:"lib/jquery"}特殊路徑，即當(dāng)路徑為:lib/jquery時可以替換成jquery;
requirejs(['app/sub'])加載入口模塊酷含；由于我們的基本路徑是js鄙早；所以入口模塊的路徑為./app/sub.
RequireJS默認(rèn)假定所有的依賴資源都是js腳本，因此無需在module ID上再加".js"后綴.
(4)我們把頁面需要的組件都放在了com文件夾里椅亚。
//people.js 模塊
define(['jquery'],function(){
var name = 'zyn';
var age = 31
function sayName(){
console.log(name);
}
function Age(){
console.log(age)
}
return {
sayName :sayName,
Age : Age
}
})
define(['jquery'],function(){中的[jquery]是我們要寫組件依靠的文件jquery文件（這里只是假設(shè)要依靠）限番；根據(jù)配置的基本路徑應(yīng)該是lib/jquery因?yàn)槲覀冊O(shè)置了特殊路徑所以這里可以簡寫為jquery.
(5)
//sub.js 接口js文件
define(['jquery','com/people'],function($,people){
people.sayName();
people.Age();
})
define(['jquery','com/people'],function($,people){['jquery','com/people']是我們要依靠的文件js,function($,people)函數(shù)里定義這兩個相關(guān)聯(lián)的參數(shù)；即：'jquery' =$ ,'com/people' = people;
people.sayName(); people.Age();這樣我們就可以調(diào)用模塊的返回值呀舔；
頁面展示：
頁面加載的文件：
注：這里我們只是利用RequireJS解決了命名的難題弥虐；后面我們會用RequireJS里的r.js打包來解決文件依賴。
- CMD
CMD 即Common Module Definition通用模塊定義，CMD規(guī)范是國內(nèi)發(fā)展出來的霜瘪，就像AMD有個requireJS珠插，CMD有個瀏覽器的實(shí)現(xiàn)SeaJS，SeaJS要解決的問題和requireJS一樣粥庄，只不過在模塊定義方式和模塊加載（可以說運(yùn)行丧失、解析）時機(jī)上有所不同
1.語法
Sea.js 推崇一個模塊一個文件，遵循統(tǒng)一的寫法
deifne(id?,[deps?],factory)
因?yàn)镃MD推崇:
(1)一個文件一個模塊惜互，所以經(jīng)常就用文件名作為模塊id
(2)CMD推崇依賴就近布讹，所以一般不在define的參數(shù)中寫依賴，在factory中寫
factory有三個參數(shù):
(1)require:require 是 factory 函數(shù)的第一個參數(shù),require 是一個方法训堆，接受 模塊標(biāo)識 作為唯一參數(shù)描验，用來獲取其他模塊提供的接口.
(2)exports:exports 是一個對象，用來向外提供模塊接口
(3)module:module 是一個對象坑鱼，上面存儲了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法
2.來看一個例子：（因?yàn)镽equeryJS已經(jīng)兼容CMD規(guī)則這里用的還是RequeryJS主要看下CMD規(guī)則的寫法）
//這里還是模塊people.js改了下數(shù)據(jù)
define(['jquery'],function(){
var name = 'ZYG';
var age = 100
function sayName(){
console.log(name);
}
function Age(){
console.log(age)
}
return {
sayName :sayName,
Age : Age
}
})
//sub.js接口文件的寫法就是CMD規(guī)則膘流；即用到什么模塊的時候var出來再用不用的模塊就不用var出來
define(function(require,exports,module,){
var jquery = require('jquery');
var people = require('com/people');
people.sayName();
people.Age();
})
頁面顯示：
注：現(xiàn)在主要用的的AMD-RequireJs跟CommonJS 因?yàn)镽equeryJS已經(jīng)兼容CMD規(guī)則 所以在REquireJS支持下也可以寫CMD規(guī)則；
3.下面我們用學(xué)到東西寫一個完成的網(wǎng)頁：
//要求：
1. 首屏大圖為全屏輪播
2. 有回到頂部功能
3. 圖片區(qū)使用瀑布流布局（圖片高度不一）鲁沥，下部有加載更多按鈕呼股，點(diǎn)擊加載更多會加載更多數(shù)據(jù)(數(shù)據(jù)在后端 mock)
4. 使用 r.js 打包應(yīng)用
1.先看下文件夾的位置
1.dist 為壓縮好的文件；
2.src 為所有上線前的文件画恰；
2.全局安裝完r.js后進(jìn)行js的文件壓縮出口放入dist/js/index.merge.min.js
1.npm install -g requirejs 安裝完會送一個r.js彭谁。
2.然后定位到j(luò)s目錄下，輸入node r.js -o build.js允扇。
3.壓縮好的js文件生成index.merge.min.js 文件缠局，html引入 <script data-main ='./dist/js/index.merge.min.js' src="src/js/lib/require.js"></script>。
4.注意你的build.js配置的baseUrl指向要跟main.js的指向一樣考润。（如圖）
5.你想r.js做壓縮狭园，還有一個必要條件，得安裝node.js糊治，這個不詳談了唱矛，自己百度谷哥。
3.看下效果
希望對給位朋友有所幫助~~
版權(quán)歸饑人谷--楠柒所有如有轉(zhuǎn)發(fā)請注明出處 謝謝~~
