How do I write less code and get more done?-CodePudding

Using ES6 classes is great and all, but I find myself using this.variable everywhere, and it is always referring to my class. Is there a way to have implied globals within my class be implied this.variable instead?

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");

           }
         
          }); 
        });

CodePudding user response：

How do I write less code and get more done?

You can certainly write less code by making the code you show table driven and reducing all the repeated code (often called DRY for "don't repeat yourself"):

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");
    });
});

Note this code is also automatically extensible. If you want to add another currency, all you do is add one line to the currencyTable and add the corresponding HTML to your page and it is automatically supported by this code.

You don't show any code that uses ES6 classes or this.something so it's hard to know exactly what you're asking about that. Javascript used to have the with keyword that would let you skip some typing, but for a number of reasons, it is no longer recommended and is not even available in strict mode code which includes ES6 methods.

CodePudding user response：

First one goes after similar and/or repetitive main tasks and implements them as properly named functions.

Within such functions one looks for further improvements like not always querying one and the same field again and agin. Instead, like with the currencies, one could access/query such fields exactly once and store them in a map like object.

Thus one can target each currency-specific field directly by its currency label.

If done properly one finally has come up with a lot of functions, each with a name that describes its dedicated purpose. The main code then is very short and can be read like prose ...

// 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);
});