一丹壕、什么是模塊漫仆？
定義：具有相同屬性和行為的事物的集合
在前端中：將一些屬性比較類似和行為比較類似的內(nèi)容放在同一個js文件里面，把這個js文件稱為模塊
目的：為了每個js文件只關(guān)注與自身有關(guān)的事情，讓每個js文件各行其職
二、什么是模塊化烘苹？CommonJS是什么？AMD和CMD又是什么蝇刀？
①模塊化：指的就是遵守commonjs規(guī)范螟加，解決不同js模塊之間相互調(diào)用問題
②CommonJS：
- A.js文件中調(diào)用另一個B.js文件徘溢，一定要在A.js中引入B.js
require("B.js");
- 另一個被調(diào)用的js吞琐，也就是B.js一定要對外提供接口。
module.exports=B;
過程如下：
B.js
javascript
var b = "Hello,I'm module B.";
module.exports = b;//暴露一個接口然爆，與b對接站粟。這個接口既可以是函數(shù)，也可以是對象曾雕，甚至是數(shù)組奴烙。
A.js
javascript
var _b = require("./B.js");//實際過程中應(yīng)當(dāng)是B.js相對于A.js的路徑，這比使用絕對路徑去獲取要規(guī)范得多
//此時_b獲得了B.js的接口，這個接口指向B.js中的變量b
console.log( _b );//"Hello,I'm module B.";
這就實現(xiàn)了一個簡單的模塊化工作方式切诀，即：
模塊間相互調(diào)用揩环，協(xié)同工作，實現(xiàn)某特定功能幅虑。
④AMD規(guī)范：Async Module Define 異步模塊聲明
⑤CMD規(guī)范：Common Module Define 公共模塊聲明
⑥模塊化的核心價值：模塊化最核心的價值在于解決不同文件之間的分工和調(diào)用問題丰滑，即依賴關(guān)系。
三倒庵、模塊化的一些工具
gulp + browerify
構(gòu)建步驟：
- 安裝gulp
npm install gulp --save-dev //要安裝全局還是本地依賴根據(jù)實際情況來
- 安裝browserify --save--dev
npm install browserify --save--dev
- 安裝文件輸出流工具
npm install vinyl-source-stream --save-dev
- 在gulpfile里編寫任務(wù)實現(xiàn)模塊化
gulpfile.js
//基本模塊引入
var gulp = require('gulp');
var brow = require('browerify');
var source = require('vinyl-source-stream');
//任務(wù)編寫
gulp.task('bundle', function() {
//將任務(wù)交付給browserify
//brow讀取入口文件后褒墨，能自動查找相互之間有依賴的關(guān)系的模塊
return brow('./entry.js')
.bundle()//輸出一個文件流變量（gulp的工作機制）
.pipe(source('bundle.js'))//將文件流變量輸出為文件
.pipe(gulp.dest('js'));//將文件最終輸出
}
webpack
參考[webpack的配置及使用][1]
requireJS
模塊聲明規(guī)范：AMD
聲明模塊
參數(shù)1：id 是這個模塊的名稱，它是一個可選參數(shù)擎宝，默認(rèn)為require加載此模塊時指定的名稱郁妈，若定義這個參數(shù)，那么這個模塊名應(yīng)當(dāng)為“頂級”的绍申，不允許相對名稱噩咪。
參數(shù)2：數(shù)組，為這個模塊所依賴的其他模塊
匿名函數(shù)參數(shù)：為依賴模塊在這個模塊中的接口失晴，它們是一一對應(yīng)的剧腻，因此即便不需要某個模塊的接口，但若是需要它后面模塊的接口涂屁，那也必須給它增加一個用于占位的參數(shù)书在。
define( 'id', [ 'module1', 'module2' ], function( m1, m2 ) {
return {
arg1: m1,
arg2: m2
}
//返回值即是module3的接口
});
使用步驟
- 下載requireJS
bower install requirejs//根據(jù)個人習(xí)慣選擇下載方式，只要保證后續(xù)引入的路徑正確
- 配置config文件和main.js
config.js
require.config( {
base: '',//引入模塊的起始路徑
//paths對象為要引入的模塊的名稱及路徑拆又，且不需.js后綴儒旬，require默認(rèn)會為文件添加.js后綴
paths: {
'jquery': './jquery-1.11.0'//這就引入了juery作為一個模塊。 PS：jquery自己已經(jīng)實現(xiàn)了AMD帖族，并且'jquery'是一個頂級模塊名栈源。
}
} );
main.js
require(['jquery'], function( $ ) {
$(document).css("background", "#000");//這就實現(xiàn)了引入使用jquery模塊，并用它進行dom操作
});
- 在頁面中引入
<script data-main="./main.js" src="./bower-components/requirejs/dist/require.js></script>
//main即是主邏輯入口文件
SeaJS
模塊聲明規(guī)范：CMD
聲明模塊
define( function( require, exports, module ) {
var c = require('./Controller.js');
c();
})
使用步驟
- 下載seajs
bower install seajs//這里根據(jù)個人習(xí)慣下載seajs的包竖般，只要引入時路徑正確就行
- 配置seajs.config
seajs.config({
base: './', //模塊起始路徑
})
seajs.use('./main');//使用主邏輯入口文件甚垦，相當(dāng)于requirejs中的data-main文件
requireJS和SeaJS都是在前端實現(xiàn)模塊化，相當(dāng)于一個前端的js模塊化加載器涣雕，和webpack不一樣艰亮，webpack是通過nodejs將文件打包的。
四挣郭、模塊化案例
前端mvc架構(gòu)
Vue 組件化&模塊化
React 組件化&模塊化
node.js 每個文件都是模塊
什么是MVC
后端開發(fā)的一種概念
即view( html + js + css + img ) + controller( 控制層 ) + model( 數(shù)據(jù)模型 )
前端演變了一套MVC體系：
veiw( html + css + js )
寫靜態(tài)頁面 css迄埃、js、img及效果
controller( 專注于實現(xiàn)服務(wù)和邏輯控制的層面叫做控制器 )
監(jiān)聽頁面中請求和事件兑障，處理請求和事件侄非；向model請求數(shù)據(jù)蕉汪，得到數(shù)據(jù)后綁定到頁面
model ( 數(shù)據(jù)變量 || ajax從服務(wù)端取回的數(shù)據(jù) )
對外提供一些數(shù)據(jù)
體現(xiàn)了一種分層的概念，讓每個層面只做自己該做的行為逞怨，減少代碼耦合和冗余
為什么使用MVC者疤？
低耦合：
MVC將業(yè)務(wù)分為三層，減少了數(shù)據(jù)與業(yè)務(wù)的耦合性叠赦，增強了各層次功能的獨立性宛渐，使得在需求改變時可能只需要改變其中一層就能完成服務(wù)；
復(fù)用性高：
三層業(yè)務(wù)功能分明眯搭，耦合度低窥翩，使各模塊可以獨立完成自身功能，降低了依賴性鳞仙，具有很高的復(fù)用性寇蚊。
利于批量生產(chǎn)和擴展：
復(fù)用性高使得在批量生產(chǎn)的時候可以根據(jù)需求進行模塊的重用，加快了生產(chǎn)效率棍好。并且模塊化使得擴展也非常方便仗岸，模塊只需根據(jù)規(guī)范進行編寫，經(jīng)審核后引入便可以實現(xiàn)擴展借笙。
利于協(xié)作開發(fā)：
擴展性強使協(xié)作開發(fā)也變得非常方便扒怖，每個人根據(jù)自己的分工設(shè)計自己的模塊，不與他人沖突业稼，引入時也各行其職盗痒。
推廣普及度高：
由于對協(xié)作開發(fā)的友好，使得MVC模式大受開發(fā)者的歡迎低散，使用這個模式的產(chǎn)品的推廣和普及變得容易得多俯邓。
