重构代码的重要性

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

先贴下样例看看:

        //优化前
        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了

有没有觉得优化后的代码比较优雅呀
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页