nodejs之模塊化編程
???????在網(wǎng)站開發(fā)中，難免會用到很多特效，這時(shí)會用到很多JavaScript代碼，開發(fā)的越來越復(fù)雜時(shí)，難免會出現(xiàn)問題，例如命名沖突、繁瑣的文件依賴等等；為了解決這類問題，模塊化編程應(yīng)運(yùn)而生。
１、模塊化的概念
????就如同我們的電腦主板一般，有著很多很多的模塊：cpu、顯卡、各個(gè)處理器、寄存器等等等等，這些模塊都是獨(dú)立的個(gè)體，又能同時(shí)為一臺主機(jī)協(xié)同工作，而這些看似獨(dú)立的個(gè)體就是所謂的“模塊”。
模塊化編程有一下特點(diǎn)：生產(chǎn)效率高、維護(hù)成本低、這是從生產(chǎn)角度來看，從程序開發(fā)角度，它對應(yīng)以下特點(diǎn)：開發(fā)效率高、維護(hù)成本低
２、什么是命名沖突？
命名沖突就是，差不多這樣：
var?foo?=?"bar";
var?foo?=?"ber';
可以從上面的代碼看出來，第二個(gè)把第一個(gè)給覆蓋了。
3.何為文件依賴？
例如你需要從外面用到代碼：a.js、aa.js; aa.js依賴于a.js
而你調(diào)用時(shí)：
..忽略部分代碼...
<script>aa.js</script>
<script>a.js</script>?
..忽略部分代碼...
調(diào)換了兩個(gè)文件的順序，這就會導(dǎo)致運(yùn)行錯誤；
4.全局函數(shù)
以寫一個(gè)計(jì)算器為例子：
Cal.html
<!DOCTYPE?html>
<html>
<head>
?<title>Calclator</title>
?<meta?charset="utf-8">
</head>
<body>
?<div?id="WO">
?<h2>計(jì)算器</h2>
?<input?type="text"?id="x">
?<select?id="opt">
?<option?value="0">+</option>
?<option?value="1">-</option>
?<option?value="2">*</option>
?<option?value="3">/</option>
?<option?value="4">%</option>
?<input?type="text"?id="y">
?<button?id="cal">=</button>
?<input?type="text"?id="result">
?</select>
?</div>
?<div?id="AI">I?LOVE?YOU!</div>
?<script?type="text/javascript"?src="Cal.js"></script>
</body>
</html>?
cal.js代碼：
function?add(x,y){
?return?parseInt(x)+parseInt(y);
?}
?function?subtract(x,y){
?return?parseInt(x)-parseInt(y);
?}
?function?multiply(x,y){
?return?parseInt(x)*parseInt(y);
?}
?function?divide(x,y){
?return?parseInt(x)/parseInt(y);
?}
//下面開始獲取DOM元素
var?oX?=?document.getElementById('x');
var?oOpt?=?document.getElementById('opt');
var?oY?=?document.getElementById('y');
var?oCal?=?document.getElementById('cal');
var?oResult?=?document.getElementById('result');
//點(diǎn)擊等于號時(shí)就會出現(xiàn)結(jié)果的監(jiān)聽
oCal.addEventListener('click',function(){
?var?x?=?oX.value.trim();
?var?y?=?oY.value.trim();
?var?opt?=?oOpt.value;
?var?result?=?0;
?switch(opt){
?case?'0':
?result?=?add(x,y);
?break;
?case?'1':
?result?=subtract(x,y);
?break;
?case?'2':
?result?=?multiply(x,y);
?break;
?case?'3':
?result?=?divide(x,y);
?break;
?case?'4':
?result?=?mod(x,y);
?break;
?}
?oResult.value?=?result;?//賦值給ｒｅｓｕｌｔ
})?
這個(gè)nodejs代碼分別定義了加、減、乘、除、取余等函數(shù)功能，并且是可以用的：
可以看出來是完整的功能實(shí)現(xiàn)；
雖然使用全局函數(shù)這個(gè)方式是我們常見的方式，但是不可取，因?yàn)樗械暮瘮?shù)變量都是暴露在全局的，不能保證不發(fā)生沖突，而且成員之間看不出來直接關(guān)系；
這時(shí)可以用命名空間：
定義語法：
var?calculator?=?{}?
往命名空間里加函數(shù)語法
calculator.add?=?function?(x,y){return?parseInt(x)+parseInt(y)};?
雖然解決了函數(shù)命名空間的問題了，但是如果再定義一個(gè)命名空間為calculator，還是會再次的報(bào)錯。內(nèi)部人員可以隨便改寫，不安全。
子命名空間：
?
定義在命名空間下，例如：
calculator.subcal?=?{}?
calculator.subcal.foo?=?'bar';
雖然可以用這種方式，但是，命名空間的名字會越來越長，不容易記憶。代碼可讀性差。
?５、函數(shù)的作用域（閉包）
以上介紹道全局函數(shù)和命名空間都不是很好的解決命名沖突問題.而且私有屬性沒有得到很好的保護(hù)。
這時(shí)就可以通過封裝函數(shù)的私有空間，讓屬性和方法的到私有化，這就是所謂的閉包。
語法：
var?calculator?=?(function(){
????function?add(x,y){
????????return?parseInt(x)+parseInt(y)
????}
????return{
????????add:add,
????}
})();?
很顯然的看到了封裝了一個(gè)函數(shù)。這時(shí)如果不加返回值，所定義的函數(shù)是無法被訪問到的。添加返回之后，可以通過“匿名函數(shù).函數(shù)名（）”的方式調(diào)用。
６維護(hù)和拓展
使用以上方法固然是好，但是，如果中途我又想加入一個(gè)別的函數(shù)功能的話，應(yīng)該怎么辦？這時(shí)候都會想到就是在代碼中加，例如要對以上函數(shù)進(jìn)行添加一個(gè)做減法的函數(shù)，則應(yīng)該：
var?calculator?=?(function(){
?function?add(x,y){
?return?parseInt(x)+parseInt(y)
?}
?function?subtract(x,y){
?return?parseInt(x)-parseInt(y)
?}
?return{
?add:add,
?subtract:subtract,
?}
})();??
雖然說這樣也是可以，但是如果要添加的函數(shù)是來自第三方的庫提供的呢，那就會更麻煩了。于是可以通過傳遞參數(shù)的方式來添加函數(shù)：
語法：
var?calculator?=?(function(cal){
????function?add(x,y){
????????return?parseInt(x)+parseInt(y)
????}
????cal.add?=?add;
????return?cal;
})(calculator?||?{})?
//這時(shí)如果要對函數(shù)模塊進(jìn)行擴(kuò)充時(shí)，可以使用相同的方式
var?calculator?=?(function(cal){
????function?subtract(x,y){
????????return?parseInt(x)-parseInt(y)
????}
????cal.subtract?=?subtract;
????return?cal;
})(calculator?||?{})；
這時(shí)會發(fā)現(xiàn)，定義的第二個(gè)calculator會不會把第一個(gè)calculator給覆蓋掉？
答案當(dāng)然是不會，因?yàn)榇a“calculator || {} ”的意思就是：當(dāng)拓展模塊時(shí)，判斷calculator是否存在，如果存在，則不需要重新創(chuàng)建，如果不存在就重新創(chuàng)建。
?
ok,這就是模塊化編程了的思想了。（差不多思想）
參看教材：nodejs 核心技術(shù)卷
網(wǎng)址：http://www.qmwan.club/index.php/2020/02/06/63/
網(wǎng)址：http://leanote.com/blog/post/5dcbe0c0ab64414703000427
作者：Kenny技術(shù)仔???個(gè)人聯(lián)系郵箱：zhangdlmj@163.com
歡迎交流 ???QQ:908481391
