`

代码重构

阅读更多

重构就是在不改变软件现有功能的基础上,通过调整程序代码改善软件的质量、性能,使其程序的设计模式和架构更趋合理,提高软件的扩展性和维护性。

重构的注重点:

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/;

 

 

 

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics