了不起的11個JavaScript代碼重構(gòu)最佳實踐小結(jié)
模式和重構(gòu)之間有著一種與生俱來的關(guān)系。從某種角度來看，設(shè)計模式的目的就是為許多重構(gòu)行為提供目標(biāo)。
1.提煉函數(shù)
在JavaScript開發(fā)中，我們大部分時間都在與函數(shù)打交道，所以我們希望這些函數(shù)有著良好的命名，函數(shù)體內(nèi)包含的邏輯清晰明了。如果一個函數(shù)過長，不得不加上若干注釋才能讓這個函數(shù)顯得易讀一些，那這些函數(shù)就很有必要進(jìn)行重構(gòu)。
如果在函數(shù)中有一段代碼可以被獨立出來，那我們最好把這些代碼放進(jìn)另外一個獨立的函數(shù)中。這是一種很常見的優(yōu)化工作，這樣做的好處主要有以下幾點。
- 避免出現(xiàn)超大函數(shù)。
- 獨立出來的函數(shù)有助于代碼復(fù)用。
- 獨立出來的函數(shù)更容易被覆寫。
- 獨立出來的函數(shù)如果擁有一個良好的命名，它本身就起到了注釋的作用。
比如在一個負(fù)責(zé)取得用戶信息的函數(shù)里面，我們還需要打印跟用戶信息有關(guān)的log，那么打印log的語句就可以被封裝在一個獨立的函數(shù)里：
var getUserInfo = function(){
ajax( 'http:// xxx.com/userInfo', function( data ){
console.log( 'userId: ' + data.userId );
console.log( 'userName: ' + data.userName );
console.log( 'nickName: ' + data.nickName );
});
};
改成：
var getUserInfo = function(){
ajax( 'http:// xxx.com/userInfo', function( data ){
printDetails( data );
});
};
var printDetails = function( data ){
console.log( 'userId: ' + data.userId );
console.log( 'userName: ' + data.userName );
console.log( 'nickName: ' + data.nickName );
};
2.合并重復(fù)的條件片段
如果一個函數(shù)體內(nèi)有一些條件分支語句，而這些條件分支語句內(nèi)部散布了一些重復(fù)的代碼，那么就有必要進(jìn)行合并去重工作。假如我們有一個分頁函數(shù)paging，該函數(shù)接收一個參數(shù)currPage，currPage表示即將跳轉(zhuǎn)的頁碼。在跳轉(zhuǎn)之前，為防止currPage傳入過小或者過大的數(shù)字，我們要手動對它的值進(jìn)行修正，詳見如下偽代碼：
var paging = function( currPage ){
if ( currPage <= 0 ){
currPage = 0;
jump( currPage ); // 跳轉(zhuǎn)
}else if ( currPage >= totalPage ){
currPage = totalPage;
jump( currPage ); // 跳轉(zhuǎn)
}else{
jump( currPage ); // 跳轉(zhuǎn)
}
};
可以看到，負(fù)責(zé)跳轉(zhuǎn)的代碼jump( currPage )在每個條件分支內(nèi)都出現(xiàn)了，所以完全可以把這句代碼獨立出來：
var paging = function( currPage ){
if ( currPage <= 0 ){
currPage = 0;
}else if ( currPage >= totalPage ){
currPage = totalPage;
}
jump( currPage ); // 把jump函數(shù)獨立出來
};
3.把條件分支語句提煉成函數(shù)
在程序設(shè)計中，復(fù)雜的條件分支語句是導(dǎo)致程序難以閱讀和理解的重要原因，而且容易導(dǎo)致一個龐大的函數(shù)。假設(shè)現(xiàn)在有一個需求是編寫一個計算商品價格的getPrice函數(shù)，商品的計算只有一個規(guī)則：如果當(dāng)前正處于夏季，那么全部商品將以8折出售。代碼如下：
var getPrice = function( price ){
var date = new Date();
if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天
return price * 0.8;
}
return price;
};
觀察這句代碼：
if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){
// ...
}
這句代碼要表達(dá)的意思很簡單，就是判斷當(dāng)前是否正處于夏天（7~10月）。盡管這句代碼很短小，但代碼表達(dá)的意圖和代碼自身還存在一些距離，閱讀代碼的人必須要多花一些精力才能明白它傳達(dá)的意圖。其實可以把這句代碼提煉成一個單獨的函數(shù)，既能更準(zhǔn)確地表達(dá)代碼的意思，函數(shù)名本身又能起到注釋的作用。代碼如下：
var isSummer = function(){
var date = new Date();
return date.getMonth() >= 6 && date.getMonth() <= 9;
};
var getPrice = function( price ){
if ( isSummer() ){ // 夏天
return price * 0.8;
}
return price;
};
4.合理使用循環(huán)
在函數(shù)體內(nèi)，如果有些代碼實際上負(fù)責(zé)的是一些重復(fù)性的工作，那么合理利用循環(huán)不僅可以完成同樣的功能，還可以使代碼量更少。下面有一段創(chuàng)建XHR對象的代碼，為了簡化示例，我們只考慮版本9以下的IE瀏覽器，代碼如下：
var createXHR = function(){
var xhr;
try{
xhr = new ActiveXObject( 'MSXML2.XMLHttp.6.0' );
}catch(e){
try{
xhr = new ActiveXObject( 'MSXML2.XMLHttp.3.0' );
}catch(e){
xhr = new ActiveXObject( 'MSXML2.XMLHttp' );
}
}
return xhr;
};
var xhr = createXHR();
``
下面我們靈活地運用循環(huán)，可以得到跟上面代碼一樣的效果：
```js
var createXHR = function(){
var versions= [ 'MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp' ];
for ( var i = 0, version; version = versions[ i++ ]; ){
try{
return new ActiveXObject( version );
}catch(e){
}
}
};
var xhr = createXHR();
5.提前讓函數(shù)退出代替嵌套條件分支
許多程序員都有這樣一種觀念：“每個函數(shù)只能有一個入口和一個出口?！爆F(xiàn)代編程語言都會限制函數(shù)只有一個入口。但關(guān)于“函數(shù)只有一個出口”，往往會有一些不同的看法。
下面這段偽代碼是遵守“函數(shù)只有一個出口的”的典型代碼：
var del = function( obj ){
var ret;
if ( !obj.isReadOnly ){ // 不為只讀的才能被刪除
if ( obj.isFolder ){ // 如果是文件夾
ret = deleteFolder( obj );
}else if ( obj.isFile ){ // 如果是文件
ret = deleteFile( obj );
}
}
return ret;
};
嵌套的條件分支語句絕對是代碼維護(hù)者的噩夢，對于閱讀代碼的人來說，嵌套的if、else語句相比平鋪的if、else，在閱讀和理解上更加困難，有時候一個外層if分支的左括號和右括號之間相隔500米之遠(yuǎn)。用《重構(gòu)》里的話說，嵌套的條件分支往往是由一些深信“每個函數(shù)只能有一個出口的”程序員寫出的。但實際上，如果對函數(shù)的剩余部分不感興趣，那就應(yīng)該立即退出。引導(dǎo)閱讀者去看一些沒有用的else片段，只會妨礙他們對程序的理解。
于是我們可以挑選一些條件分支，在進(jìn)入這些條件分支之后，就立即讓這個函數(shù)退出。要做到這一點，有一個常見的技巧，即在面對一個嵌套的if分支時，我們可以把外層if表達(dá)式進(jìn)行反轉(zhuǎn)。重構(gòu)后的del函數(shù)如下：
var del = function( obj ){
if ( obj.isReadOnly ){ // 反轉(zhuǎn)if表達(dá)式
return;
}
if ( obj.isFolder ){
return deleteFolder( obj );
}
if ( obj.isFile ){
return deleteFile( obj );
}
};
6.傳遞對象參數(shù)代替過長的參數(shù)列表
有時候一個函數(shù)有可能接收多個參數(shù)，而參數(shù)的數(shù)量越多，函數(shù)就越難理解和使用。使用該函數(shù)的人首先得搞明白全部參數(shù)的含義，在使用的時候，還要小心翼翼，以免少傳了某個參數(shù)或者把兩個參數(shù)搞反了位置。如果我們想在第3個參數(shù)和第4個參數(shù)之中增加一個新的參數(shù)，就會涉及許多代碼的修改，代碼如下：
var setUserInfo = function( id, name, address, sex, mobile, qq ){
console.log( 'id= ' + id );
console.log( 'name= ' +name );
console.log( 'address= ' + address );
console.log( 'sex= ' + sex );
console.log( 'mobile= ' + mobile );
console.log( 'qq= ' + qq );
};
setUserInfo( 1314, 'sven', 'shenzhen', 'male', '137********', 377876679 );
這時我們可以把參數(shù)都放入一個對象內(nèi)，然后把該對象傳入setUserInfo 函數(shù)，setUserInfo函數(shù)需要的數(shù)據(jù)可以自行從該對象里獲取?，F(xiàn)在不用再關(guān)心參數(shù)的數(shù)量和順序，只要保證參數(shù)對應(yīng)的key值不變就可以了：
var setUserInfo = function( obj ){
console.log( 'id= ' + obj.id );
console.log( 'name= ' + obj.name );
console.log( 'address= ' + obj.address );
console.log( 'sex= ' + obj.sex );
console.log( 'mobile= ' + obj.mobile );
console.log( 'qq= ' + obj.qq );
};
setUserInfo({
id: 1314,
name: 'sven',
address: 'shenzhen',
sex: 'male',
mobile: '137********',
qq: 377876679
});
7.盡量減少參數(shù)數(shù)量
如果調(diào)用一個函數(shù)時需要傳入多個參數(shù)，那這個函數(shù)是讓人望而生畏的，我們必須搞清楚這些參數(shù)代表的含義，必須小心翼翼地把它們按照順序傳入該函數(shù)。而如果一個函數(shù)不需要傳入任何參數(shù)就可以使用，這種函數(shù)是深受人們喜愛的。在實際開發(fā)中，向函數(shù)傳遞參數(shù)不可避免，但我們應(yīng)該盡量減少函數(shù)接收的參數(shù)數(shù)量。下面舉個非常簡單的示例。有一個畫圖函數(shù)draw，它現(xiàn)在只能繪制正方形，接收了3個參數(shù)，分別是圖形的width、heigth以及square：
var draw = function( width, height, square ){};
但實際上正方形的面積是可以通過width和height計算出來的，于是我們可以把參數(shù)square從draw函數(shù)中去掉：
var draw = function( width, height ){
var square = width * height;
};
假設(shè)以后這個draw函數(shù)開始支持繪制圓形，我們需要把參數(shù)width和height換成半徑radius， 但圖形的面積square始終不應(yīng)該由客戶傳入，而是應(yīng)該在draw函數(shù)內(nèi)部，由傳入的參數(shù)加上一定的規(guī)則計算得來。此時，我們可以使用策略模式，讓draw函數(shù)成為一個支持繪制多種圖形的函數(shù)。
8.少用三目運算符
有一些程序員喜歡大規(guī)模地使用三目運算符，來代替?zhèn)鹘y(tǒng)的if、else。理由是三目運算符性能高，代碼量少。不過，這兩個理由其實都很難站得住腳。
即使我們假設(shè)三目運算符的效率真的比if、else高，這點差距也是完全可以忽略不計的。在實際的開發(fā)中，即使把一段代碼循環(huán)一百萬次，使用三目運算符和使用if、else的時間開銷處在同一個級別里。
同樣，相比損失的代碼可讀性和可維護(hù)性，三目運算符節(jié)省的代碼量也可以忽略不計。讓JS文件加載更快的辦法有很多種，如壓縮、緩存、使用CDN和分域名等。把注意力只放在使用三目運算符節(jié)省的字符數(shù)量上，無異于一個300斤重的人把超重的原因歸罪于頭皮屑。
如果條件分支邏輯簡單且清晰，這無礙我們使用三目運算符：
var global = typeof window !== "undefined" ? window : this;
但如果條件分支邏輯非常復(fù)雜，如下段代碼所示，那我們最好的選擇還是按部就班地編寫if、else。if、else語句的好處很多，一是閱讀相對容易，二是修改的時候比修改三目運算符周圍的代碼更加方便：
if ( !aup || !bup ) {
return a === doc ? -1 :
b === doc ? 1 :
aup ? -1 :
bup ? 1 :
sortInput ?
( indexOf.call( sortInput, a ) - indexOf.call( sortInput, b ) ) :
0;
}
9.合理使用鏈?zhǔn)秸{(diào)用
經(jīng)常使用jQuery的程序員相當(dāng)習(xí)慣鏈?zhǔn)秸{(diào)用方法，在JavaScript中，可以很容易地實現(xiàn)方法的鏈?zhǔn)秸{(diào)用，即讓方法調(diào)用結(jié)束后返回對象自身，如下代碼所示：
var User = function(){
this.id = null;
this.name = null;
};
User.prototype.setId = function( id ){
this.id = id;
return this;
};
User.prototype.setName = function( name ){
this.name = name;
return this;
};
console.log( new User().setId( 1314 ).setName( 'sven' ) );
或者：
var User = {
id: null,
name: null,
setId: function( id ){
this.id = id;
return this;
},
setName: function( name ){
this.name = name;
return this;
}
};
console.log( User.setId( 1314 ).setName( 'sven' ) );
使用鏈?zhǔn)秸{(diào)用的方式并不會造成太多閱讀上的困難，也確實能省下一些字符和中間變量，但節(jié)省下來的字符數(shù)量同樣是微不足道的。鏈?zhǔn)秸{(diào)用帶來的壞處就是在調(diào)試的時候非常不方便，如果我們知道一條鏈中有錯誤出現(xiàn)，必須得先把這條鏈拆開才能加上一些調(diào)試log或者增加斷點，這樣才能定位錯誤出現(xiàn)的地方。
如果該鏈條的結(jié)構(gòu)相對穩(wěn)定，后期不易發(fā)生修改，那么使用鏈?zhǔn)秸{(diào)用無可厚非。但如果該鏈條很容易發(fā)生變化，導(dǎo)致調(diào)試和維護(hù)困難，那么還是建議使用普通調(diào)用的形式：
var user = new User(); user.setId( 1314 ); user.setName( 'sven' );
10.分解大型類
在HTML5版“街頭霸王”的第一版代碼中，負(fù)責(zé)創(chuàng)建游戲人物的Spirit 類非常龐大，不僅要負(fù)責(zé)創(chuàng)建人物精靈，還包括了人物的攻擊、防御等動作方法，代碼如下：
var Spirit = function( name ){
this.name = name;
};
Spirit.prototype.attack = function( type ){ // 攻擊
if ( type === 'waveBoxing' ){
console.log( this.name + ': 使用波動拳' );
}else if( type === 'whirlKick' ){
console.log( this.name + ': 使用旋風(fēng)腿' );
}
};
var spirit = new Spirit( 'RYU' );
spirit.attack( 'waveBoxing' ); // 輸出：RYU: 使用波動拳
spirit.attack( 'whirlKick' ); // 輸出：RYU: 使用旋風(fēng)腿
后來發(fā)現(xiàn)，Spirit.prototype.attack這個方法實現(xiàn)是太龐大了，實際上它完全有必要作為一個單獨的類存在。面向?qū)ο笤O(shè)計鼓勵將行為分布在合理數(shù)量的更小對象之中：
var Attack = function( spirit ){
this.spirit = spirit;
};
Attack.prototype.start = function( type ){
return this.list[ type ].call( this );
};
Attack.prototype.list = {
waveBoxing: function(){
console.log( this.spirit.name + ': 使用波動拳' );
},
whirlKick: function(){
console.log( this.spirit.name + ': 使用旋風(fēng)腿' );
}
};
現(xiàn)在的Spirit類變得精簡了很多，不再包括各種各樣的攻擊方法，而是把攻擊動作委托給Attack類的對象來執(zhí)行，這段代碼也是策略模式的運用之一：
var Spirit = function( name ){
this.name = name;
this.attackObj = new Attack( this );
};
Spirit.prototype.attack = function( type ){ // 攻擊
this.attackObj.start( type );
};
var spirit = new Spirit( 'RYU' );
spirit.attack( 'waveBoxing' ); // 輸出：RYU: 使用波動拳
spirit.attack( 'whirlKick' ); // 輸出：RYU: 使用旋風(fēng)
11.用return退出多重循環(huán)
假設(shè)在函數(shù)體內(nèi)有一個兩重循環(huán)語句，我們需要在內(nèi)層循環(huán)中判斷，當(dāng)達(dá)到某個臨界條件時退出外層的循環(huán)。我們大多數(shù)時候會引入一個控制標(biāo)記變量：
var func = function(){
var flag = false;
for ( var i = 0; i < 10; i++ ){
for ( var j = 0; j < 10; j++ ){
if ( i * j >30 ){
flag = true;
break;
}
}
if ( flag === true ){
break;
}
}
};
第二種做法是設(shè)置循環(huán)標(biāo)記：
var func = function(){
outerloop:
for ( var i = 0; i < 10; i++ ){
innerloop:
for ( var j = 0; j < 10; j++ ){
if ( i * j >30 ){
break outerloop;
}
}
}
};
這兩種做法無疑都讓人頭暈?zāi)垦?，更簡單的做法是在需要中止循環(huán)的時候直接退出整個方法：
var func = function(){
for ( var i = 0; i < 10; i++ ){
for ( var j = 0; j < 10; j++ ){
if ( i * j >30 ){
return;
}
}
}
};
當(dāng)然用return直接退出方法會帶來一個問題，如果在循環(huán)之后還有一些將被執(zhí)行的代碼呢？如果我們提前退出了整個方法，這些代碼就得不到被執(zhí)行的機(jī)會：
var func = function(){
for ( var i = 0; i < 10; i++ ){
for ( var j = 0; j < 10; j++ ){
if ( i * j >30 ){
return;
}
}
}
console.log( i ); // 這句代碼沒有機(jī)會被執(zhí)行
};
為了解決這個問題，我們可以把循環(huán)后面的代碼放到return后面，如果代碼比較多，就應(yīng)該把它們提煉成一個單獨的函數(shù)：
var print = function( i ){
console.log( i );
};
var func = function(){
for ( var i = 0; i < 10; i++ ){
for ( var j = 0; j < 10; j++ ){
if ( i * j >30 ){
return print( i );
}
}
}
};
func();
到此這篇關(guān)于了不起的11個JavaScript代碼重構(gòu)最佳實踐小結(jié)的文章就介紹到這了,更多相關(guān)JavaScript 代碼重構(gòu)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了純js實現(xiàn)動態(tài)時間顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
javascript實現(xiàn)帶下拉子菜單的導(dǎo)航菜單效果
這篇文章主要介紹了javascript實現(xiàn)帶下拉子菜單的導(dǎo)航菜單效果的方法,涉及javascript操作頁面元素與樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05
JS數(shù)組實現(xiàn)分類統(tǒng)計實例代碼
本文通過實例代碼給大家介紹了js數(shù)組實現(xiàn)分類統(tǒng)計的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了編程語言JavaScript簡介,本文講解了JavaScript是什么、JavaScript特點、JavaScript和Java的區(qū)別等內(nèi)容,需要的朋友可以參考下2014-10-10
多年以來，IE一直都是最難于調(diào)試JavaScript 錯誤的瀏覽器。IE給出的錯誤消息一般很短又語焉不詳。而且上下文信息也很少，有時甚至一點都沒有。下面幾小節(jié)將分別探討一些在IE中難于調(diào)試的JavaScript 錯誤2016-11-11
在客戶端中，要對字符串編碼，可以采用：escape（）；encodeurl（）；encodeURIComponent（）；下面我們就來具體講解下這幾個方法。2015-05-05
Google 爬蟲如何抓取 JavaScript 的內(nèi)容
我們測試了谷歌爬蟲是如何抓取 JavaScript，下面就是我們從中學(xué)習(xí)到的知識,需要的朋友可以參考下2017-04-04
IE autocomplete internet explorer''s autocomplete
IE autocomplete internet explorer''s autocomplete...2007-06-06
這篇文章主要為大家詳細(xì)介紹了uniapp實現(xiàn)橫向滾動選擇日期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實現(xiàn)留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01