【重構筆記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); 21         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; 33     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; 47 }

這里雖說只是做了一點改變，但是明顯代碼質量有所提升，然后內部的變量名也可以改變，比如：

① 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：作者這里使用了抽象類神馬的，我思考下這里怎么寫......

 

 

 

 

 

 

結語

好了，今天的學習暫時到此，下次我們就真的開始系統學習重構知識了。