模塊化解決的問(wèn)題
- 全局變量的災(zāi)難.
- 函數(shù)命名沖突
- 依賴關(guān)系不好管理
模塊化發(fā)展過(guò)程中的 7 種方式
- 一個(gè)文件、一個(gè)函數(shù)都可以被稱為模塊。
1. 單例模式（命名空間）
var fnObj={//減少 Global 上的變量數(shù)目，安全性低（對(duì)象可以被操作）
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（第三方模塊過(guò)多的話難以維護(hù)，請(qǐng)求過(guò)多，加載順序問(wèn)題等。。）
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
單個(gè)導(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模塊管理 大勢(shì)所趨(大而全，用于比較大的項(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的趨勢(shì))
//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 用來(lái)加載代碼，而 exports 和 module.exports 則用來(lái)導(dǎo)出代碼
- exports 和 module.exports區(qū)別
module.exports 初始值為一個(gè)空對(duì)象 {}
exports 是指向的 module.exports 的引用
require() 返回的是 module.exports 而不是 exports
exports.png
如果a頁(yè)面有代碼，b頁(yè)面需要調(diào)用a頁(yè)面的代碼，在b頁(yè)面 var b=require(./a) 通過(guò)絕對(duì)路徑找到a文件。require()這個(gè)方法會(huì)讓路徑找到的代碼執(zhí)行一遍。在b頁(yè)面中如果console.log(b)，b相當(dāng)于接收了這個(gè)方法的返回值。--> 每一個(gè)js文件生成的閉包都是 :
(function (exports,require,module,__dirname,__filename) {
//模塊化 返回對(duì)象 暴露接口
//__dirname __filename 是通過(guò)外界傳進(jìn)來(lái)的，所以可以在文件中訪問(wèn)
exports = module.exports = {};
return module.exports;
//如果導(dǎo)出的是引用數(shù)據(jù)類型 用module.exports =Function
})();
// 返回值是 return module.exports就是一個(gè)空對(duì)象.如果不想返回一個(gè)空對(duì)象，需要在a頁(yè)面中把module.exports改了。
exports = module.exports = somethings
等價(jià)于
module.exports = somethings
exports = module.exports
原理很簡(jiǎn)單，即 module.exports 指向新的對(duì)象時(shí)，exports 斷開(kāi)了與 module.exports 的引用，那么通過(guò) exports = module.exports 讓 exports 重新指向 module.exports 即可。
詳解ES6 MODULE(前端模塊化的趨勢(shì)，其他的遲早淘汰)
http://www.itdecent.cn/p/d49c4427a442#module
NPM是世界中最流行的js模塊管理平臺(tái)
- 官網(wǎng)：https://www.npmjs.com/
- 使用：
1. 初始化項(xiàng)目:npm init
2. 下載模塊:npm install
3. npm與package.json : http://www.itdecent.cn/p/b33646395dd2
模塊化工具webpack
參閱：http://www.itdecent.cn/p/5352110fe626
前端模塊化與組件化
- 在程序代碼可以通過(guò)模塊化進(jìn)行解耦后，組件化開(kāi)發(fā)便能借此進(jìn)一步推進(jìn)項(xiàng)目程序的工程化進(jìn)度。而組件化開(kāi)發(fā)更是模塊化開(kāi)發(fā)的高級(jí)體現(xiàn)。同一內(nèi)容塊可以抽象化為一個(gè)組件，并在生產(chǎn)中重復(fù)使用，配合虛擬滾動(dòng)視圖，更好的發(fā)揮瀏覽器的性能。
- 在Vue.js和React這兩個(gè)框架中，模塊化和組件化結(jié)合的思想有著很好的體現(xiàn)。
- 區(qū)別：
- 組件化更多關(guān)注的是UI部分，你看到的一個(gè)管理界面的彈出框，頭部，內(nèi)容區(qū)，確認(rèn)按鈕和頁(yè)腳都可以是個(gè)組件，這些組件可以組成一個(gè)彈出框組件，跟其他組件組合又是一個(gè)新的組件。
- 模塊化側(cè)重于功能或者數(shù)據(jù)的封裝，一組相關(guān)的組件可以定義成一個(gè)模塊，一個(gè)暴露了通用驗(yàn)證方法的對(duì)象可以定義成一個(gè)模塊，一個(gè)全局的json配置文件也可以定義成一個(gè)模塊。
組件化和模塊化.jpg
eg.jpg
