party_bid重构

最新推荐文章于 2014-09-03 17:02:56 发布

最新推荐文章于 2014-09-03 17:02:56 发布 · 286 阅读

js html 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了代码重构的目的与方法，旨在让代码变得更简洁易懂。介绍了如何优化逻辑控制、使用三目运算符、抽取方法等内容，并提供了重构的具体示例。

正文:

重构的目的就是使代码更加简单,更易读懂.重构就是在原来代码的基础上进行改进,减少函数内圈复杂度,不会改变代码要实现的功能,有时,重构后的代码量比之前更大了,但代码的结构也更清晰了.

一. 原代码重构的主要方面：

1.在逻辑控制方面用的最多的便是if..else,而过多的if..else虽在逻辑上很正确,但计算机有时却不能更好的执行此逻辑,故用if..retrun代替;在用活动状态决定开始按钮状态时用了哈希的方法

 function check_current_page_activity_status() {
        var status = Activity.get_current_page_activity_status();
        var check_current_page_activity_status = {
            unStart: function () {
                $scope.start_or_unStart = Activity.start_or_cannot_click_start_button();//如果活动状态为unStart执行此function,以下类似
            },
            start: function () {
                $scope.start_or_unStart = 'unStart';
            },
            end: function () {
                $scope.start_or_unStart = 'end_sign_up';
            }
        }
        if (check_current_page_activity_status [status]) {
            check_current_page_activity_status [status]()
        }
    }//if可以省略,因为活动的状态仅有上述三种(if的作用是,如果此状态存在则执行相应的方法)

2.在if()判断条件处如果是一个方法的返回值(或者是一个很长的判断条件)可以先定义一个变量等于要返回的那个函数(判断条件),这样会更一目了然

$scope.go_create = function () {
        var current_activity_bid = Bid.get_current_activity_bid();
        if (!current_activity_bid) {
            $navigate.go('/create active')
        }
    }

同理如果一个函数的返回值很长也可以把返回值抽成方法,再返回

3.三目运算符的使用

之前:

if(activity_names.length==0){return false;
          }else{return true;
}

之后:

 return activity_names.length == 0 ? false : true

4.使用_.chain来解决需要多次处理一个数组却得多次定义的复杂性

例如:

_.chain(biddings[bid_name])
        .groupBy(function (bidding) {
            return parseInt(bidding.price);
        })
        .map(function (value, key) {
            return{"price": key, "count": value.length}//.map的为.groupBy处理后的biddings[bid_name]
        })
        .value();//存在返回值

二.重构的方向

view:通过写haml来生成主界面,所需要的指示性数据,由controller提供

controller:中只写与界面交互的内容,不写具体的方法,通过调用方法来实现对界面的控制(提供view所需的数据源),

model:把所有controller所调的方法写在此model中,实现数据的增删改查

例如:

%button.btn.btn-primary(ng-switch-when ='start' ng-tap='start_sign_up()')开始

呈现在用户界面的是开始按钮可以点击,而start状态是在controller中提供的,而控制开始的方法又是在model定义的,controller调用

start_sign_up()方法也是在controller中调用的

三.model中方法的抽取

1.每个函数只实现一种功能

2.只有函数对象有prototype属性,每个函数都有构造函数constructor,当函数作为构造函数器构造一个新对象时函数的prototype属性才有意义,它所指的对象保留了新对象继承的属性

例如:

function Bid(activity_name) {
    var num = Activity.get_the_activity(activity_name).bids.length + 1;
    var name = '竞价' + num
    this.name = name;
    this.biddings = [];
};//为函数对象

Bid.prototype.create = function (activity_name) {
    var activities = Activity.get_activities()
    var bid = this//新对象继承了Bid(activity_name)的属性,减少了数据传送(注:使用this要提前定义,因为在经过_.map后this的值会改变)
     _.map(activities, function (the_activity) {
        the_activity['name'] == Activity.get_current_activity() ? the_activity['bids'].push(bid) : '';