本章要點(diǎn)
1、模塊化編程的概念
2、模塊化編程的優(yōu)勢(shì)
3、模塊化編程的演變
4、常見(jiàn)的處理模塊化的方法
5、全局函數(shù)及函數(shù)作用域
6、對(duì)象命名空間
1、什么是模塊化？
模塊化是一種設(shè)計(jì)思想。利用模塊化可以把一個(gè)非常復(fù)雜的系統(tǒng)細(xì)化到一個(gè)個(gè)具體的功能點(diǎn)，每一個(gè)功能點(diǎn)都可以看做一個(gè)模塊，通過(guò)某種規(guī)則就可以把這些小的模塊組合到一起，構(gòu)成模塊化系統(tǒng)。
規(guī)則：CommonJS規(guī)范
1.1、模塊化開發(fā)的優(yōu)點(diǎn)
1、開發(fā)效率高，方便代碼重用。開發(fā)好的模塊可以直接使用。
2、維護(hù)成本低，在軟件開發(fā)周期中，由于需求的改變，會(huì)對(duì)業(yè)務(wù)邏輯進(jìn)行改動(dòng)，模塊化開發(fā)只針對(duì)特定模塊進(jìn)行維護(hù)。
1.2、非模塊化開發(fā)存在的問(wèn)題
1、命名沖突
在多個(gè)開發(fā)者的項(xiàng)目中，在引入的多個(gè)文件中，會(huì)存在命名沖突的問(wèn)題。
2、文件依賴
在引入的多個(gè)文件中，會(huì)存在多個(gè)文件的依賴，一個(gè)文件的使用，會(huì)用到第三方文件中的內(nèi)容。
1.2.1 命名沖突
在一個(gè)頁(yè)面中引入a.js文件和b.js文件
<!-- 在當(dāng)前頁(yè)面引入a.js和b.js文件 -->
<script src="a.js"></script>
<script src="b.js"></script>
a.js文件內(nèi)容為
// 聲明全局變量
var urlName = "www.baidu.com";
b.js文件內(nèi)容為
// 聲明全局變量
var urlName = "www.jd.com";
所以，在一個(gè)頁(yè)面中分別引入a.js和b.js，就會(huì)造成同名變量“urlName”的命名沖突。因?yàn)閮蓚€(gè)都是全局屬性，后引入的文件就會(huì)覆蓋先引入的文件。
1.2.2 文件依賴
在一個(gè)頁(yè)面引入多個(gè)文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>命名沖突</title>
</head>
<body>
</body>
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<script src="d.js"></script>
<script src="aa.js"></script>
</html>
如上面引入文件所示，基本上不同文件之間是不能體現(xiàn)一個(gè)依賴關(guān)系，如果aa.js文件的執(zhí)行，用到了a.js文件中的變量和方法，在頁(yè)面中是體現(xiàn)不出來(lái)。如果刪掉或漏掉a.js文件的引入，那么此頁(yè)面執(zhí)行就會(huì)報(bào)錯(cuò)。
2、模塊化編程的演變
在使用非模塊化編程模式時(shí)，越大型的網(wǎng)站或項(xiàng)目，命名沖突或文件依賴度越高。這樣頁(yè)面代碼的復(fù)用和維護(hù)就會(huì)變得越來(lái)越困難。
2.1全局函數(shù)
在javascript中，函數(shù)內(nèi)部聲明的變量是局部變量，函數(shù)外部聲明的變量是全局變量。
在全局聲明的函數(shù)就是全局函數(shù)，在全局聲明的所有函數(shù)，都是window對(duì)象下的方法。
<script>
// 聲明全局函數(shù)
function fn (){
// 函數(shù)體
}
</script>
全局函數(shù)這種編程方式不可取，因?yàn)樗械淖兞亢秃瘮?shù)都暴露在全局，無(wú)法保證全局變量不與其它模塊的變量發(fā)生沖突。
2.2對(duì)象命名空間
對(duì)于開發(fā)中使用全局函數(shù)出現(xiàn)的命名沖突問(wèn)題，可以使用對(duì)象的命名空間來(lái)解決。
// 對(duì)象命名空間
var calculator = {};
// 加法
calculator.add = function(a,b){
return a + b;
}
// 減法
calculator.subtract = function(a,b){
return a - b;
}
// 乘法
calculator.multiply = function(a,b){
return a * b;
}
// 除法
calculator.divide = function(a,b){
return a / b;
}
由上面的代碼可以知道哪些函數(shù)屬于同一模塊，對(duì)于聲明的四個(gè)函數(shù)也相應(yīng)的減少了命名沖突的可能。這僅僅是理論上減少了命名的沖突，命名沖突仍然存在，會(huì)在聲明同樣的對(duì)象名稱和函數(shù)名稱時(shí)，才會(huì)出現(xiàn)命名沖突。
2.3、函數(shù)作用域（閉包）
全局函數(shù)和對(duì)象的命名空間都不能很好的解決命名沖突的問(wèn)題，而且在開發(fā)過(guò)程中，有一些不想被外部訪問(wèn)的私有屬性該怎么處理。
1、javascript通過(guò)封裝函數(shù)的私有空間，讓一些屬性和方法私有化，也就是所謂的**閉包**。
2、JavaScript函數(shù)作用域的特點(diǎn)，通過(guò)匿名自執(zhí)行函數(shù)，進(jìn)行私有變量分離。
<body>
<input type="text" id="a">
<select id="opt">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" id="b">
<button id="cal">=</button>
<input type="text" id="result">
</body>
<script>
// 匿名自執(zhí)行函數(shù)封閉函數(shù)作用域空間，達(dá)到私有化目的
var calcutor = (function(){
function add(a,b) {
return parseInt(a) + parseInt(b);
};
function subtract(a,b){
return parseInt(a) - parseInt(b);
};
function multiply(a,b){
return parseInt(a) * parseInt(b);
};
function divide(a,b){
return parseInt(a) / parseInt(b);
};
return {
add: add,
subtract: subtract,
multiply: multiply,
divide: divide
}
})();
// 獲取所有的DOM元素
var oA = document.getElementById("a");
var oB = document.getElementById("b");
var opt = document.getElementById("opt");
var oCal = document.getElementById("cal");
var oResult = document.getElementById("result");
// 綁定點(diǎn)擊事件
oCal.onclick = function(){
var a = oA.value.trim();
var b = oB.value.trim();
var option = opt.value;
var result = 0;
switch(option){
case '0':
result = calcutor.add(a,b);
break;
case '1':
result = calcutor.subtract(a,b);
break;
case '2':
result = calcutor.multiply(a,b);
break;
case '3':
result = calcutor.divide(a,b);
break;
default:
result = 0;
break;
}
oResult.value = result;
}
</script>
用于計(jì)算的四個(gè)方法封裝到匿名自執(zhí)行函數(shù)中，如果不添加返回值，外部是訪問(wèn)不到的。添加到返回值后，在全局可以通過(guò)“匿名函數(shù)”."函數(shù)名（）"的形式調(diào)用。
這種方式對(duì)于外部即開發(fā)了公共的方法，又保存了私有屬性和元素，私有空間的函數(shù)和變量也不會(huì)影響全局作用域。
在原來(lái)基礎(chǔ)上進(jìn)行模塊的擴(kuò)展，很多框架都是基于匿名自執(zhí)行函數(shù)處理的。在匿名自執(zhí)行函數(shù)傳遞一個(gè)對(duì)象做參數(shù)
"cal || {}",如果對(duì)象存在就使用，如果不存在就重新創(chuàng)建對(duì)象。
<body>
<input type="text" id="a">
<select id="opt">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
<option value="4">%</option>
</select>
<input type="text" id="b">
<button id="cal">=</button>
<input type="text" id="result">
</body>
<script>
// 傳入一個(gè)參數(shù)
var calcutor = (function(cal){
function add(a,b) {
return parseInt(a) + parseInt(b);
};
function subtract(a,b){
return parseInt(a) - parseInt(b);
};
function multiply(a,b){
return parseInt(a) * parseInt(b);
};
function divide(a,b){
return parseInt(a) / parseInt(b);
};
cal.add = add;
cal.multiply = multiply;
cal.subtract = subtract;
cal.divide = divide;
return cal;
})(calcutor || {});
/**
在原有的基礎(chǔ)上進(jìn)行擴(kuò)展
先查找對(duì)象是否存在，如果存在在對(duì)象的基礎(chǔ)上擴(kuò)展方法
**/
var calcutor = (function(cal){
cal.mod = function(a,b){
return parseInt(a) % parseInt(b);
}
return cal;
})(calcutor || {});
// 獲取所有的DOM元素
var oA = document.getElementById("a");
var oB = document.getElementById("b");
var opt = document.getElementById("opt");
var oCal = document.getElementById("cal");
var oResult = document.getElementById("result");
// 綁定點(diǎn)擊事件
oCal.onclick = function(){
var a = oA.value.trim();
var b = oB.value.trim();
var option = opt.value;
var result = 0;
switch(option){
case '0':
result = calcutor.add(a,b);
break;
case '1':
result = calcutor.subtract(a,b);
break;
case '2':
result = calcutor.multiply(a,b);
break;
case '3':
result = calcutor.divide(a,b);
break;
case '4':
result = calcutor.mod(a,b);
break;
default:
result = 0;
break;
}
oResult.value = result;
}
</script>
模塊化是一種設(shè)計(jì)思想，利用模塊化可以把一個(gè)非常復(fù)雜的系統(tǒng)結(jié)構(gòu)細(xì)化到具體的功能點(diǎn)，把每個(gè)功能點(diǎn)都作為一個(gè)模塊，然后通過(guò)某種規(guī)則把這些小的模塊組合到一起。
模塊化的優(yōu)點(diǎn)：開發(fā)效率高，維護(hù)成本低。
