如何編寫更少的代碼並完成更多的工作？

Question

使用 ES6 類很棒，但我發現自己到處都在使用 this.variable，它總是指我的 class。有沒有辦法讓我的 class 中的隱含全局變量被隱含 this.variable 代替？

jQuery(document).ready(function () {
         jQuery.get('https://ipapi.co/currency/', function(data){      
            
           if (data == 'USD')
           {
                jQuery(".agency-usd, .studio-usd, .small-usd, .price-USD").removeClass("hide");
                jQuery(".agency-eur, .studio-eur, .small-eur, .price-EUR").addClass("hide");
                jQuery(".agency-gbp, .studio-gbp, .small-gbp, .price-GBP").addClass("hide");
                jQuery(".agency-aud, .studio-aud, .small-aud, .price-AUD").addClass("hide");
           }
           else if(data == 'EUR')
           {
                jQuery(".agency-eur, .studio-eur, .small-eur, .price-EUR").removeClass("hide");
                jQuery(".agency-usd, .studio-usd, .small-usd, .price-USD").addClass("hide");
                jQuery(".agency-gbp, .studio-gbp, .small-gbp, .price-GBP").addClass("hide");
                jQuery(".agency-aud, .studio-aud, .small-aud, .price-AUD").addClass("hide"); 
           }
           else if(data == 'GBP')
           {
                jQuery(".agency-gbp, .studio-gbp, .small-gbp, .price-GBP").removeClass("hide");
                jQuery(".agency-eur, .studio-eur, .small-eur, .price-EUR").addClass("hide");
                jQuery(".agency-usd, .studio-usd, .small-usd, .price-USD").addClass("hide");
                jQuery(".agency-aud, .studio-aud, .small-aud, .price-AUD").addClass("hide");
           }
            else if(data == 'AUD')
           {

                jQuery(".agency-aud, .studio-aud, .small-aud, .price-AUD").removeClass("hide");
                jQuery(".agency-gbp, .studio-gbp, .small-gbp, .price-GBP").addClass("hide");
                jQuery(".agency-eur, .studio-eur, .small-eur, .price-EUR").addClass("hide");
                jQuery(".agency-usd, .studio-usd, .small-usd, .price-USD").addClass("hide");
           }
           else{
                jQuery(".agency-usd, .studio-usd, .small-usd, .price-USD").removeClass("hide");
                jQuery(".agency-eur, .studio-eur, .small-eur, .price-EUR").addClass("hide");
                jQuery(".agency-gbp, .studio-gbp, .small-gbp, .price-GBP").addClass("hide");
                jQuery(".agency-aud, .studio-aud, .small-aud, .price-AUD").addClass("hide");

           }
         
          }); 
        });

Answer 1

如何編寫更少的代碼並完成更多的工作？

通過使顯示的代碼成為表驅動並消除所有重復代碼（通常稱為DRY ，表示“不要重復自己”），您當然可以編寫更少的代碼：

const currencyTable = {
    USD: ".agency-usd, .studio-usd, .small-usd, .price-USD",
    EUR: ".agency-eur, .studio-eur, .small-eur, .price-EUR",
    GBP: ".agency-gbp, .studio-gbp, .small-gbp, .price-GBP",
    AUD: ".agency-aud, .studio-aud, .small-aud, .price-AUD"
};

jQuery(document).ready(function() {
    jQuery.get('https://ipapi.co/currency/', function(data) {

        // hide all by default
        Object.values(currencyTable).forEach(cls => jQuery(cls).addClass("hide"));

        // see which one to show
        const showClass = currencyTable[data] || currencyTable["USD"];
        jQuery(showClass).removeClass("hide");
    });
});

請注意，此代碼也是可自動擴展的。 如果您想添加另一種貨幣，您只需在currencyTable中添加一行並將相應的 HTML 添加到您的頁面，此代碼會自動支持它。

---

您沒有顯示任何使用 ES6 類或this.something的代碼，因此很難確切地知道您在問什么。 Javascript 曾經有with關鍵字可以讓你跳過一些輸入，但由於多種原因，它不再被推薦，甚至在包含 ES6 方法的strict模式代碼中也不可用。

Answer 2

第一個執行類似和/或重復的主要任務，並將它們實現為正確命名的函數。

在這樣的功能中，人們會尋求進一步的改進，比如不要總是一次又一次地查詢同一個字段。 相反，就像貨幣一樣，人們可以訪問/查詢這些字段一次，並將它們存儲在 map 中，例如 object。

因此，可以直接通過其貨幣 label 來定位每個特定於貨幣的字段。

如果處理得當，最終會產生很多函數，每個函數都有一個描述其專用目的的名稱。 主要代碼非常短，可以像散文一樣閱讀......

// the module or globally scoped map like object.
const currencyFields = {};

function assignCurrencyFields() {
  // access/query each currency-specific field
  // exactly once and store it in a module or
  // globally scoped map like object.
  Object.assign(currencyFields, {
    USD: $(".agency-usd, .studio-usd, .small-usd, .price-USD"),
    EUR: $(".agency-eur, .studio-eur, .small-eur, .price-EUR"),
    GBP: $(".agency-gbp, .studio-gbp, .small-gbp, .price-GBP"),
    AUD: $(".agency-aud, .studio-aud, .small-aud, .price-AUD"),
  });
}

function hideAnyCurrencyField() {
  Object
    .values(currencyFields)
    .forEach(field =>
      field.addClass("hide");
    );
}
function showCurrencyField(label) {
  // usage of the Nullish Coalescing operator ... `??` ...
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
  (currencyFields[label] ?? currencyFields['USD']).removeClass("hide");
}

function updateCurrencyFields(currencyLabel) {
  hideAnyCurrencyField();
  showCurrencyField(currencyLabel);
}


$(document).ready(function () {

  assignCurrencyFields();

  $.get('https://ipapi.co/currency/', updateCurrencyFields);
});