Hacks do Javascript para Hipsters

Esta publicação foi originalmente postada no meu blog pessoal e tem muitos pontos de vista nos comentários.

Javascript é muito divertido, exceto quando não é.

Javascript é muito divertido, exceto quando não é.

Javascript é muito divertido, exceto quando não é.

Javascript é muito divertido, exceto quando não é.

Há sempre o medo de erros de tempo de execução que nos mantém pensando o tempo todo enquanto escrevemos código. Isso nos torna melhores codificadores – não temos outra opção além de visualizar cada linha de código como se estivesse funcionando enquanto a escrevemos.

É por isso que é tão importante ter um código limpo. Código pequeno. Código bonito. Código com o qual você se apaixona. Caso contrário, o Javascript irá assustá-lo.

Eu reuni alguns trechos divertidos que eu gosto de usar em vez de um código chato que leva muito espaço. Alguns tornam o código mais curto, mais limpo e mais legível. Outros são apenas hacks simples para depuração.

Aprendi tudo isso do código-fonte aberto (até o nó.js todo o código javascript era de código aberto, não era?), Mas vou escrevê-los aqui é se eu os inventasse.

Hipster Hack # 1 – Método de chamada

Eu realmente odeio se / else bloqueia e isso é um truque bastante útil para chamar a função certa com base em um valor booleano.

 // Chato
 se (sucesso) {
 obj.start ();
 } else {
 obj.stop ();
 }
 // Hipster-fun
 método var = (sucesso ? ' start' : ' stop');
 obj [método] ();

Hipster Hack # 2 – String se junta

É um fato conhecido que cordas como outras cordas. Mais cedo ou mais tarde você gostaria de concatenar dois ou mais deles. Eu realmente não gosto de juntá-los, então juntese () chega ao resgate.

 ['primeiro', 'nome']. juntar (''); // = 'primeiro nome';
 ['leite', 'café', 'suger']. junte-se (','); // = 'leite, café, suger'

Hipster Hack # 3 – Operador Padrão ||

O Javascript é tudo sobre não saber o que um objeto possui. Algum tempo você obtê-lo como um argumento de função, outras vezes você pode lê-lo a partir da rede ou um arquivo de configuração. De qualquer forma, você pode usar o || operador para usar o segundo argumento se o primeiro for falso.

 // padrão para 'Sem nome' quando myName está vazio (ou nulo ou indefinido)
 var name = myName || ' Sem nome';
 // certifique-se de que temos um objeto de opções
 var doStuff = função (opções) {
 opções = opções || {};
 // ...
 };

Hipster Hack # 4 – Operador de guarda &&

Semelhante ao Operador Padrão , este é super útil. Ele elimina quase todas as chamadas IF e faz um código mais legal.

 // Chato
 se (isThisAwesome) {
 alerta ('sim'); // não é
 }
 // Impressionante
 isThisAwesome && alert ('yes');
 // Também legal para proteger seu código
 var aCoolFunction = indefinido ;
 aCoolFunction && aCoolFunction (); // não será executado nem travarão

Hipster Hack # 5 – XXX Operador

Este é totalmente protegido por direitos autorais e também SFW. Sempre que escrevo algum código, mas depois tenho que consultar a web, ou uma parte diferente do código, adiciono uma linha xxx ao código. Isso faz com que o código seja interrompido para que eu possa voltar ao local específico e corrigi-lo mais tarde. Muito mais fácil de procurar por ele (xxx geralmente nunca aparece) e você não precisa pensar em um comentário TODO.

 var z = 15;
 doSomeMath (z, 10);
 xxx // Excelente espaço reservado. Eu sou o único usando xxx e é tão fácil de encontrar no código em vez de TODOs
 doMomeMath (z, 15);

Hipster Hack # 6 – Timing

Já se perguntou o que é mais rápido: Looping com um i ++ ou looping com um i-? Sim, eu também. Para aqueles que o fazem, você pode usar os métodos de temporização do console para testar loops lentos ou qualquer outro código de bloqueio de loop de eventos.

 var a = [1,2,3,4,5,6,7,8,9,10];
 console.time ('testing_forward');
 para ( var i = 0; i < a.length; i ++ );
 console.timeEnd ('testing_forward');
 // output: testing_forward: 0.041ms
 console.time ('testing_backwards');
 para ( var i = a.length - 1; i> = 0; i-);
 console.timeEnd ('testing_backwards');
 // output: testing_backwards: 0.030ms

Hipster Hack # 7 – Depuração

Eu aprendi isso com um desenvolvedor Java. Não tenho absolutamente nenhuma idéia de como ele sabia sobre isso e não o fiz, mas já o uso desde então. Basta soltar um comunicado depurador eo depurador irá parar nessa linha.

 var x = 1;
 depurador ; // A execução do código pára aqui, depuração feliz
 x ++ ;
 var x = Math.random (2);
 se (x> 0,5) {
 depurador ; // Ponto de interrupção condicional
 }
 x-;

Hipster Hack # 8 – Old School Debugging

Eu sempre fui um “depurador printf” mais que um desenvolvedor de linha por linha em um depurador. Se você é como eu, você quer “exportar” alguns conflitos privados para o escopo global para examiná-los de tempos em tempos. Não esqueça de removê-los antes de cometer / empurrar para a produção.

 var profundamenteNestedFunction = function () {
 var private_object = {
 ano : ' 2013'
 };
 // Globalize-o para depuração:
 pub = private_object;
 };
 // Agora a partir do console (ferramentas do Chrome dev, ferramentas Firefox, etc)
 ano anterior;

Hipster Hack # 9 – Modelos Ultra Light

Você ainda concatena cordas usando o operador +? Aqui está uma maneira melhor de combinar uma frase com seus dados. É chamado de modelo e aqui está uma mini-estrutura em 2.5 linhas de código.

 var firstName = ' Tal';
 var screenName = ' ketacode'
 // Feio
 'Oi, meu nome é' + firstName + ' e meu nome de usuário do twitter é @' + screenName;
 // Super
 var template = ' Oi, meu nome é {first-name} e meu nome de usuário do twitter é @ {nome-tela}';
 var txt = template.replace ('{first-name}', firstName)
 .replace ('{screen-name}', screenName);

Já conhecia todos?

Mesmo o XXX Operador com direitos autorais inventado por mim ?! Você é um verdadeiro hacker hipster, vamos falar mais no twitter .

Hacker Noon é como os hackers começam suas tardes. Somos uma parte da família @AMI . Agora estamos aceitando envios e estamos felizes em discutir oportunidades de propaganda e patrocínio .

Para saber mais, leia nossa sobre a página , como / nos envie no Facebook , ou simplesmente, tweet / DM @HackerNoon.

Se você gostou desta história, recomendamos ler nossas últimas histórias de tecnologia e histórias de tecnologia de tendências . Até a próxima, não concorde com as realidades do mundo!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *