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 é.
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 junte – se () 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!
