重构就是在不改变软件现有功能的基础上,通过调整程序代码改善软件的质量、性能,使其程序的设计模式和架构更趋合理,提高软件的扩展性和维护性。
重构的注重点:
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/;