当前位置:首页 > 开发 > Web前端 > 前端 > 正文

Party_bid重构

发表于: 2014-08-01   作者:a904143034   来源:转载   浏览:
摘要: 一、重构的理解 重构在代码编写中是必不可少的一步,如果没有重构,我们的代码将会杂乱无章,到处是变量、赋值和判断,if、for嵌套混乱,逻辑思路不清晰,纠错困难,代码的可重用性和扩展性非常低。重构代码,在不改变原有功能的前提下,对内部的结构进行重新整理,对功能进行模块划分,将具体实现方法从代码中抽离出来,独立成为功能方法,实现可调用性。跟数据模型有关的数据的增删改查要独立成model,实现增删改查

一、重构的理解

重构在代码编写中是必不可少的一步,如果没有重构,我们的代码将会杂乱无章,到处是变量、赋值和判断,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<activities.length;i++){
    if(activities[i].name==innerAct.name){
                activities[i].status="status";
  }
} 

 

 上面是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的方法使用小写,用“_”分隔。

 

Party_bid重构

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
1 重构
代码的坏味道 拆分函数,一个功能集中在一起,形成一个新函数(提炼) 少用临时变量,如调用方法产
.NET重构—单元测试重构 阅读目录: 1.开篇介绍 2.单元测试、测试用例代码重复问题(大量使用重复的
因为工作内容的原因,我在前后两家公司中的工作中主持和经历了十余次代码和架构的重构,下面随便说
因为工作内容的原因,我在前后两家公司中的工作中主持和经历了十余次代码和架构的重构,下面随便说
记我的一次重构——希望对新人有所帮助 看过博客园里几篇关于重构的文章,感觉都不怎么实在。下面我
Eclipse中的重构类型 如果你看一下Eclipse的重构菜单,可以看到四部分。第一部分是撤销和重做。其他
一.重构实践 实践题目:重构获取指定数值内的所有质数的方法 单元测试案例: package training.gene
为什么重构? 重构是指在不改变程序功能的前提下改变其结构。重构是一项功能强大的技术,但是执行起
组件的重构 1. 新建组件 File-New-MXML Conponent 为组件添加一个myProperty属性和一个标签,并将标
一.重构实践 实践题目:重构获取指定数值内的所有质数的方法 单元测试案例: package training.gene
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号