模塊化解決的問題
- 全局變量的災(zāi)難.
- 函數(shù)命名沖突
- 依賴關(guān)系不好管理
模塊化發(fā)展過程中的 7 種方式
- 一個文件、一個函數(shù)都可以被稱為模塊仇奶。
1. 單例模式（命名空間）
var fnObj={//減少 Global 上的變量數(shù)目整陌，安全性低（對象可以被操作）
foo:function(){...},
bar:function(){...}
}
fnObj.foo();
2. 閉包:保護(hù)里邊的變量不被外界干擾
var Module=(function(){
var aaa=111;
var foo=function(){
return aaa；
}
return foo//暴露接口
})()
Module.aaa//undefined
Module.foo()//111;
3. 引入第三方依賴文件，例如jq（第三方模塊過多的話難以維護(hù)她奥，請求過多，加載順序問題等怎棱。哩俭。）
var Module = (function($){
var _$body = $("body"); // 使用jq
var foo = function(){
console.log(_$body); // 特權(quán)方法
}
return {
foo: foo
}
})(jQuery)
Module.foo();
4. common.js (node的模塊化方式)
// math.js
單個導(dǎo)出
exports.add = function(a, b){
return a + b;
}
//批量導(dǎo)出
var add=function(){...}
var reduce=function(){...}
module.exports={
add,
reduce,
}
// main.js
var math = require('math') // ./math in node
console.log(math.add(1, 2)); // 3
5. AMD/CMD 瀏覽器環(huán)境模塊化方案（基本淘汰）
AMD----requireJS
CMD----SeaJS
6. webpack模塊管理 大勢所趨(大而全，用于比較大的項(xiàng)目)
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}{,
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader'
}]
}}
}
7. ES6 MODULE（使用babel將es6 轉(zhuǎn)化成 es5 ）
// math.js
export default math = {//導(dǎo)出模塊
PI: 3.14,
foo: function(){}
}
// app.js
import math from "./math";//引入模塊
math.PI
詳解commonJS(后端NODE的趨勢)
//sum.js導(dǎo)出sum
exports.sum = function(){...做加操作..};
//calculate.js引入sum 并導(dǎo)出add
var math = require('sum');
exports.add = function(n){
return math.sum(val,n);
};
- require 用來加載代碼拳恋，而 exports 和 module.exports 則用來導(dǎo)出代碼
- exports 和 module.exports區(qū)別
module.exports 初始值為一個空對象 {}
exports 是指向的 module.exports 的引用
require() 返回的是 module.exports 而不是 exports
exports.png
如果a頁面有代碼凡资，b頁面需要調(diào)用a頁面的代碼，在b頁面 var b=require(./a) 通過絕對路徑找到a文件谬运。require()這個方法會讓路徑找到的代碼執(zhí)行一遍隙赁。在b頁面中如果console.log(b)，b相當(dāng)于接收了這個方法的返回值梆暖。--> 每一個js文件生成的閉包都是 :
(function (exports,require,module,__dirname,__filename) {
//模塊化 返回對象 暴露接口
//__dirname __filename 是通過外界傳進(jìn)來的伞访，所以可以在文件中訪問
exports = module.exports = {};
return module.exports;
//如果導(dǎo)出的是引用數(shù)據(jù)類型 用module.exports =Function
})();
// 返回值是 return module.exports就是一個空對象.如果不想返回一個空對象，需要在a頁面中把module.exports改了轰驳。
exports = module.exports = somethings
等價于
module.exports = somethings
exports = module.exports
原理很簡單厚掷，即 module.exports 指向新的對象時，exports 斷開了與 module.exports 的引用级解，那么通過 exports = module.exports 讓 exports 重新指向 module.exports 即可冒黑。
詳解ES6 MODULE(前端模塊化的趨勢，其他的遲早淘汰)
http://www.reibang.com/p/d49c4427a442#module
NPM是世界中最流行的js模塊管理平臺
- 官網(wǎng)：https://www.npmjs.com/
- 使用：
1. 初始化項(xiàng)目:npm init
2. 下載模塊:npm install
3. npm與package.json : http://www.reibang.com/p/b33646395dd2
模塊化工具webpack
參閱：http://www.reibang.com/p/5352110fe626
前端模塊化與組件化
- 在程序代碼可以通過模塊化進(jìn)行解耦后勤哗，組件化開發(fā)便能借此進(jìn)一步推進(jìn)項(xiàng)目程序的工程化進(jìn)度抡爹。而組件化開發(fā)更是模塊化開發(fā)的高級體現(xiàn)。同一內(nèi)容塊可以抽象化為一個組件芒划，并在生產(chǎn)中重復(fù)使用冬竟，配合虛擬滾動視圖欧穴，更好的發(fā)揮瀏覽器的性能。
- 在Vue.js和React這兩個框架中诱咏，模塊化和組件化結(jié)合的思想有著很好的體現(xiàn)苔可。
- 區(qū)別：
- 組件化更多關(guān)注的是UI部分，你看到的一個管理界面的彈出框袋狞，頭部焚辅，內(nèi)容區(qū)，確認(rèn)按鈕和頁腳都可以是個組件苟鸯，這些組件可以組成一個彈出框組件同蜻，跟其他組件組合又是一個新的組件。
- 模塊化側(cè)重于功能或者數(shù)據(jù)的封裝早处，一組相關(guān)的組件可以定義成一個模塊湾蔓，一個暴露了通用驗(yàn)證方法的對象可以定義成一個模塊，一個全局的json配置文件也可以定義成一個模塊砌梆。
組件化和模塊化.jpg
eg.jpg
