首页 > 有很多重复js功能的代码,在可维护的情况下应该怎么去简化代码?

有很多重复js功能的代码,在可维护的情况下应该怎么去简化代码?

举个栗子
通过点击不同的tab标签去替换轮播图的src,引用方法如下。
以下这段代码能不能把公共的部分剔除出来,写成构造函数的形式。

   window.onload=function(){
        MarketPreloader();
        MallDesign();
    };
    
    function MarketPreloader(){
        var srcList = ['imgs/57.jpg','imgs/57.jpg','imgs/2008122510134038_2.jpg','imgs/5290458_114840036316_2.jpg'];
        var $domlist=$("#change-banner>li img");
        $domlist.each(function (idx, ele) {
             
            if(srcList[idx]){
                ele.setAttribute('src', srcList[idx]);
            }
    
        });
    }

function MallPreloader(){

    var srcList = ['imgs/18071023_164300608000_2.jpg','imgs/18071023_164300608000_2.jpg','imgs/2008122510134038_2.jpg','imgs/5290458_114840036316_2.jpg'];
    var $domlist=$("#change-banner>li img");
    $domlist.each(function (idx, ele) {
         
        if(srcList[idx]){
            ele.setAttribute('src', srcList[idx]);
        }

    });
}
function ShopPreloader(){

    var srcList = ['imgs/5290458_114840036316_2.jpg','imgs/5290458_114840036316_2.jpg','imgs/2008122510134038_2.jpg','imgs/5290458_114840036316_2.jpg'];
    var $domlist=$("#change-banner>li img");
    $domlist.each(function (idx, ele) {
         
        if(srcList[idx]){
            ele.setAttribute('src', srcList[idx]);
        }

    });
}

function MarketDesign(){
    var srcList = ['imgs/2008111384358912_2.jpg','imgs/57.jpg','imgs/2008122510134038_2.jpg','imgs/5290458_114840036316_2.jpg'];
    var $domlist=$("#design-banner>li img");
    $domlist.each(function (idx, ele) {
         
        if(srcList[idx]){
            ele.setAttribute('src', srcList[idx]);
        }

    });
}
function ShopDesign(){
    var srcList = ['imgs/banner-nth-5.png','imgs/57.jpg','imgs/57.jpg','imgs/5290458_114840036316_2.jpg'];
    var $domlist=$("#design-banner>li img");
    $domlist.each(function (idx, ele) {
         
        if(srcList[idx]){
            ele.setAttribute('src', srcList[idx]);
        }

    });
}
function MallDesign(){
    var srcList = ['imgs/banner-nth-1.png','imgs/banner-nth-1.png','imgs/2008122510134038_2.jpg','imgs/5290458_114840036316_2.jpg'];
    var $domlist=$("#design-banner>li img");
    $domlist.each(function (idx, ele) {
         
        if(srcList[idx]){
            ele.setAttribute('src', srcList[idx]);
        }

    });
}



根据大家的评论已经把代码修改如下


    window.onload=function(){
    Preloader(MarketList,domList);
    Preloader(MarketDesignList,domList1);
};

var domList,domList1;
domList=$("#change-banner>li img");
domList1=$("#design-banner>li img");
var MarketList,MallList,ShopList,MarketDesignList,ShopDesignList,MallDesignList;
MarketList=['imgs/57.jpg','imgs/57.jpg','imgs/2008122510134038_2.jpg','imgs/5290458_114840036316_2.jpg'];
MallList=['imgs/18071023_164300608000_2.jpg','imgs/18071023_164300608000_2.jpg','imgs/2008122510134038_2.jpg','imgs/5290458_114840036316_2.jpg'];
ShopList=['imgs/5290458_114840036316_2.jpg','imgs/5290458_114840036316_2.jpg','imgs/2008122510134038_2.jpg','imgs/5290458_114840036316_2.jpg'];
MarketDesignList=['imgs/2008111384358912_2.jpg','imgs/57.jpg','imgs/2008122510134038_2.jpg','imgs/5290458_114840036316_2.jpg'];
ShopDesignList=['imgs/banner-nth-5.png','imgs/57.jpg','imgs/57.jpg','imgs/5290458_114840036316_2.jpg'];
MallDesignList=['imgs/banner-nth-1.png','imgs/banner-nth-1.png','imgs/2008122510134038_2.jpg','imgs/5290458_114840036316_2.jpg'];
function Preloader(srcList,$domlist){
    $domlist.each(function (idx, ele) {
        if(srcList[idx]){
            ele.setAttribute('src', srcList[idx]);
        }
    });
}

但是页面载入的时候

    window.onload=function(){
             Preloader(MarketList,domList);
           Preloader(MarketDesignList,domList1);
   };

这部分没有效果


function XXX(srcList,$domlist){
    $domlist.each(function (idx, ele) {
        if(srcList[idx]){
            ele.setAttribute('src', srcList[idx]);
        }
    });
}

用的时候更改参数随便调吖 

如果项目基本完成了,项目变动不会太大的情况下,你可以把几个function合并一下,把srcList当做参数传进function中,这样就可以大大减少代码量。

【热门文章】
【热门文章】