Party_bid重构

阅读更多

一、重构的理解

重构在代码编写中是必不可少的一步，如果没有重构，我们的代码将会杂乱无章，到处是变量、赋值和判断，if、for嵌套混乱，逻辑思路不清晰，纠错困难，代码的可重用性和扩展性非常低。重构代码，在不改变原有功能的前提下，对内部的结构进行重新整理，对功能进行模块划分，将具体实现方法从代码中抽离出来，独立成为功能方法，实现可调用性。跟数据模型有关的数据的增删改查要独立成model，实现增删改查方法的抽离和封装。跟逻辑有关的判断处理要独立写到一个JS里面。controlle只向view提供指示性标志变量和数据源，只通过调用方法实现逻辑控制，不实现任何功能方法。

二、model定义类模型和方法

这个跟C#和java其实很类似。数据模型里使用到的相关数据都可以定义一个model js，实现实例化和其增删改查方法。比如我的数据模型使用到Activity，那我就定义了一个Activity模型，通过构造方法传值给Activity，并进行属性赋值，还定义了3个方法，对象方法（使用prototype，为对象添加属性、方法）：add_saveItem（），只能用实例化后的对象进行调用，类方法：getActivities（）、setActivities（），可以直接类调用，代码如下：

function Activity(activity_name){
    this.name = activity_name;
    this.status="";
    this.bmMessages=[];
    this.bidlists=[];
}
Activity.prototype.add_saveItem=function()
{
    var activities=Activity.getActivities();
    activities.unshift(this);
    Activity.setActivities(activities);
}
Activity.getActivities=function(){
    return JSON.parse(localStorage.getItem("activities"))||[];
};
Activity.setActivities=function(activities){
     localStorage.setItem('activities',JSON.stringify(activities)) ;
};

 

 对应的控制器JS里使用方法如下：

var activity = new Activity(activity_name); //实例化一个Activity对象activity

 activity.add_saveItem(); //对象调用对象的方法

 三、模块划分、方法抽离简化、逻辑实现

1、模块划分

模块划分就是根据具体实现的功能，将功能分几大块，在不同的JS文件中实现，各个模块之间互不关联，通过逻辑JS文件进行模块之间的关联、逻辑的判断、方法的调用。

2、方法抽离简化

在重构中一个函数只实现一个功能，代码要尽量简单易懂，易于纠错。在做party_bid重构时，使用最多的就是underscore.js里的_.find，_.filter ，_.findWhere,在我的Party_bid第四张卡里有具体介绍，这里我就不介绍了。就只举个代码例子：

for(var i=0;i 
  
 
 
  
 上面是for循环嵌套if实现属性匹配赋值，下面使用underscore的_.findWhere进行属性查找赋值
 
  
 _.findWhere(activities,{name:innerAct.name}).status="status";
 
  
 有时还需要将方法抽成一个function，可以传包括$scope在内的很多参数。
 
  
Activity.setstartbutton=function($scope){
    $scope.startButton = true ;
    $scope.start_stop = "结束";

};
 
  
 3、逻辑实现
 
  
将跟数据模型和功能实现模块无关的逻辑判断方法写到逻辑JS中，方法的命名要简洁易懂，一般angularjs的方法使用小写，用“_”分隔。