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

Question

举个栗子
通过点击不同的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);
   };

这部分没有效果

Answer 1

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

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

Answer 2

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