1.什麼是模塊化？
模塊指的是具有相同屬性和行爲的事物的集合。
在前端中，我們習慣將一些屬性比較類似和行爲比較類似的內容放在同一個js文件裏面，把這個js文件稱爲模塊。
目的：爲了分工及協作，使每個js文件只關注自身關注的事情，讓每個js文件各行其職。
解決了js之間相互調用問題
2.什麼是commonjs規範
模塊化指的就是遵守commonjs規範，解決不同js模塊之前相互調用問題
commonJs規範：
(1).如果我想在一個A.js文件中調用另一個B.js文件，一定要在A.js中require('B.js');
(2).另一個被調用的B.js一定要對外提供接口 module.exports = 接口
webpack最核心的是它的加載器 ---loaders:
css style-loader, css-loader
//script script-loader,coffee-loader,jsx-loader(jsx-loader對任何原生js都可以)
//es6支持babel-loader
怎麼減少webpack太大這個問題呢？
減少公共的依賴，把一些公共的部分抽取出來比如css
webpack優點：
只要暴露了接口，可以隨時調用
3.模塊化工具gulp+browserify,webpack基於node進行模塊化seajs
模塊化最核心價值在於解決不同文件之間分工和協作，解決相互之間調用相互依賴的關係
gulp+browserify步驟：
a: npm install gulp --save -dev
b: npm install browserify --save -dev
c: npm install vinyl-source-stream --save-dev 文件流輸出工具
d: 在gulpfile.js裏面編寫任務實現模塊化
gulp本身沒有模塊化功能，他藉助第三方相關插件（插件資源相當龐大哦~~）
gulp+browserify：實現模塊化整合的過程和webpack一樣，就是將相互之間有調用關係的文件整合在一個大的js文件裏面（webpack中是整合在bundle.js中，gulp+browserify也是自動整合到一個js文件中）
對比gulp,webpack之間的區別：
a: gulp本身沒有一些功能，只能依賴於插件
b: webpack 本身就可以檢測當前項目裏面文件變化
c: webpack -w 實時監聽當前項目下面的js文件變化
d: webpack -p 直接對資源進行壓縮（資源壓縮）
共性：
I： 首先讀取入口文件，可以自動識別相互之間的調用關係
II：將所有依賴關係的文件都整合到了一個大js文件裏
4.seajs:
seajs與requirejs 聲明方式都十分類似 （兩者都是前端實現代碼模塊化，相當於一個前端的js模塊化加載器，他倆和webpack是不一樣的，webpack是通過nodejs將文件打包成完整的大文件【服務端進行整合】）
CMD規範：common module define 同步的 seaJS 遵循 CMD
AMD規範：async module define 異步的 requireJS遵循AMD
功能和webpack，gulp browserif類似，都可以實現模塊化
webpack 遵循 commJs 規範 基於服務端的（基於node.js）
AMD 與 CMD 的區別：
1.對於依賴的模塊，CMD 是延遲執行，AMD
是提前執行。
2. CMD 推崇依賴就近，AMD
推崇依賴前置。
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此處略去 100 行
var b = require('./b') // 依賴可以就近書寫
b.doSomething()
// ...
})
// AMD 默認推薦的是
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
a.doSomething()
// 此處略去 100 行
b.doSomething()
...
})
seajs聲明模塊的時候：
①：首先要去define
②：在define中寫一個回調函數三個值（require，exports，module）
5.模塊化案例 前端mvc架構
Vue 組件化&模塊化，react模塊化， nodejs編程時，每個文件都是模塊
A: 什麼是MVC?
後端開發一種概念（很久之前是沒有前端這個職位的）
view ------> html + js + css +img
controller ------>控制層
model ------>數據模型
model view controller
演變了一套MVC體系：
view (html +css +js)
controller(專注於實現服務和邏輯控制的層面叫做控制器)
//service (業務控制層) 如果用angely 時會用到這一層
model (數據變量||ajax從服務端取回的數據)
B:MVC有什麼優勢？爲什麼使用MVC
體現了一種分層概念，讓每個層面只做自己該做行爲，減少代碼耦合和冗餘
C:如何去構建MVC
基於webpack搭建一個MVC的架構
view ------ 寫靜態頁面 css js img 效果
controller------ 監聽頁面中請求和事件，處理請求和事件，controller 訪問 model,得到數據，在綁定到頁面裏面
model -----只負責對外提供一些數據
controller.js:
//控制層主要是檢測view上面任何事件行爲，以及對view中任何事件行爲進行處理和響應
var btn =document.getElementById("btn");
btn.addEventListener('touchend',function(){
//1.點擊以後查詢model裏面的數據 ，調用model裏面的數據接口
var _model = require('../mode/model.js');
_model(function(res){
//2.得到model數據
res = JSON.parse(res);
//3.將數據關聯到頁面上
var str =' ';
for(var i=0;i<res.length;i++){
str+=‘<div><img src="'+res[i].goodsImg+'"/><span>'+res[i].goodsName+'</span></div>’
}
document.getElementsByClassName("list")[0].innerHTML = str;
});
model.js:
/*
* 引入rest.js作爲ajax訪問工具(rest.js)是之前寫的ajax的一個插件
* model.js 裏面引用rest.js API
*/
var rest = require('./rest.js');
/*
* 函數queryList被controller所調用(需要暴露接口)
*/
var quaryList = function(fn){
var service ="http://10.9.166.7:3000/query";
rest.get(service,function(response){
fn(response);
});
}
module.exports = queryList;});
view:
