Question

我无法简化AJAX中的代码。我使用如下的AJAX，它的工作完美，但代码看起来很脏。

$.ajax({
    url: "api/indexMajorNewsGroup.json",
    dataType:'json',
    type: 'GET',
    cache: false,
    ifModified: true,
    success: function getData(result){

             // =======other function=======

            if(window.innerWidth>1280) {
                textEllipsis('.biggestNews .majorNews h2',0,30);
                textEllipsis('.otherNews #news2 h2',1,30);
                textEllipsis('.otherNews #news3 h2',2,30);
                textEllipsis('.otherNews #news4 h2',3,30);
                textEllipsis('.otherNews #news5 h2',4,30);
            }else if(window.innerWidth>980 && window.innerWidth<1280){
                textEllipsis('.biggestNews .majorNews h2',0,15);
                textEllipsis('.otherNews #news2 h2',1,10);
                textEllipsis('.otherNews #news3 h2',2,10);
                textEllipsis('.otherNews #news4 h2',3,10);
                textEllipsis('.otherNews #news5 h2',4,10);
            }else{
                //mb
                textEllipsis('#newsMb1 h2',0,15);
                textEllipsis('.otherNews #news2 h2',1,15);
                textEllipsis('.otherNews #news3 h2',2,15);
                textEllipsis('.otherNews #news4 h2',3,15);
                textEllipsis('.otherNews #news5 h2',4,15);
                textEllipsis('#newsMb2 h2',5,15);
            }

           // =======other function=======

           function NewsSlideRule(){

              // =======other function=======

              if(window.innerWidth>1280) {
                textEllipsis('.biggestNews .majorNews h2',0,30);
                textEllipsis('.otherNews #news2 h2',1,30);
                textEllipsis('.otherNews #news3 h2',2,30);
                textEllipsis('.otherNews #news4 h2',3,30);
                textEllipsis('.otherNews #news5 h2',4,30);
            }else if(window.innerWidth>980 && window.innerWidth<1280){
                textEllipsis('.biggestNews .majorNews h2',0,15);
                textEllipsis('.otherNews #news2 h2',1,10);
                textEllipsis('.otherNews #news3 h2',2,10);
                textEllipsis('.otherNews #news4 h2',3,10);
                textEllipsis('.otherNews #news5 h2',4,10);
            }else{
                //mb
                textEllipsis('#newsMb1 h2',0,15);
                textEllipsis('.otherNews #news2 h2',1,15);
                textEllipsis('.otherNews #news3 h2',2,15);
                textEllipsis('.otherNews #news4 h2',3,15);
                textEllipsis('.otherNews #news5 h2',4,15);
                textEllipsis('#newsMb2 h2',0,15);
            }
         }

    }

我尝试将if置于函数中，如下所示：

function RWDtextEllipsis(){

            if(window.innerWidth>1280) {
                textEllipsis('.biggestNews .majorNews h2',0,30);
                textEllipsis('.otherNews #news2 h2',1,30);
                textEllipsis('.otherNews #news3 h2',2,30);
                textEllipsis('.otherNews #news4 h2',3,30);
                textEllipsis('.otherNews #news5 h2',4,30);
            }else if(window.innerWidth>980 && window.innerWidth<1280){
                textEllipsis('.biggestNews .majorNews h2',0,15);
                textEllipsis('.otherNews #news2 h2',1,10);
                textEllipsis('.otherNews #news3 h2',2,10);
                textEllipsis('.otherNews #news4 h2',3,10);
                textEllipsis('.otherNews #news5 h2',4,10);
            }else{
                //mb
                textEllipsis('#newsMb1 h2',0,15);
                textEllipsis('.otherNews #news2 h2',1,15);
                textEllipsis('.otherNews #news3 h2',2,15);
                textEllipsis('.otherNews #news4 h2',3,15);
                textEllipsis('.otherNews #news5 h2',4,15);
                textEllipsis('#newsMb2 h2',0,15);
            }
        }

在RWDtextEllipsis()和NewsSlideRule()之外拨打NewsSlideRule()，但它已被破坏。

它出了什么问题？

是否有任何建议来简化我的代码？

Answer 1

对于.otherNews来电，实际上只有一个论点在所有这些中都有所不同 - 最后一个。根据每个条件设置与最后一个参数对应的变量，然后调用每个函数。

第一部分：

const otherNewsLastArg = (() => {
  if (window.innerWidth > 1280) return 30;
  if (window.innerWidth > 980) return 10;
  return 15;
})();

if (otherNewsLastArg !== 10) {
  textEllipsis('.biggestNews .majorNews h2', 0, otherNewsLastArg);
} else {
  textEllipsis('.biggestNews .majorNews h2', 0, 15);
}

textEllipsis('.otherNews #news2 h2', 1, otherNewsLastArg);
textEllipsis('.otherNews #news3 h2', 2, otherNewsLastArg);
textEllipsis('.otherNews #news4 h2', 3, otherNewsLastArg);
textEllipsis('.otherNews #news5 h2', 4, otherNewsLastArg);

if (otherNewsLastArg === 15) textEllipsis('#newsMb2 h2',5,15);

我们不清楚你希望NewsSlideRule如何与上述代码相关联。

Answer 2

虽然＆＃34;简化＆＃34;的定义在某种程度上是个人的，这是一个如何让函数看起来更简单的选项

function RWDtextEllipsis(){
    radius = 0;
    if (window.innerWidth > 980) {
        if(window.innerWidth > 1280) {
            radius = 30;
        } else {
            radius = 10;
        }
        textEllipsis('.biggestNews .majorNews h2',0,15);
    } else {
        radius = 15;
        textEllipsis('#newsMb1 h2',0,15);
        textEllipsis('#newsMb2 h2',0,15);
    }

    // Those repeat on every condition, so put it outside the conditions
    textEllipsis('.otherNews #news2 h2', 1, radius); 
    textEllipsis('.otherNews #news3 h2', 2, radius); 
    textEllipsis('.otherNews #news4 h2', 3, radius); 
    textEllipsis('.otherNews #news5 h2', 4, radius);
    // Which could be further "simplified" to:
    //for (i = 1; i < 5; i++) {
    //    textEllipsis('.otherNews #news2 h2', i, radius); 
    //}
}

如果您正在寻找完整的代码优化，请查看Google Closure

使用AJAX中的函数简化代码

2 个答案: