javascript - 不要重复自己

Closed. This question needs to be more focused。它当前不接受答案。
                        
                    
                
            
        
            
        
                
                    
                
            
                
                    想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                
                    4年前关闭。
            
        

    

想知道是否有更好的方式编写此小块代码，并牢记DRY。我当然看到了功能上的相似之处，但是我不确定如何缩短它。另外，我想知道缩短会带来多少不同（如果有）。谢谢杰森

var adminAlert = {

  alert: function() {

    var sumAlert = sumSupport = sumCashout = sumPhone = 0;

    $.getJSON("alertFeed.JSON", function(data) {

      $.each(data.alertData, function(i, allAlerts) {

        sumAlert += parseFloat(allAlerts.value);
        sumSupport += parseFloat(allAlerts.support);
        sumCashout += parseFloat(allAlerts.cashout);
        sumPhone += parseFloat(allAlerts.phone);

        $(".alertPoints").html(sumAlert);
        $(".support-requests").html(sumSupport);
        $(".cashout-giftcards").html(sumCashout);
        $(".phone-verification").html(sumPhone);
      });
    });
  }
};

最佳答案

下方的版本更干燥。基本上，要使代码干燥，您：


确定重复的内容。您的情况是parseFloat(allAlerts.foobar)和$(".blablabla").html(foobar);
找出这些重复之间的区别。在您的情况下，您在allAlerts对象中使用了一系列4个键：'value'，'support'，'cashout'和'phone'。这四个键中的每个键都对应一个CSS选择器，例如cashout对应于".cashout-giftcards";
将您在第2步中确定的内容放入声明式地图。在您的情况下：

{
    'value': 'alertPoints',
    'support': 'support-requests',
    'cashout': 'cashout-giftcards',
    'phone': 'phone-verification'
}

4.使用在步骤3中创建的映射，用更统一的/抽象的代码替换在步骤1中标识的内容。在您的情况下，像sumCashout += parseFloat(allAlerts.cashout);这样的四行只能替换为sum[k] = parseFloat(allAlerts[k])的一行。

var
// To avoid repeatedly doing stuff like $(".alertPoints").html(sumAlert),
// we'll declare a concise map defining what will be updated by what:
    map = {
        'value': 'alertPoints', // later we will use this to update $(".alertPoints") with what comes from allAlerts.value
        'support': 'support-requests', // later we will use this to update $(".support-requests") with what comes from allAlerts.support
        'cashout': 'cashout-giftcards',
        'phone': 'phone-verification'
    },
    adminAlert = {
        alert: function(){
            var
                // Let's define an object that will hold the sums for us
                sum = {},
                // And also a variable to iterate our map;
                k;
            $.getJSON("alertFeed.JSON", function(data) {
                $.each(data.alertData, function(i, allAlerts) {
                    // So we have 4 things to sum and update.
                    // They all are defined in our map.
                    // Lets go through the map and get things done:
                    for (k in map) {
                        // The value of k will be "value", "support" etc...
                        if (!(k in sum)) {
                            // In case the `sum` object does not yet have a key equal to the value of `k`, we initiate it.
                            // This is to have a start value of 0 to start adding to it:
                            sum[k] = 0;
                        }
                        // This is effectively the same as
                        // sumAlert += parseFloat(allAlerts.value) etc. etc.
                        // but written in unified manner to cover all the four cases.
                        // So when say `k` equals to `cashout`, this
                        // will be the same as `sum.cashout += parseFloat(allAlerts.cashout)`
                        sum[k] += parseFloat(allAlerts[k]);
                        // Again, a unified version of
                        // $(".alertPoints").html(sumAlert) etc. etc.
                        $('.' + map[k]).html(sum[k]);
                    }
                });
            });
        }
    };

就差异而言–维护/修复/调试/扩展等更加容易。性能可能大致相同。

关于javascript - 不要重复自己，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31218095/