重构代码的重要性

不知大家是否有重构代码的习惯，之前我也是没有的，通过参加这次的学习，完成任务后，观看他的代码瞬间觉得要钻进泥土的感觉。

先贴下样例看看：

        //优化前
        var list = document.querySelectorAll("li");
            for (var i = i = 0, len = list.length; i < len; i++) {
            list[i].onclick = function(e) {
                var t = e.target;
                var c = t.style.backgroundColor;
                var p = document.getElementsByClassName("color-picker")[0]
                p.innerHTML = c;
                p.style.color = c;

            }
        }


        //优化后
        var list = document.querySelectorAll("li");
        var ul = document.querySelector('ul');
        var pELe = document.querySelector('.color-picker');
        ul.onclick = function(e){
            pELe.innerHTML = e.target.style.backgroundColor;
            pELe.style.color = e.target.style.backgroundColor;
        };

//优化前
    var btnEle = document.querySelector('#fade-btn'),
            objEle = document.querySelector('#fade-obj'),
            num = 10;
    var flag = true,
            insetIn,
            outsetIn;
    btnEle.onclick = function(){
            if(num > 0){
                fadeOut();
            }else{
                fadeIn()
            }
    };

    var fadeOut = function(){
        outsetIn = setInterval(function(){
            btnEle.disabled = true;
            btnEle.innerHTML = '淡入';
            num--;
            objEle.style.opacity = num / 10;

            if(num > 0){
                btnEle.innerHTML = '淡出';
            }else{
                console.log(num)
                btnEle.disabled = false;
                clearInterval(outsetIn);        
            }
        },300);
    };

    var fadeIn = function(){
        insetIn = setInterval(function(){
            btnEle.disabled = true;
            if(num <= 10){
                num++;
                objEle.style.opacity = num / 10;
            }else{
                btnEle.disabled = false;
                clearInterval(insetIn);
                btnEle.innerHTML = '淡出';
            }
        },300);
    };

    //优化后
    var btnEle = document.querySelector('#fade-btn'),
            objEle = document.querySelector('#fade-obj'),
            num = 10,
            //淡入淡出开关
            flag = true,
            fadeText = '',
            insetIn,
            outsetIn;

    btnEle.onclick = function(){
        fadeCommon();
    };

    /**
     * [fadeCommon function]
     * 淡入淡出的方法
     */
    var fadeCommon = function(){
        insetIn = setInterval(function(){
            btnEle.disabled = true;

            if(flag){
                num--;
            }else{
                num++;
            }

            objEle.style.opacity = num / 10;

            if(num <= 0 || num >= 10){
                clearInterval(insetIn);
                btnEle.disabled = false;

                if(num){
                    fadeText = (flag = true)? '淡出' : '淡入';
                    btnEle.innerHTML = fadeText;
                }else{
                    fadeText = (flag = false) ? '淡出' : '淡入';
                    btnEle.innerHTML = fadeText;    
                }
            }
        },30)
    };

从这些列子可以看出，第一次提交的代码虽说功能实现了，但是有么有觉得代码很臃肿和非常的绕呀，其实最主要的原因，做之前自己还是个懵逼的状态，不知道要干嘛，还有就是基础不够坚固导致。

第一个例子相信大家都看过了不解说了，我只解说下例子2吧。

该例子是要做出背景色淡出淡入的效果

优化前的思路

1. 通过css透明度属性控制淡出淡入的效果 opacity；

2. 建立按钮点击事件，在点击事件中触发淡出淡入的事件方法，也可以直接放到点击事件当中，最好还是提取一个方法调用，以便后期维护。

3. 开始编写淡入淡出的方法，当时想opacity这个属性值只有0到1之间呀，怎么弄啊，怎么递减啊，苦思冥想了许久啊，然后大骂自己是猪脑袋，不可以直接让他变成10吗，然后除以10不就是1呀，猪吧...

4. 新建个按钮元素变量为 btnEle，用来获取按钮DOM元素，用于触发点击事件

5. 新建个淡入淡出效果的div元素变量为 objEle，获取DIVDOM元素，用于改变透明度，达到淡出淡入的效果

6. 新建数字变量为 num 默认值为10，因为默认是淡出，用于递减

7. 开始编写一个淡出函数事件，再编写一个淡入的函数事件，函数内部再做 变量num递减、改变 objEle 背景透明度，然后判断 num 是否大于0，否则改变 btnEle 的文字叫淡入，第二个淡入事件同理，只是判断条件改变和 btnEle 文字不同而已，

8. 新建个 btnEle点击事件，在该事情中判断 num 是否大于0，为真执行淡出函数方法，否则执行淡入函数方法；

9. 到这步，浏览器可以完美的执行了，不过当时已经想做重构了，因为看到了很多的重复代码，重构到最后有个难题难住了，就是条件判断和场景区分阿，最终已失败告终，然后提交代码，赶紧上班，在空余的时间中，看了看他的代码，然后又继续重构了

优化后的思路

1. 在优化前的思路新增个状态变量为 flag，该变量默认值为true，用于场景区分，淡出 or 淡入

2. 将淡出和淡入的函数方法合并一个方法事件，一开始就给个条件判读，判断flag是否为真，为真时 num递减，否则num递增，执行完该判断语句，开始执行，改变 objEle 背景透明度的语句，再判断num是否小于等于0或者大于等于10，为真时，清楚setInterval()这个方法，再判断num是否大于0，为真修改btnELe文字为淡出并且将flag设置为teue，否则为淡入并且将flag设置为false;好ok了

有没有觉得优化后的代码比较优雅呀