重構就是在不改變軟件現有功能的基礎上,通過調整程序代碼改善軟件的質量、性能,使其程序的設計模式和架構更趨合理,提高軟件的擴展性和維護性。
重構的注重點:
1.重構一步就測試一步,保證程序不會出現錯誤。
2.每個函數只實現一個功能,分的越細,代碼複用率越高
3.函數名符合規範,見名知意。
4.controller中只寫調用功能方法實現對view控制
5.用underscore替代各種循環。
重構實例:
我做的是一個有關報名競價的應用,其中涉及到通過短信報名相關活動,報過名的的人可以參加後面的競價,其中涉及到短信提取和存儲。下面的messages就是用來存儲報名信息的數組,activities爲存儲的活動和信息。
1.數組定義
之前定義數組:
var messages = JSON.parse(localStorage.getItem('messages')) || [];
重構後:
Sms.get_messages = function(){ return JSON.parse(localStorage.getItem('messages')) || []; }
通過return將這個數組的值返回給函數名Sms.get_messages();所以Sms.get_messages()就代表這個數組,可以通過調用它來實現數組的獲取。
2.函數間可以相互調用
重構前:
var messages = JSON.parse(localStorage.getItem('messages')) || [] for (var i = 0;i <messages.length; i +=1 ){ if(messages[i].phone == Sms.sign_up_phone(json_message) ){ localStorage.current_phone = messages[i].phone; } }
這樣就將對應的電話存儲到本地庫中,存儲的類型是字符串型數據。
由於for循環再嵌套上if很容易出現邏輯錯誤,所以將for循環改成underscore中的_.find方法。_.find方法替代for循環,根據return中的判斷條件尋找數組中的符合條件的數據,messages代表要遍歷的數組,function中的message就相當與前面的messages,只是爲了理解方便。這樣就可以理解爲在messages中遍歷每一個message。
與之對應的_.find方法
var messages = JSON.parse(localStorage.getItem('messages')) || [];
Sms.is_same_sign_message = function(json_message){
return _.find(messages,
function (message) {
return message.phone == Sms.sign_up_phone(json_message)
})
}
重構後:
Sms.is_same_sign_message = function(json_message){
return _.find(Sms.get_messages(),
function (message) {
return message.phone == Sms.sign_up_phone(json_message)
})
}
這個函數中messages用Sms.get_messages()代替,其他用到這個數組的函數也可通過Sms.get_messages()調用來實現代碼複用。
3.underscore用法
之前用for循環來來存儲messages中與localStorage.activities_sign相同的元素,如果判斷條件增加會使代碼過於龐大而且邏輯複雜
for(var i=0;i<messages.length;i++){
if(messages[i].status == localStorage.current_status){
localStorage.current = messages[i];
}
}
重構後:
Activity.is_current_name = function(){
return _.find(messages,function(message){
return message.status == localStorage.current_status
})
}
_.find後的messages是要處理的數組名,function(message)中的message代表messages中的每個元素,相當於messages,function(message){}函數體中的return後是判斷條件。_.find是查找messages中符合判斷條件的元素,而且是查找到第一個符合條件的內容就返回而不再向下執行。_.filter是查找所有符合條件的元素並存儲,若要取此數組只需調用此方法名。
提供一個學習underscore的網站:http://www.css88.com/doc/underscore/;