您好,登錄后才能下訂單哦!
這篇文章主要介紹了JavaScript代碼重構的方法有哪些的相關知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇JavaScript代碼重構的方法有哪些文章都會有所收獲,下面我們一起來看看吧。
在 JavaScript 開發(fā)中,我們大部分時間都在與函數(shù)打交道,所以我們希望這些函數(shù)有著良好的命名,函數(shù)體內(nèi)包含的邏輯清晰明了。如果一個函數(shù)過長,不得不加上若干注釋才能讓這個函數(shù)顯得易讀一些,那這些函數(shù)就很有必要進行重構。
如果在函數(shù)中有一段代碼可以被獨立出來,那我們最好把這些代碼放進另外一個獨立的函數(shù)中。這是一種很常見的優(yōu)化工作,這樣做的好處主要有以下幾點。
避免出現(xiàn)超大函數(shù)。
獨立出來的函數(shù)有助于代碼復用。
獨立出來的函數(shù)更容易被覆寫。
獨立出來的函數(shù)如果擁有一個良好的命名,它本身就起到了注釋的作用。
比如在一個負責取得用戶信息的函數(shù)里面,我們還需要打印跟用戶信息有關的 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 ); };
如果一個函數(shù)體內(nèi)有一些條件分支語句,而這些條件分支語句內(nèi)部散布了一些重復的代碼,那么就有必要進行合并去重工作。假如我們有一個分頁函數(shù) paging
,該函數(shù)接收一個參數(shù) currPage,currPage 表示即將跳轉(zhuǎn)的頁碼。在跳轉(zhuǎn)之前,為防止 currPage 傳入過小或者過大的數(shù)字,我們要手動對它的值進行修正,詳見如下偽代碼:
var paging = function( currPage ){ if ( currPage = totalPage ){ currPage = totalPage; jump( currPage ); // 跳轉(zhuǎn) }else{ jump( currPage ); // 跳轉(zhuǎn) } };
可以看到,負責跳轉(zhuǎn)的代碼jump
( currPage )在每個條件分支內(nèi)都出現(xiàn)了,所以完全可以把這句代碼獨立出來:
var paging = function( currPage ){ if ( currPage = totalPage ){ currPage = totalPage; } jump( currPage ); // 把jump函數(shù)獨立出來 };
在程序設計中,復雜的條件分支語句是導致程序難以閱讀和理解的重要原因,而且容易導致一個龐大的函數(shù)。假設現(xiàn)在有一個需求是編寫一個計算商品價格的getPrice
函數(shù),商品的計算只有一個規(guī)則:如果當前正處于夏季,那么全部商品將以8折出售。代碼如下:
var getPrice = function( price ){ var date = new Date(); if ( date.getMonth() >= 6 && date.getMonth() = 6 && date.getMonth() = 6 && date.getMonth() 30 ){ flag = true; break; } } if ( flag === true ){ break; } } };
第二種做法是設置循環(huán)標記:
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; } } } };
這兩種做法無疑都讓人頭暈目眩,更簡單的做法是在需要中止循環(huán)的時候直接退出整個方法:
var func = function(){ for ( var i = 0; i < 10; i++ ){ for ( var j = 0; j < 10; j++ ){ if ( i * j >30 ){ return; } } } };
當然用return
直接退出方法會帶來一個問題,如果在循環(huán)之后還有一些將被執(zhí)行的代碼呢?如果我們提前退出了整個方法,這些代碼就得不到被執(zhí)行的機會:
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 ); // 這句代碼沒有機會被執(zhí)行 };
為了解決這個問題,我們可以把循環(huán)后面的代碼放到return
后面,如果代碼比較多,就應該把它們提煉成一個單獨的函數(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();
關于“JavaScript代碼重構的方法有哪些”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“JavaScript代碼重構的方法有哪些”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。