Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

148
Visualizações
How do I write less code and get more done?

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

           }
         
          }); 
        });
about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

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 eliminating 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.

about 4 years ago · Juan Pablo Isaza Relatório

0

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);
});
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda