為什么要使用模塊化？
模塊化可以使代碼低耦合，功能模塊直接不相互影響。
1.可維護(hù)性：根據(jù)定義，每個(gè)模塊都是獨(dú)立的。良好設(shè)計(jì)的模塊會盡量與外部的代碼撇清關(guān)系，以便于獨(dú)立對其進(jìn)行改進(jìn)和維護(hù)。維護(hù)一個(gè)獨(dú)立的模塊比起一團(tuán)凌亂的代碼來說要輕松很多。
2.命名空間：在JavaScript中，最高級別的函數(shù)外定義的變量都是全局變量（這意味著所有人都可以訪問到它們）。也正因如此，當(dāng)一些無關(guān)的代碼碰巧使用到同名變量的時(shí)候，我們就會遇到“命名空間污染”的問題。
3.可復(fù)用性：現(xiàn)實(shí)來講，在日常工作中我們經(jīng)常會復(fù)制自己之前寫過的代碼到新項(xiàng)目中。
復(fù)制粘貼雖然很快很方便，但難道我們找不到更好的辦法了么？要是……有一個(gè)可以重復(fù)利用的模塊豈不妙哉？
CMD、AMD、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用
Asynchronous Module Definition _（AMD）/（異步模塊定義）【中文文檔】
它推崇依賴前置，采用異步方式加載模塊，模塊的加載不影響它后面語句的運(yùn)行。所有依賴這個(gè)模塊的語句，都定義在一個(gè)回調(diào)函數(shù)中，等到加載完成之后，這個(gè)回調(diào)函數(shù)才會運(yùn)行。
特點(diǎn)/缺點(diǎn)：
1- 依賴前置,需要在定義的時(shí)候，寫好需要的依賴。應(yīng)用有require.js
2- 多個(gè)JS有依賴關(guān)系。被依賴的JS需要早于依賴它的文件提前加入。
3- JS加載的時(shí)候，頁面會停止渲染。加載的文件越多。頁面失去響應(yīng)的時(shí)間越長。
應(yīng)用：Reauire.js
<pre>
`//定義模塊：
define(id ?, dependencies?, function)
//id:可選參數(shù),用來定義模塊標(biāo)識。如果沒有寫，就用文件名。
//denpendencies:當(dāng)前的模塊依賴的模塊，數(shù)組形式。
//function:執(zhí)行的函數(shù)
`</pre>
<pre>//加載模塊 require([dependencies], function) //--------------------------------------------- //dependencies：當(dāng)前模塊需要的依賴的模塊。 //function：回調(diào)函數(shù)，在模塊加載完了后，會被執(zhí)行。 //require是異步執(zhí)行。在依賴模塊沒有被加載完。是不會執(zhí)行回調(diào)函數(shù)的。同時(shí)瀏覽器不會失去響應(yīng)。</pre>
Common Module Definition ——（CMD）
通用模塊定義,是一種模塊定義方式和模塊加載方式的規(guī)范
依賴就近，需要的時(shí)候再引入這個(gè)依賴項(xiàng)，用的時(shí)候再require。
推崇一個(gè)文件一個(gè)模塊，所以經(jīng)常將文件名作為模塊id
因推崇依賴就近，所以一般不在define的參數(shù)中寫依賴，在factory中寫。
應(yīng)用：sea.js
<pre>
define(function(require,exports,module){}) //require:獲取其他的模塊提供的接口。 //exports:對外提供模塊的接口。 //module是個(gè)對象，上面存儲了與當(dāng)前模塊相關(guān)的屬性和方法</pre>AMD與CMD的差別是：AMD是首先加載所有模塊，再執(zhí)行，而CMD是按需加載。AMD依賴前置，js可以方便知道依賴模塊是誰，立即加載；而CMD就近依賴，需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾嚵四切┠K，這也是很多人詬病CMD的一點(diǎn)，犧牲性能來帶來開發(fā)的便利性，實(shí)際上解析模塊用的時(shí)間短到可以忽略。如今requireJS和seaJS都已經(jīng)是過去時(shí)，webpack和Browserify成為主流
**CommonJS **
1-.一個(gè)單獨(dú)的文件就是一個(gè)模塊，每個(gè)模塊都是一個(gè)單獨(dú)的作用域
在模塊內(nèi)部定義的變量，無法被其他模塊讀取，除非定義為global對象的屬性
2-.模塊輸出：模塊只有一個(gè)出口，module.exports對象，我們需要把模塊希望輸出的內(nèi)容放入該對象
3-.加載模塊：加載模塊使用require方法，該方法讀取一個(gè)文件并執(zhí)行，返回 文件內(nèi)部的module.exports對象，如果請求的模塊不能返回，那么”require”必須拋出一個(gè)錯(cuò)誤。
應(yīng)用：因?yàn)閞equire是同步的，所以主要在服務(wù)器端使用
瀏覽器端加載JavaScript是異步的，所以傳統(tǒng)的CommonJS在瀏覽器環(huán)境中無法正常加載。
“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”
首屏大圖為全屏輪播
有回到頂部功能
圖片區(qū)使用瀑布流布局（圖片高度不一），下部有加載更多按鈕，點(diǎn)擊加載更多會加載更多數(shù)據(jù)
使用 r.js 打包應(yīng)用
- 過程：
- 先把獨(dú)立的效果手動封裝模塊化...(抽象)
- 再利用 requireJs 命令壓縮..【Command：
r.js -o build.js】 - 應(yīng)用到文檔..
build.js 文件 配置如下
<pre>({ baseUrl : '../js', //可以理解為下面的所有路徑都基于此之下 paths : { 'jquery' : 'scripts/jquery224.min' //Js路徑 }, name : 'main', // 讀取的文件名 out : '../dist/js/index.merge.min.js' // 壓縮完后輸出到哪去(放在哪) })</pre>main.js 文件配置
<pre>requirejs.config({ baseUrl : '../js', //效果如上 paths : { 'jquery' : 'scripts/jquery224.min' } }); //Load Entry requirejs(['scripts/index']) //主要是來讀取這個(gè)的～</pre>index.js
<pre>`
define(['jquery','com/carouselindex','com/cascadeindex','com/goTop'], function($,Carousel,cascade,GoTop) {
// 'use strict';
carousel.autoGo($('.carousel'))
cascade.autoGo($('.ct-waterfall'))
new GoTop();
});
// 兩種均可～～喜歡Cmd這種用到再 require ..但后面又愛上Amd的簡潔
// define(function(require, exports, module){
// var jQuery = require('jquery');
// var carousel = require('com/carouselindex')
// carousel.autoGo($('.carousel'))
// var cascade = require('com/cascadeindex');
// cascade.autoGo($('.ct-waterfall'));
// var GoTop = require('com/goTop');
// new GoTop();
// })
`</pre>
雖然看似簡單，但還真花了我不少時(shí)間啊。。
應(yīng)該算學(xué)會了打包入門了～～吃飯
