【重构笔记01】第一个案例/补齐插件

前言

上一次写的日历插件基本完成，中间我和团队一个高手交流了一下，其实就是他code review我的代码了，最后我发现我之前虽然能完成交待下来的任务但是代码却不好看。

这个不好看，是由于各种原因就这样了，于是当时就想说重构下吧，但是任务一来就给放下了。

现在想来，就算真的要重构，但是也不一定知道如何重构，无论最近学习jquery代码还是其他其实都是为了在思想上有所提升而不一定是代码上

如何然自己的代码更优雅

如何让自己的程序可扩展性高

如何让自己的代码更可用

这些都是接下来需要解决的问题，学习一事如逆水行舟啊！所以我这里搞了一本《重构》一书，准备在好好学习一番。

关于插件

这个说是插件其实代码还是比较糟糕的，写到后面也没怎么思考了，这里暂且搞出来各位看看，等后面点《重构》学习结束了做一次重构吧！

由于是公司已经再用的代码，我这里就只贴js代码，CSS就不搞出来了，有兴趣的同学就自己看看吧，我这里截个图各位觉得有用就看看代码吧：

简单列表应用

 

触发change事件

这个东西就是第一列的变化第二个会跟着变，第二个变了第三个也会变，然后点击确定后会回调一个函数，并获得所选值。

不可选项

这个中当滑动到无效（灰色）的选项时，会重置为最近一个可选项

源代码

var ScrollList = function (opts) {

        //兼容性方案处理，以及后期资源清理
        var isTouch = 'ontouchstart' in document.documentElement;
                isTouch = true;
        this.start = isTouch ? 'touchstart' : 'mousedown';
        this.move = isTouch ? 'touchmove' : 'mousemove';
        this.end = isTouch ? 'touchend' : 'mouseup';
        this.startFn;
        this.moveFn;
        this.endFn;

        opts = opts || {};

        //数据源
        this.data = opts.data || [];
        this.dataK = {}; //以id作为检索键值

        this.initBaseDom(opts);

        this._changed = opts.changed || null;
        //当选情况下会有一个初始值
        this.selectedIndex = parseInt(this.disItemNum / 2); //暂时不考虑多选的情况
        if (this.type == 'list') {
            this.selectedIndex = -1;
        }
        this.selectedIndex = opts.index != undefined ? opts.index : this.selectedIndex;

        //如果数组长度有问题的话
        this.selectedIndex = this.selectedIndex > this.data.length ? 0 : this.selectedIndex;

        var isFind = false, index = this.selectedIndex;
        if (this.data[index] && (typeof this.data[index].disabled == 'undefined' || this.data[index].disabled == false)) {
            for (i = index, len = this.data.length; i < len; i++) {
                if (typeof this.data[i].disabled == 'undefined' || this.data[i].disabled == true) {
                    index = i;
                    isFind = true;
                    break;
                }
            }
            if (isFind == false) {
                for (i = index; i != 0; i--) {
                    if (typeof this.data[i].disabled == 'undefined' || this.data[i].disabled == true) {
                        index = i;
                        isFind = true;
                        break;
                    }
                }
            }
            if (isFind) this.selectedIndex = index;
        }

        this.animateParam = opts.animateParam || [50, 40, 30, 25, 20, 15, 10, 8, 6, 4, 2]; //动画参数
        this.animateParam = opts.animateParam || [10, 8, 6, 5, 4, 3, 2, 1, 0, 0, 0]; //动画参数

        this.setBaseParam();
        this.init();
    };
    ScrollList.prototype = {
        constructor: ScrollList,
        init: function () {
            this.initItem();
            this.wrapper.append(this.body);
            this.initEventParam();
            this.bindEvent();
            this.setIndex(this.selectedIndex, true);
        },
        //基本参数设置
        setBaseParam: function () {
            /*
            定位实际需要用到的信息
            暂时不考虑水平移动吧
            */
            this.setHeight = 0; //被设置的高度
            this.itemHeight = 0; //单个item高度
            this.dragHeight = 0; //拖动元素高度
            this.dragTop = 0; //拖动元素top
            this.timeGap = 0; //时间间隔
            this.touchTime = 0; //开始时间
            this.moveAble = false; //是否正在移动
            this.moveState = 'up'; //移动状态，up right down left
            this.oTop = 0; //拖动前的top值
            this.curTop = 0; //当前容器top
            this.mouseY = 0; //鼠标第一次点下时相对父容器的位置
            this.cooling = false; //是否处于冷却时间
        },
        initBaseDom: function (opts) {
            //容器元素
            this.wrapper = opts.wrapper || $(document);
            this.type = opts.type || 'list'; //list, radio

            //显示的项目，由此确定显示区域的高度，所以height无用
            this.disItemNum = 5;

            var id = opts.id || 'id_' + new Date().getTime();
            var className = opts.className || 'cui-roller-bd';

            var scrollClass;
            //单选的情况需要确定显示选择项
            if (this.type == 'list') {
                scrollClass = 'cui-select-view';
            }
            else if (this.type == 'radio') {
                scrollClass = 'ul-list';
                this.disItemNum = 3;
            }
            this.disItemNum = opts.disItemNum || this.disItemNum;
            this.disItemNum = this.disItemNum % 2 == 0 ? this.disItemNum + 1 : this.disItemNum; //必须是奇数

            scrollClass = opts.scrollClass || scrollClass;
            this.scrollClass = scrollClass;

            //这里使用height不还有待商榷，因为class含有样式

            this.body = $([
                    '<div class="' + className + '" style="overflow: hidden; position: relative; " id="' + id + '" >',
                    '</div>'
                    ].join(''));
            //真正拖动的元素（现在是ul）
            this.dragEl = $([
                    '<ul class="' + scrollClass + '" style="position: absolute; width: 100%;">',
                    '</ul>'
                    ].join(''));
            this.body.append(this.dragEl);
            //单选情况需要加入蒙版
            //            if (this.type == 'radio' && this.disItemNum != 1) {
            //                this.body.append($([
            //                        '<div class="cui-mask"></div>',
            //                        '<div class="cui-lines">&nbsp;</div>'
            //                        ].join('')));
            //            }
        },
        //增加数据
        initItem: function () {
            var _tmp, _data, i, k, val;
            this.size = this.data.length; //当前容量
            for (var i in this.data) {
                _data = this.data[i];
                _data.index = i;

                if (typeof _data.key == 'undefined') _data.key = _data.id;
                if (typeof _data.val == 'undefined') _data.val = _data.name;


                val = _data.val || _data.key;
                this.dataK[_data.key] = _data;
                _tmp = $('<li>' + val + '</li>');
                _tmp.attr('data-index', i);
                if (typeof _data.disabled != 'undefined' && _data.disabled == false) {
                    _tmp.css('color', 'gray');
                }

                this.dragEl.append(_tmp);
            }

        },
        //初始化事件需要用到的参数信息
        initEventParam: function () {
            //如果没有数据的话就在这里断了吧
            if (this.data.constructor != Array || this.data.length == 0) return false;
            var offset = this.dragEl.offset();
            var li = this.dragEl.find('li').eq(0);
            var itemOffset = li.offset();
            //暂时不考虑边框与外边距问题
            this.itemHeight = itemOffset.height;
            this.setHeight = this.itemHeight * this.disItemNum;
            this.body.css('height', this.setHeight);
            this.dragTop = offset.top;
            this.dragHeight = this.itemHeight * this.size;
            var s = '';
        },
        bindEvent: function () {
            var scope = this;
            this.startFn = function (e) {
                scope.touchStart.call(scope, e);
            };
            this.moveFn = function (e) {
                scope.touchMove.call(scope, e);
            };
            this.endFn = function (e) {
                scope.touchEnd.call(scope, e);
            };

            this.dragEl[0].addEventListener(this.start, this.startFn, false);
            this.dragEl[0].addEventListener(this.move, this.moveFn, false);
            this.dragEl[0].addEventListener(this.end, this.endFn, false);
        },
        removeEvent: function () {
            this.dragEl[0].removeEventListener(this.start, this.startFn);
            this.dragEl[0].removeEventListener(this.move, this.moveFn);
            this.dragEl[0].removeEventListener(this.end, this.endFn);
        },
        touchStart: function (e) {
            var scope = this;
            //冷却时间不能开始
            if (this.cooling) {
                setTimeout(function () {
                    scope.cooling = false;
                }, 500);
                return false;
            }
            //需要判断是否是拉取元素，此处需要递归验证，这里暂时不管
            //！！！！！！！！此处不严谨
            var el = $(e.target).parent(), pos;
            if (el.hasClass(this.scrollClass)) {
                this.touchTime = e.timeStamp;
                //获取鼠标信息
                pos = this.getMousePos((e.changedTouches && e.changedTouches[0]) || e);
                //注意，此处是相对位置，注意该处还与动画有关，所以高度必须动态计算
                //可以设置一个冷却时间参数，但想想还是算了
                //最后还是使用了冷却时间
                //最后的最后我还是决定使用动态样式获取算了
                var top = parseFloat(this.dragEl.css('top')) || 0;
                this.mouseY = pos.top - top;
                //                        this.mouseY = pos.top - this.curTop;
                this.moveAble = true;
            }
        },
        touchMove: function (e) {
            if (!this.moveAble) return false;
            var pos = this.getMousePos((e.changedTouches && e.changedTouches[0]) || e);
            //先获取相对容器的位置，在将两个鼠标位置相减
            this.curTop = pos.top - this.mouseY;
            this.dragEl.css('top', this.curTop + 'px');
            e.preventDefault();
        },
        touchEnd: function (e) {
            if (!this.moveAble) return false;
            this.cooling = true; //开启冷却时间

            //时间间隔
            var scope = this;
            this.timeGap = e.timeStamp - this.touchTime;
            var flag = this.oTop <= this.curTop ? 1 : -1; //判断是向上还是向下滚动
            var flag2 = this.curTop > 0 ? 1 : -1; //这个会影响后面的计算结果
            this.moveState = flag > 0 ? 'up' : 'down';
            var ih = parseFloat(this.itemHeight);
            var ih1 = ih / 2;

            var top = Math.abs(this.curTop);
            var mod = top % ih;
            top = (parseInt(top / ih) * ih + (mod > ih1 ? ih : 0)) * flag2;
            var step = parseInt(this.timeGap / 10 - 10);

            step = step > 0 ? step : 0;
            var speed = this.animateParam[step] || 0;
            var increment = speed * ih * flag;
            top += increment;

            //！！！此处动画可能导致数据不同步，后期改造需要加入冷却时间
            if (this.oTop != this.curTop && this.curTop != top) {
                this.dragEl.animate({
                    top: top + 'px'
                }, 100 + (speed * 20), 'ease-out', function () {
                    //                                scope.curTop = top;
                    scope.reset.call(scope, top);
                });
            } else {
                var item = this.dragEl.find('li');
                var el = $(e.target);
                item.removeClass('current');
                el.addClass('current');

                //这个由于使用了边距等东西，使用位置定位有点不靠谱了
                this.selectedIndex = el.attr('data-index');
                //单选多选列表触发的事件，反正都会触发
                this.type == 'list' && this.onTouchEnd();
                this.cooling = false; //关闭冷却时间
            }
            this.moveAble = false;
            e.preventDefault();

        },
        //超出限制后位置还原
        reset: function (top) {
            var scope = this;
            var num = parseInt(scope.type == 'list' ? 0 : scope.disItemNum / 2);
            var _top = top, t = false;

            var sHeight = scope.type == 'list' ? 0 : parseFloat(scope.itemHeight) * num;
            var eHeight = scope.type == 'list' ? scope.setHeight : parseFloat(scope.itemHeight) * (num + 1);
            var h = this.dragHeight;

            if (top >= 0) {
                if (top > sHeight) {
                    _top = sHeight;
                    t = true;
                } else {
                    //出现该情况说明项目太少，达不到一半
                    if (h <= sHeight) {
                        _top = sHeight - scope.itemHeight * (this.size - 1);
                        t = true;
                    }
                }
            }
            if (top < 0 && (top + scope.dragHeight <= eHeight)) {
                t = true;
                _top = (scope.dragHeight - eHeight) * (-1);
            }
            if (top == _top) {
                t = false;
            }
            if (t) {
                scope.dragEl.animate({
                    top: _top + 'px'
                }, 50, 'ease-in-out', function () {
                    scope.oTop = _top;
                    scope.curTop = _top;
                    scope.cooling = false; //关闭冷却时间
                    //单选时候的change事件
                    scope.type == 'radio' && scope.onTouchEnd();
                });
            } else {
                scope.oTop = top;
                scope.curTop = top;
                //单选时候的change事件
                scope.type == 'radio' && scope.onTouchEnd();
            }
            scope.cooling = false; //关闭冷却时间
        },
        onTouchEnd: function (scope) {
            scope = scope || this;

            var secItem, i, len, index, isFind;
            var changed = this._changed;
            var num = parseInt(this.type == 'list' ? 0 : this.disItemNum / 2);
            len = this.data.length;
            if (this.type == 'radio') {
                i = parseInt((this.curTop - this.itemHeight * num) / parseFloat(this.itemHeight));
                this.selectedIndex = Math.abs(i);
                secItem = this.data[this.selectedIndex];
            } else {
                secItem = this.data[this.selectedIndex];
            }

            //默认不去找
            isFind = false; //检测是否找到可选项
            //检测是否当前项不可选，若是不可选，需要还原到最近一个可选项
            if (typeof secItem.disabled != 'undefined' && secItem.disabled == false) {
                index = this.selectedIndex;
                //先向上计算
                if (this.moveState == 'up') {
                    for (i = index; i != 0; i--) {
                        if (typeof this.data[i].disabled == 'undefined' || this.data[i].disabled == true) {
                            index = i;
                            isFind = true;
                            break;
                        }
                    }
                    if (isFind == false) {
                        for (i = index; i < len; i++) {
                            if (typeof this.data[i].disabled == 'undefined' || this.data[i].disabled == true) {
                                index = i;
                                isFind = true;
                                break;
                            }
                        }
                    }
                } else {
                    for (i = index; i < len; i++) {
                        if (typeof this.data[i].disabled == 'undefined' || this.data[i].disabled == true) {
                            index = i;
                            isFind = true;
                            break;
                        }
                    }
                    if (isFind == false) {
                        for (i = index; i != 0; i--) {
                            if (typeof this.data[i].disabled == 'undefined' || this.data[i].disabled == true) {
                                index = i;
                                isFind = true;
                                break;
                            }
                        }
                    }
                }
            }

            //会有还原的逻辑
            if (isFind) {
                this.selectedIndex = index;
                this.setIndex(index);
            } else {
                var changed = this._changed;
                if (changed && typeof changed == 'function') {
                    changed.call(scope, secItem);
                }
            }
        },
        //数据重新加载
        reload: function (data) {

            this.data = data;
            this.dragEl.html('');
            if (data.constructor == Array && data.length > 0) {
                this.selectedIndex = parseInt(this.disItemNum / 2); //暂时不考虑多选的情况
                this.selectedIndex = this.selectedIndex > this.data.length ? this.data.length - 1 : this.selectedIndex;
                this.initItem();
                this.initEventParam();
                this.cooling = false;
                this.setIndex(this.selectedIndex, true);
            }
        },
        setKey: function (k) {
            if (k == undefined || k == null) return false;
            var i = this.dataK[k] && this.dataK[k].index;
            this.setIndex(i);
        },
        setIndex: function (i, init) {
            if (i == undefined || i < 0) return false;
            var scope = this;
            //                    this.cooling = true; //关闭冷却时间
            var num = parseInt(scope.disItemNum / 2);

            if (scope.type == 'list') {
                num = i == 0 ? 0 : 1;
            }

            var i = parseInt(i), top;
            if (i < 0) return false;
            if (i >= this.data.length) i = this.data.length - 1;
            this.selectedIndex = i;
            top = (i * this.itemHeight * (-1) + this.itemHeight * num);

            //防止设置失败
            scope.oTop = top;
            scope.curTop = top;
            scope.cooling = false; //关闭冷却时间
            //            scope.dragEl.css('top', top + 'px');

            scope.dragEl.animate({ 'top': top + 'px' }, 50, 'ease-in-out');


            if (scope.type == 'list') {
                var item = scope.dragEl.find('li');
                item.removeClass('current');
                item.eq(i).addClass('current');
            }
            //初始化dom选项时不触发事件
            if (!init) {
                //单选时候的change事件
                scope.onTouchEnd();
            }
        },
        getSelected: function () {
            return this.data[this.selectedIndex];
        },
        getByKey: function (k) {
            var i = this.dataK[k] && this.dataK[k].index;
            if (i != null && i != undefined)
                return this.data[i];
            return null;
        },
        //获取鼠标信息
        getMousePos: function (event) {
            var top, left;
            top = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
            left = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
            return {
                top: top + event.clientY,
                left: left + event.clientX
            };
        }
    };
    return ScrollList;

请使用手机/或者使用chrome开启touch功能查看，最新js代码已处理兼容性问题

http://sandbox.runjs.cn/show/prii13pm

总结

代码没来得及重构，各位将就下吧，接下来进入我们的重构学习！

重构第一步

简单程序

原来作者使用java写的，我这里用js实现可能有所不同，如果有问题请提出

首先我们跟着学习第一个例子，实例据说比较简单，是一个影片出租店用的程序，计算每一个顾客的消费金额并打印详情。

操作者告诉程序，影片分为三类：普通片/儿童片/租期多长，程序便根据租赁时间和影片类型计算费用，并且为常客计算积分

PS：然后作者画了个图，我们不去管他

Movie（影片）

//影片，单纯的数据类
var Movie = function (title, priceCode) {
    this._title = title;
    this._priceCode = priceCode;

};
Movie.CHILDRENS = 2;
Movie.REGULAR = 0;
Movie.NEW_RELEASE = 1;

Movie.prototype = {
    constructor: Movie,
    getPriceCode: function () {
        return this._priceCode;
    },
    setPriceCode: function (arg) {
        this._priceCode = arg;
    },
    getTitle: function () {
        return this._title;
    }
};

租赁

//租赁
var Rental = function (movie, daysRented) {
    this._movie = movie;
    this._daysRented = daysRented;
};

Rental.prototype = {
    constructor: Rental,
    getDaysRented: function () {
        return this._daysRented;
    },
    getMovie: function () {
        return this._movie;
    }
};

顾客

PS：这里用到了Vector，但是我们用数组代替吧

var Customer = function (name) {
    this._name = name;
    this._rentals = [];
};
Customer.prototype = {
    constructor: Customer,
    addRental: function (arg) {
        //加入的是一个rental实例
        this._rentals.push(arg);

    },
    getName: function () {
        return this._name;
    },
    //生成详细订单的函数，并拥有交互代码
    statement: function () {
        var totalAmount = 0,
        //积分
            frequentRenterPoints = 0,
        //原文为枚举类型
            rentals = this._rentals,
            result = 'rental record for ' + this.getName() + '\n';

        var i,
            thisAmount = 0,
            each = null,

            len = rentals.length;

        //PS：尼玛两年不搞java了，这里居然有点读不懂了。。。
        //这里大概是要遍历rentals的意思，所以代码我给变了点
        for (i = 0; i < len; i++) {
            thisAmount = 0;
            each = rentals[i];
            switch (each.getMovie().getPriceCode()) {
                case Movie.REGULAR:
                    thisAmount += 2;
                    if (each.getDaysRented() > 2) thisAmount += (each.getDaysRented() - 2) * 1.5;
                    break;
                case Movie.NEW_RELEASE:
                    thisAmount += each.getDaysRented() * 3;
                    break;
                case Movie.CHILDRENS:
                    thisAmount += 1.5;
                    if (each.getDaysRented() > 3) thisAmount += (each.getDaysRented() - 3) * 1.5;
                    break;
            }
            frequentRenterPoints++;
            if ((each.getMovie().getPriceCode() == Movie.NEW_RELEASE) && each.getDaysRented() > 1) frequentRenterPoints++;

            result += each.getMovie().getTitle() + '：' + thisAmount + '\n';
            totalAmount += thisAmount;
        }
        result += 'amount owed is ' + thisAmount + '\n';
        result += 'you earned ' + frequentRenterPoints;
        return result;
    }
};

先试试程序吧

//此处先做一个例子试试吧
var m1 = new Movie('刀戟戡魔录', 0);
var m2 = new Movie('霹雳神州', 1);
var m3 = new Movie('开疆记', 2);

var r1 = new Rental(m1, 1);
var r2 = new Rental(m2, 2);
var r3 = new Rental(m3, 3);

var y = new Customer('叶小钗');

y.addRental(r1);
y.addRental(r2);
y.addRental(r3);

alert(y.statement());

程序总结

PS：这里完全就算调用作者的话了，老夫到此除了认识到对java忘得差不多了，没有其他感受......

该程序具有以下特点：

① 不符合面向对象精神

② statement过长（这个我是真的感觉很长，我打了很久字）

③ 扩展性差

以上如果用户希望对系统做一点修改，比如希望用html输出，我们就发现statement整个就是一个2B了，于是我们一般会复杂粘贴一番（赶时间的情况至少我会这么做）

这样一来也许多了一个htmlStatement的函数，但是大量重复的代码，我是不能接受的，以下是一个因素：

如果计费标准发生变化了我们就需要修改代码！而且是维护两端代码（读到这，老夫感受很深啊），所以这里还可能带来潜在威胁哦！

于是现在来了第二个变化：

用户希望改变影片分类规则，但又不知道怎么改，他设想了几种方案，这些方案都会影响计算方式，那么又应该如何呢？？

PS：尼玛这简直是我们工作真正的写照啊！老板/产品 想要一个方案，但是又不知道想要神马！于是我们一般说的是这个不能实现（其实我们知道是可以实现的）

综上，你知道为什么要重构了吗？

至于你知不知道，反正我知道了。。。。。。

分解重组

测试

开始之前，作者大力强调了一下测试与建立单元测试的重要性，而且第四章会讲，我这里先不纠结啦:)

分解重组statement

第一步，我们需要将长得离谱的statement干掉，代码越小越简单，代码越小越少BUG

于是我们首先要找出代码的逻辑泥团，并运用extract method，至于本例，逻辑泥团就是switch语句，我们将它提炼成单独的函数

我们提炼一个函数时，我们要知道自己可能出什么错，提炼不好就可能引入BUG

PS：这种情况也经常在工作中出现，我改一个BUG，结果由于新的代码引起其它BUG！！！

提炼函数

找出在代码中的局部变量，这里是each与thisAmount，前者未变，后者会变

任何不会改变的变量都可以被当成参数传入新的函数，至于需要改变的变量就需要格外小心

如果只有一个变量会被修改，我们可以将它作为返回值

thisAmount是个临时变量，每次循环都会被初始化为0 ，并且在switch以前不会被修改，所以我们可以将它作为返回值使用

重构的代码

statement: function () {
    var totalAmount = 0,
    //积分
        frequentRenterPoints = 0,
    //原文为枚举类型
        rentals = this._rentals,
        result = 'rental record for ' + this.getName() + '\n';

    var i,
        thisAmount = 0,
        each = null,

        len = rentals.length;

    //PS：尼玛两年不搞java了，这里居然有点读不懂了。。。
    //这里大概是要遍历rentals的意思，所以代码我给变了点
    for (i = 0; i < len; i++) {
        thisAmount = 0;
        each = rentals[i];
        thisAmount = this._amountFor(each);
        frequentRenterPoints++;
        if ((each.getMovie().getPriceCode() == Movie.NEW_RELEASE) && each.getDaysRented() > 1) frequentRenterPoints++;

        result += each.getMovie().getTitle() + '：' + thisAmount + '\n';
        totalAmount += thisAmount;
    }
    result += 'amount owed is ' + thisAmount + '\n';
    result += 'you earned ' + frequentRenterPoints;
    return result;
},
_amountFor: function (each) {
    var thisAmount = 0;
    switch (each.getMovie().getPriceCode()) {
        case Movie.REGULAR:
            thisAmount += 2;
            if (each.getDaysRented() > 2) thisAmount += (each.getDaysRented() - 2) * 1.5;
            break;
        case Movie.NEW_RELEASE:
            thisAmount += each.getDaysRented() * 3;
            break;
        case Movie.CHILDRENS:
            thisAmount += 1.5;
            if (each.getDaysRented() > 3) thisAmount += (each.getDaysRented() - 3) * 1.5;
            break;
    }
    return thisAmount;
}

这里虽说只是做了一点改变，但是明显代码质量有所提升，然后内部的变量名也可以改变，比如：

① each => rental

② thisAmount => result

_amountFor: function (rental) {
    var result = 0;
    switch (rental.getMovie().getPriceCode()) {
        case Movie.REGULAR:
            result += 2;
            if (rental.getDaysRented() > 2) result += (rental.getDaysRented() - 2) * 1.5;
            break;
        case Movie.NEW_RELEASE:
            result += rental.getDaysRented() * 3;
            break;
        case Movie.CHILDRENS:
            result += 1.5;
            if (rental.getDaysRented() > 3) result += (rental.getDaysRented() - 3) * 1.5;
            break;
    }
    return result;
}

搬移“计算”代码

观察amountFor时，我们发现此处具有rental的信息，却没有customer的信息，所以这里有一个问题：

绝大多数情况，函数应该放在他使用的数据的所属对象内

所以amountFor其实应该放到rental中去，为了适应变化，就得去掉参数，并且我们这里讲函数名一并更改了

这里贴出完整的代码，各位自己看看

var Movie = function (title, priceCode) {
    this._title = title;
    this._priceCode = priceCode;

};
Movie.CHILDRENS = 2;
Movie.REGULAR = 0;
Movie.NEW_RELEASE = 1;

Movie.prototype = {
    constructor: Movie,
    getPriceCode: function () {
        return this._priceCode;
    },
    setPriceCode: function (arg) {
        this._priceCode = arg;
    },
    getTitle: function () {
        return this._title;
    }
};

//租赁
var Rental = function (movie, daysRented) {
    this._movie = movie;
    this._daysRented = daysRented;
};

Rental.prototype = {
    constructor: Rental,
    getDaysRented: function () {
        return this._daysRented;
    },
    getMovie: function () {
        return this._movie;
    },
    getChange: function () {
        var result = 0;
        switch (this.getMovie().getPriceCode()) {
            case Movie.REGULAR:
                result += 2;
                if (this.getDaysRented() > 2) result += (this.getDaysRented() - 2) * 1.5;
                break;
            case Movie.NEW_RELEASE:
                result += this.getDaysRented() * 3;
                break;
            case Movie.CHILDRENS:
                result += 1.5;
                if (this.getDaysRented() > 3) result += (this.getDaysRented() - 3) * 1.5;
                break;
        }
        return result;
    }
};

//顾客
var Customer = function (name) {
    this._name = name;
    this._rentals = [];
};
Customer.prototype = {
    constructor: Customer,
    addRental: function (arg) {
        //加入的是一个rental实例
        this._rentals.push(arg);

    },
    getName: function () {
        return this._name;
    },
    //生成详细订单的函数，并拥有交互代码
    statement: function () {
        var totalAmount = 0,
        //积分
        frequentRenterPoints = 0,
        //原文为枚举类型
        rentals = this._rentals,
        result = 'rental record for ' + this.getName() + '\n';

        var i,
        thisAmount = 0,
        each = null,

        len = rentals.length;

        //PS：尼玛两年不搞java了，这里居然有点读不懂了。。。
        //这里大概是要遍历rentals的意思，所以代码我给变了点
        for (i = 0; i < len; i++) {
            thisAmount = 0;
            each = rentals[i];
            thisAmount = this._amountFor(each);
            frequentRenterPoints++;
            if ((each.getMovie().getPriceCode() == Movie.NEW_RELEASE) && each.getDaysRented() > 1) frequentRenterPoints++;

            result += each.getMovie().getTitle() + '：' + thisAmount + '\n';
            totalAmount += thisAmount;
        }
        result += 'amount owed is ' + thisAmount + '\n';
        result += 'you earned ' + frequentRenterPoints;
        return result;
    },
    _amountFor: function (rental) {
        return rental.getChange();
    }
};

//此处先做一个例子试试吧
var m1 = new Movie('刀戟戡魔录', 0);
var m2 = new Movie('霹雳神州', 1);
var m3 = new Movie('开疆记', 2);

var r1 = new Rental(m1, 1);
var r2 = new Rental(m2, 2);
var r3 = new Rental(m3, 3);

var y = new Customer('叶小钗');

y.addRental(r1);
y.addRental(r2);
y.addRental(r3);

alert(y.statement());

Rental.prototype = {
    constructor: Rental,
    getDaysRented: function () {
        return this._daysRented;
    },
    getMovie: function () {
        return this._movie;
    },
    getChange: function () {
10         var result = 0;
11         switch (this.getMovie().getPriceCode()) {
12             case Movie.REGULAR:
13                 result += 2;
14                 if (this.getDaysRented() > 2) result += (this.getDaysRented() - 2) * 1.5;
15                 break;
16             case Movie.NEW_RELEASE:
17                 result += this.getDaysRented() * 3;
18                 break;
19             case Movie.CHILDRENS:
20                 result += 1.5;
21                 if (this.getDaysRented() > 3) result += (this.getDaysRented() - 3) * 1.5;
22                 break;
23         }
24         return result;
25     }
};

//顾客
var Customer = function (name) {
    this._name = name;
    this._rentals = [];
};
Customer.prototype = {
    constructor: Customer,
    addRental: function (arg) {
        //加入的是一个rental实例
        this._rentals.push(arg);

    },
    getName: function () {
        return this._name;
    },
    //生成详细订单的函数，并拥有交互代码
    statement: function () {
        var totalAmount = 0,
        //积分
        frequentRenterPoints = 0,
        //原文为枚举类型
        rentals = this._rentals,
        result = 'rental record for ' + this.getName() + '\n';

        var i,
        thisAmount = 0,
        each = null,

        len = rentals.length;

        //PS：尼玛两年不搞java了，这里居然有点读不懂了。。。
        //这里大概是要遍历rentals的意思，所以代码我给变了点
        for (i = 0; i < len; i++) {
            thisAmount = 0;
            each = rentals[i];
            thisAmount = each.getChange();
            frequentRenterPoints++;
            if ((each.getMovie().getPriceCode() == Movie.NEW_RELEASE) && each.getDaysRented() > 1) frequentRenterPoints++;

            result += each.getMovie().getTitle() + '：' + thisAmount + '\n';
            totalAmount += thisAmount;
        }
        result += 'amount owed is ' + thisAmount + '\n';
        result += 'you earned ' + frequentRenterPoints;
        return result;
    }
};

去除多余变量

于是，现在statement中就有一些多余的变量了：this.Amount，因为他完全等于each.getCharge()

于是乎，去掉吧：

statement: function () {
    var totalAmount = 0,
    //积分
    frequentRenterPoints = 0,
    //原文为枚举类型
    rentals = this._rentals,
    result = 'rental record for ' + this.getName() + '\n';

    var i,
    each = null,
    len = rentals.length;
    //PS：尼玛两年不搞java了，这里居然有点读不懂了。。。
    //这里大概是要遍历rentals的意思，所以代码我给变了点
    for (i = 0; i < len; i++) {
        each = rentals[i];
        frequentRenterPoints++;
        if ((each.getMovie().getPriceCode() == Movie.NEW_RELEASE) && each.getDaysRented() > 1) frequentRenterPoints++;

        result += each.getMovie().getTitle() + '：' + each.getChange() + '\n';
        totalAmount += each.getChange();
    }
    result += 'amount owed is ' + totalAmount + '\n';
    result += 'you earned ' + frequentRenterPoints;
    return result;
}

提炼“常客积分”计算

下面开始对常客积分计算进行处理，积分的计算因为种类而有所不同，看来有理由把积分计算的责任放入rental

var Movie = function (title, priceCode) {
    this._title = title;
    this._priceCode = priceCode;

};
Movie.CHILDRENS = 2;
Movie.REGULAR = 0;
Movie.NEW_RELEASE = 1;

Movie.prototype = {
    constructor: Movie,
    getPriceCode: function () {
        return this._priceCode;
    },
    setPriceCode: function (arg) {
        this._priceCode = arg;
    },
    getTitle: function () {
        return this._title;
    }
};

//租赁
var Rental = function (movie, daysRented) {
    this._movie = movie;
    this._daysRented = daysRented;
};

Rental.prototype = {
    constructor: Rental,
    getDaysRented: function () {
        return this._daysRented;
    },
    getMovie: function () {
        return this._movie;
    },
    getChange: function () {
        var result = 0;
        switch (this.getMovie().getPriceCode()) {
            case Movie.REGULAR:
                result += 2;
                if (this.getDaysRented() > 2) result += (this.getDaysRented() - 2) * 1.5;
                break;
            case Movie.NEW_RELEASE:
                result += this.getDaysRented() * 3;
                break;
            case Movie.CHILDRENS:
                result += 1.5;
                if (this.getDaysRented() > 3) result += (this.getDaysRented() - 3) * 1.5;
                break;
        }
        return result;
    },
    getFrequentRenterPoints: function () {
        if ((this.getMovie().getPriceCode() == Movie.NEW_RELEASE) && this.getDaysRented() > 1) return 2;
        else return 1;
    }
};

//顾客
var Customer = function (name) {
    this._name = name;
    this._rentals = [];
};
Customer.prototype = {
    constructor: Customer,
    addRental: function (arg) {
        //加入的是一个rental实例
        this._rentals.push(arg);

    },
    getName: function () {
        return this._name;
    },
    //生成详细订单的函数，并拥有交互代码
    statement: function () {
        var totalAmount = 0,
        //积分
    frequentRenterPoints = 0,
        //原文为枚举类型
    rentals = this._rentals,
    result = 'rental record for ' + this.getName() + '\n';

        var i,
    each = null,
    len = rentals.length;
        //PS：尼玛两年不搞java了，这里居然有点读不懂了。。。
        //这里大概是要遍历rentals的意思，所以代码我给变了点
        for (i = 0; i < len; i++) {
            each = rentals[i];
            /*
            重构掉的
            frequentRenterPoints++;
            if ((each.getMovie().getPriceCode() == Movie.NEW_RELEASE) && each.getDaysRented() > 1) frequentRenterPoints++;
            */
            frequentRenterPoints += each.getFrequentRenterPoints();

            result += each.getMovie().getTitle() + '：' + each.getChange() + '\n';
            totalAmount += each.getChange();
        }
        result += 'amount owed is ' + each.getChange() + '\n';
        result += 'you earned ' + frequentRenterPoints;
        return result;
    }
};

//此处先做一个例子试试吧
var m1 = new Movie('刀戟戡魔录', 0);
var m2 = new Movie('霹雳神州', 1);
var m3 = new Movie('开疆记', 2);

var r1 = new Rental(m1, 1);
var r2 = new Rental(m2, 2);
var r3 = new Rental(m3, 3);

var y = new Customer('叶小钗');

y.addRental(r1);
y.addRental(r2);
y.addRental(r3);

alert(y.statement());

PS：由于篇幅较长，我就不像上面一一标注改变啦

下面再去除一点临时变量：totalAmount

PS：但是，这里会多一次循环，到底哪个好，我也不知道了，多一个循环应该方便后面扩展吧，感觉作者要消灭所有临时变量啦

去除totalAmount/frequentRenterPoints

var Customer = function (name) {
    this._name = name;
    this._rentals = [];
};
Customer.prototype = {
    constructor: Customer,
    addRental: function (arg) {
        //加入的是一个rental实例
        this._rentals.push(arg);

    },
    getName: function () {
        return this._name;
    },
    //生成详细订单的函数，并拥有交互代码
    statement: function () {
        var each = null, result = '';
        for (var i = 0, len = this._rentals.length; i < len; i++) {
            each = this._rentals[i];
            result += each.getMovie().getTitle() + '：' + each.getChange() + '\n';
        }
        result += 'amount owed is ' + this.getTotal() + '\n';
        result += 'you earned ' + this.getTotalFrequentRenterPoints();
        return result;
    },
    getTotal: function () {
        var result = 0, each = null;
        for (var i = 0, len = this._rentals.length; i < len; i++) {
            each = this._rentals[i];
            result += each.getChange();
        }
        return result;
    },
    getTotalFrequentRenterPoints: function () {
        var result = 0, each = null;
        for (var i = 0, len = this._rentals.length; i < len; i++) {
            each = this._rentals[i];
            result += each.getFrequentRenterPoints();
        }
        return result;
    }
};

请各位仔细看，到这里我们的程序已经变话了许多了！！！你还记得最初的statement吗？

阶段总结

可以看到，我们这次重构没有减少代码，反而加了很多代码！而且还可能多了些循环呢！所以这次重构的结果是：

① 代码易读性提高

② 分离了statement

③ 代码增多

④ 性能降低

在此看来，可能因为1,2我们便不做重构了，但是

不能因为：
① 重构增加了代码量
② 重构降低了性能
而不做重构，因为重构完成前，这些只是你的一厢情愿

添加htmlStatement

htmlStatement: function () {
    var each = null,
    result = '<h1>rental record for ' + this.getName() + '</h1>';
    for (var i = 0, len = this._rentals.length; i < len; i++) {
        each = this._rentals[i];
        result += each.getMovie().getTitle() + '：' + each.getChange() + '<br/>';
    }
    result += 'amount owed is ' + this.getTotal() + '<br/>';
    result += 'you earned ' + this.getTotalFrequentRenterPoints();
    return result;
},

多态与if

好了，用户提出新需求了，需要修改分类规则。

这里我们又重新回到了我们的switch语句，我其实一般不使用switch语句，作者说最好不要在另一个对象属性继承上运用switch语句，要用也要在自己的数据上，而我基本不用。。。。。。

所以第一步，我们是将getCharge放入Movie中

getCharge搬家

PS：我怕好像将getCharge写错了。。。。。。

var Movie = function (title, priceCode) {
    this._title = title;
    this._priceCode = priceCode;

};
Movie.CHILDRENS = 2;
Movie.REGULAR = 0;
Movie.NEW_RELEASE = 1;

Movie.prototype = {
    constructor: Movie,
    getPriceCode: function () {
        return this._priceCode;
    },
    setPriceCode: function (arg) {
        this._priceCode = arg;
    },
    getTitle: function () {
        return this._title;
    },
    getCharge: function (daysRented) {
        var result = 0;
        switch (this.getPriceCode()) {
            case Movie.REGULAR:
                result += 2;
                if (daysRented > 2) result += (daysRented - 2) * 1.5;
                break;
            case Movie.NEW_RELEASE:
                result += daysRented * 3;
                break;
            case Movie.CHILDRENS:
                result += 1.5;
                if (daysRented > 3) result += (daysRented - 3) * 1.5;
                break;
        }
        return result;
    }
};

//租赁
var Rental = function (movie, daysRented) {
    this._movie = movie;
    this._daysRented = daysRented;
};

Rental.prototype = {
    constructor: Rental,
    getDaysRented: function () {
        return this._daysRented;
    },
    getMovie: function () {
        return this._movie;
    },
    getCharge: function () {
        return this.getMovie().getCharge(this.getDaysRented());
    },
    getFrequentRenterPoints: function () {
        if ((this.getMovie().getPriceCode() == Movie.NEW_RELEASE) && this.getDaysRented() > 1) return 2;
        else return 1;
    }
};

//顾客
var Customer = function (name) {
    this._name = name;
    this._rentals = [];
};
Customer.prototype = {
    constructor: Customer,
    addRental: function (arg) {
        //加入的是一个rental实例
        this._rentals.push(arg);

    },
    getName: function () {
        return this._name;
    },
    //生成详细订单的函数，并拥有交互代码
    statement: function () {
        var each = null,
        result = 'rental record for ' + this.getName() + '\n';
        for (var i = 0, len = this._rentals.length; i < len; i++) {
            each = this._rentals[i];
            result += each.getMovie().getTitle() + '：' + each.getCharge() + '\n';
        }
        result += 'amount owed is ' + this.getTotal() + '\n';
        result += 'you earned ' + this.getTotalFrequentRenterPoints();
        return result;
    },
htmlStatement: function () {
    var each = null,
    result = '<h1>rental record for ' + this.getName() + '</h1>';
    for (var i = 0, len = this._rentals.length; i < len; i++) {
        each = this._rentals[i];
        result += each.getMovie().getTitle() + '：' + each.getCharge() + '<br/>';
    }
    result += 'amount owed is ' + this.getTotal() + '<br/>';
    result += 'you earned ' + this.getTotalFrequentRenterPoints();
    return result;
},
    getTotal: function () {
        var result = 0, each = null;
        for (var i = 0, len = this._rentals.length; i < len; i++) {
            each = this._rentals[i];
            result += each.getCharge();
        }
        return result;
    },
    getTotalFrequentRenterPoints: function () {
        var result = 0, each = null;
        for (var i = 0, len = this._rentals.length; i < len; i++) {
            each = this._rentals[i];
            result += each.getFrequentRenterPoints();
        }
        return result;
    }
};

Movie

    getCharge: function (daysRented) {
        var result = 0;
        switch (this.getPriceCode()) {
            case Movie.REGULAR:
                result += 2;
                if (daysRented > 2) result += (daysRented - 2) * 1.5;
                break;
            case Movie.NEW_RELEASE:
                result += daysRented * 3;
                break;
            case Movie.CHILDRENS:
                result += 1.5;
                if (daysRented > 3) result += (daysRented - 3) * 1.5;
                break;
        }
        return result;
    }

Rental

    getCharge: function () {
        return this.getMovie().getCharge(this.getDaysRented());
    },

getFrequentRenterPoints采用同样方法处理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
//影片，单纯的数据类
var Movie = function (title, priceCode) {
    this._title = title;
    this._priceCode = priceCode;

};
Movie.CHILDRENS = 2;
Movie.REGULAR = 0;
Movie.NEW_RELEASE = 1;

Movie.prototype = {
    constructor: Movie,
    getPriceCode: function () {
        return this._priceCode;
    },
    setPriceCode: function (arg) {
        this._priceCode = arg;
    },
    getTitle: function () {
        return this._title;
    },
    getCharge: function (daysRented) {
        var result = 0;
        switch (this.getPriceCode()) {
            case Movie.REGULAR:
                result += 2;
                if (daysRented > 2) result += (daysRented - 2) * 1.5;
                break;
            case Movie.NEW_RELEASE:
                result += daysRented * 3;
                break;
            case Movie.CHILDRENS:
                result += 1.5;
                if (daysRented > 3) result += (daysRented - 3) * 1.5;
                break;
        }
        return result;
    },
    getFrequentRenterPoints: function (daysRented) {
        if ((this.getPriceCode() == Movie.NEW_RELEASE) && daysRented > 1) return 2;
        else return 1;
    }
};

//租赁
var Rental = function (movie, daysRented) {
    this._movie = movie;
    this._daysRented = daysRented;
};

Rental.prototype = {
    constructor: Rental,
    getDaysRented: function () {
        return this._daysRented;
    },
    getMovie: function () {
        return this._movie;
    },
    getCharge: function () {
        return this.getMovie().getCharge(this.getDaysRented());
    },
    getFrequentRenterPoints: function () {
        return this.getMovie().getFrequentRenterPoints(this.getDaysRented());
    }
};

//顾客
var Customer = function (name) {
    this._name = name;
    this._rentals = [];
};
Customer.prototype = {
    constructor: Customer,
    addRental: function (arg) {
        //加入的是一个rental实例
        this._rentals.push(arg);

    },
    getName: function () {
        return this._name;
    },
    //生成详细订单的函数，并拥有交互代码
    statement: function () {
        var each = null,
        result = 'rental record for ' + this.getName() + '\n';
        for (var i = 0, len = this._rentals.length; i < len; i++) {
            each = this._rentals[i];
            result += each.getMovie().getTitle() + '：' + each.getCharge() + '\n';
        }
        result += 'amount owed is ' + this.getTotal() + '\n';
        result += 'you earned ' + this.getTotalFrequentRenterPoints();
        return result;
    },
htmlStatement: function () {
    var each = null,
    result = '<h1>rental record for ' + this.getName() + '</h1>';
    for (var i = 0, len = this._rentals.length; i < len; i++) {
        each = this._rentals[i];
        result += each.getMovie().getTitle() + '：' + each.getCharge() + '<br/>';
    }
    result += 'amount owed is ' + this.getTotal() + '<br/>';
    result += 'you earned ' + this.getTotalFrequentRenterPoints();
    return result;
},
    getTotal: function () {
        var result = 0, each = null;
        for (var i = 0, len = this._rentals.length; i < len; i++) {
            each = this._rentals[i];
            result += each.getCharge();
        }
        return result;
    },
    getTotalFrequentRenterPoints: function () {
        var result = 0, each = null;
        for (var i = 0, len = this._rentals.length; i < len; i++) {
            each = this._rentals[i];
            result += each.getFrequentRenterPoints();
        }
        return result;
    }
};

//此处先做一个例子试试吧
var m1 = new Movie('刀戟戡魔录', 0);
var m2 = new Movie('霹雳神州', 1);
var m3 = new Movie('开疆记', 2);

var r1 = new Rental(m1, 1);
var r2 = new Rental(m2, 2);
var r3 = new Rental(m3, 3);

var y = new Customer('叶小钗');

y.addRental(r1);
y.addRental(r2);
y.addRental(r3);
window.onload = function () {
    document.getElementById('d').innerHTML = y.htmlStatement();
};
    </script>
</head>
<body>
 <div id="d"></div>
</body>
</html>

PS：这里搞完了，我没有发现和多态有太多关系的东西啦。。。。。。于是，继续往下看吧

继承

PS：这里要用到继承，我们应该使用前面博客的方法，但是现在就随便搞下吧

我们为Movie建立三个子类

ChildrenMovie RegularMovie NewReleseaMovie

PS：作者这里使用了抽象类神马的，我思考下这里怎么写......

 

 

 

 

 

 

结语

好了，今天的学习暂时到此，下次我们就真的开始系统学习重构知识了。