Como você sabe, JavaScript é a linguagem de programação número um do mundo, é a linguagem da web, é a linguagem dos aplicativos híbridos móveis (como PhoneGap ou Appcelerator), é a linguagem do lado do servidor (como NodeJS ou Wakanda), E há muitas outras implementações. Ao mesmo tempo, é também uma linguagem esclarecedora para muitos novatos, pois pode não apenas exibir uma simples mensagem de alerta no navegador, mas também pode ser usada para controlar um robô (usando nodebot ou nodruino). Os desenvolvedores que dominam JavaScript e conseguem escrever códigos organizados, padronizados e com desempenho eficiente tornaram-se procurados no mercado de talentos.
Deve-se observar que os trechos de código deste artigo foram testados no Google Chrome mais recente (versão 30), que usa o mecanismo JavaScript V8 (V8 3.20.17.15).
1 Não se esqueça de usar a palavra-chave var ao atribuir um valor a uma variável pela primeira vez
Atribuir um valor a uma variável indefinida causa a criação de uma variável global. Evite variáveis globais.
2 Use === em vez de ==
O operador == (ou !=) executa conversões de tipo automaticamente quando necessário. A operação === (ou !==) não realiza nenhuma conversão. Ele compara valores e tipos e também é considerado mais rápido que ==.
Copie o código do código da seguinte forma:
[10] === 10 // é falso
[10] == 10 // é verdadeiro
'10' == 10 // é verdadeiro
'10' === 10 // é falso
[] == 0 // é verdadeiro
[] === 0 // é falso
'' == falso // é verdadeiro, mas verdadeiro == "a" é falso
'' === falso // é falso
3 Use fechamentos para implementar variáveis privadas
Copie o código do código da seguinte forma:
function Pessoa(nome, idade) {
this.getName = function() { nome de retorno };
this.setName = function(novoNome) { nome = novoNome };
this.getAge = function() { return idade };
this.setAge = function(newAge) { age = newAge };
//Propriedades não inicializadas no construtor
ocupação var;
this.getOccupation = function() { return ocupação };
this.setOccupation = function(newOcc) {ocupação =
novoOcc;};
}
4 Use ponto e vírgula no final de uma instrução
É uma boa prática usar ponto e vírgula no final de uma instrução. Você não será avisado se esquecer de escrevê-lo, porque na maioria dos casos o interpretador JavaScript adicionará ponto e vírgula para você.
5 Crie o construtor do objeto
Copie o código. O código é o seguinte: function Person(firstName, lastName){
this.firstName = primeiroNome;
este.últimoNome = últimoNome;
}
var Saad = new Pessoa("Saad", "Mousliki");
6 Use typeof, instanceof e construtor com cuidado
Copie o código da seguinte maneira: var arr = ["a", "b", "c"];
typeof arr; // retorna "objeto"
arr instância de Array // verdadeiro
arr.construtor();
7 Crie uma função de autochamada (função de autochamada)
Isso geralmente é chamado de Função Anônima Auto-Invocada ou Expressão de Função IIFE-Imediatamente Invocada. Esta é uma função que é executada automaticamente imediatamente após a criação, geralmente da seguinte forma:
Copie o código do código da seguinte forma:
(função(){
// algum código privado que será executado automaticamente
})();
(função(a,b){
var resultado = a+b;
resultado de retorno;
})(10,20)
8- Obtenha um item aleatório de um array
O código de cópia é o seguinte: var items = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119];
var randomItem = itens[Math.floor(Math.random() * itens.length)];[código]
9 Obtenha um número aleatório dentro de um intervalo específico
Este trecho de código é útil quando você deseja gerar dados de teste, como um valor de salário aleatório entre um valor mínimo e máximo.
[código]var x = Math.floor(Math.random() * (máx - min + 1)) + min;
10 Gere uma matriz de números entre 0 e o valor máximo definido
Copie o código da seguinte forma: var numbersArray = [], max = 100;
for( var i=1; numbersArray.push(i++) < max; // números = [0,1,2,3 ... 100]
11 Gere uma string alfanumérica aleatória
Copie o código. O código é o seguinte: function generateRandomAlphaNum(len) {
var rdmstring = "";
for(; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
retornar rdmString.substr(0, len);
}
12 Embaralhe uma série de números
O código de cópia é o seguinte: var numbers = [5, 458, 120, -215, 228, 400, 122205, -85411];
números = números.sort(function(){ return Math.random() - 0,5});
/* os números do array serão iguais, por exemplo, a [120, 5, 228, -215, 400, 458, -85411, 122205] */
13 Função de corte de cordas
Existe uma função trim clássica em Java, C#, PHP e muitas outras linguagens, que é usada para remover espaços em strings, mas ela não existe em JavaScript, então precisamos adicionar esta função ao objeto String.
Copie o código do código da seguinte forma:
String.prototype.trim = function(){return this.replace(/^/s+|/s+$/g, "");};//Remove os espaços iniciais e finais da string, excluindo os espaços internos da string corda
14 Anexe um array a outro array
Copie o código da seguinte maneira: var array1 = [12, "foo", {name: "Joe"}, -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 será igual a [12, "foo", {nome "Joe"}, -2458, "Doe", 555, 100] */
//Na verdade, concat pode conectar diretamente dois arrays, mas seu valor de retorno é um novo array. Aqui está a mudança direta para array1
15 Converta o objeto de argumentos em um array
Copie o código da seguinte forma: var argArray = Array.prototype.slice.call(arguments);
O objeto de argumentos é um objeto semelhante a um array, mas não um array real
16 Verifique se o parâmetro é um número (número)
Copie o código. O código é o seguinte: function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
17 Verifique se o parâmetro é um array
Copie o código da seguinte forma: function isArray(obj){
retornar Object.prototype.toString.call(obj) === '[array de objetos]' ;
}
Nota: Se o método toString() for substituído, você não obterá os resultados desejados usando esta técnica. Ou você pode usar:
Copie o código do código da seguinte forma:
Array.isArray(obj); // Este é um novo método de array
Se você não estiver usando vários frames, também poderá usar o método instanceof. Mas se você tiver vários contextos, obterá resultados errados.
Copie o código da seguinte maneira: var myFrame = document.createElement('iframe');
document.body.appendChild(meuFrame);
var meuArray = window.frames[window.frames.length-1].Array;
var arr = new meuArray(a,b,10); // [a,b,10]
// instanceof não funcionará corretamente, myArray perde seu construtor
// construtor não é compartilhado entre frames
arr instância de Array; // falso
18 Obtenha o valor máximo ou mínimo em uma matriz de números
O código de cópia é o seguinte: var numbers = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(Matemática, números);
var minInNumbers = Math.min.apply(Matemática, números);
//Nota do tradutor: O método function.prototype.apply é usado aqui para passar parâmetros.
19 Limpe uma matriz
Copie o código da seguinte forma: var myArray = [12, 222, 1000];
myArray.length = 0; // myArray será igual a [].
20 Não use delete para remover itens de um array.
Use splice em vez de delete para excluir um item de uma matriz. Usar delete apenas substitui o item original por indefinido e, na verdade, não o exclui da matriz.
Não use isso:
Copie o código da seguinte maneira: var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119];
itens.comprimento; // retorno 11
excluir itens[3]; // retornar verdadeiro
itens.comprimento; // retorno 11
/* os itens serão iguais a [12, 548, "a", indefinido × 1, 5478, "foo", 8852, indefinido × 1, "Doe", 2154, 119] */
Em vez disso, use:
Copie o código da seguinte maneira: var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119];
itens.comprimento; // retorno 11
itens.splice(3,1);
itens.comprimento; // retorna 10
/* os itens serão iguais a [12, 548, "a", 5478, "foo", 8852, indefinido × 1, "Doe", 2154, 119] */
O método delete deve ser usado para excluir uma propriedade de um objeto.
21 Use comprimento para truncar um array
Semelhante à maneira de limpar o array acima, usamos a propriedade length para truncar um array.
Copie o código da seguinte forma: var myArray = [12, 222, 1000, 124, 98, 10];
myArray.length = 4; // myArray será igual a [12, 222, 1000, 124].
Além disso, se você definir o comprimento de um array para um valor maior que o valor atual, o comprimento do array será alterado e novos itens indefinidos serão adicionados para compensar isso. O comprimento de uma matriz não é uma propriedade somente leitura.
Copie o código da seguinte forma: myArray.length = 10 // o novo comprimento do array é 10;
myArray[myArray.length - 1]; // indefinido
22 Use E/OU lógico para fazer julgamentos condicionais
Copie o código do código da seguinte forma:
var foo = 10;
foo == 10 && doSomething(); // Equivalente a if (foo == 10) doSomething();
foo == 5 || doSomething(); // Equivalente a if (foo != 5) doSomething();
O AND lógico também pode ser usado para definir valores padrão para parâmetros de função
Copie o código do código da seguinte forma:
function façaAlgo(arg1){
Arg1 = arg1 || 10; // Se arg1 não estiver definido, Arg1 será definido como 10 por padrão
}
23 Use o método map() para iterar sobre os itens em um array
Copie o código. O código é o seguinte: var squares = [1,2,3,4].map(function (val) {
retornar val*val;
});
// quadrados serão iguais a [1, 4, 9, 16]
24 Arredonda um número para N casas decimais
Copie o código da seguinte maneira: var num =2.443242342;
num = num.toFixed(4); // num será igual a 2,4432;
25 Problema de ponto flutuante
Copie o código da seguinte forma: 0,1 + 0,2 === 0,3 // é falso
9007199254740992 + 1 // é igual a 9007199254740992
9007199254740992 + 2 // é igual a 9007199254740994
Por que isso está acontecendo? 0,1+0,2 é igual a 0,30000000000000004. Você precisa saber que todos os números JavaScript são representados internamente como números de ponto flutuante em binário de 64 bits, em conformidade com o padrão IEEE 754. Para mais introdução, você pode ler esta postagem do blog. Você pode resolver esse problema usando os métodos toFixed() e toPrecision().
26 Ao usar for-in para percorrer as propriedades internas de um objeto, preste atenção na verificação das propriedades.
O trecho de código a seguir evita o acesso às propriedades do protótipo ao iterar nas propriedades de um objeto:
Copie o código do código da seguinte forma:
for (nome da var no objeto) {
if (object.hasOwnProperty(nome)) {
//faça algo com o nome
}
}
Operador de 27 vírgula
Copie o código do código da seguinte forma:
var a = 0;
var b = (a++, 99);
console.log(a); // a será igual a 1
console.log(b); // b é igual a 99
28 Variáveis de cache que requerem cálculo ou consulta
Para seletores jQuery, é melhor armazenar em cache esses elementos DOM.
Copie o código da seguinte maneira: var navright = document.querySelector('#right');
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');
29 Valide os parâmetros antes de chamar isFinite()
Copie o código da seguinte forma: isFinite(0/0);
isFinite("foo"); //falso
isFinite("10");
isFinite(10);
isFinite(indefinido); // falso
isFinite(); // falso
isFinite(null); // verdadeiro !!!
30 Evite índices negativos em arrays
Copie o código da seguinte forma: var numbersArray = [1,2,3,4,5];
var from = numbersArray.indexOf("foo") ; // from é igual a -1
numbersArray.splice(from,2); // retornará [5]
Certifique-se de que o parâmetro ao chamar indexOf não seja negativo.
31 Serialização e desserialização baseada em JSON (serialização e desserialização)
Copie o código da seguinte forma: var person = {name :'Saad', age : 26, Department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(pessoa);
/* stringFromPerson é igual a "{"name":"Saad","age":26,"department":{"ID":15,"name":"P&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString é igual ao objeto pessoa */
32 Evite usar construtores eval() e Function
Usar os construtores eval e Function são operações muito caras porque cada vez que eles chamam o mecanismo de script para converter o código-fonte em código executável.
Copie o código da seguinte forma: var func1 = new Function(functionCode);
var func2 = eval(funçãoCode);
33 Evite usar with()
Usar with() insere uma variável global. Portanto, variáveis com o mesmo nome terão seus valores sobrescritos e causarão problemas desnecessários.
34 Evite usar for-in para iterar em um array
Evite usar métodos como este:
Copie o código da seguinte forma: var sum = 0;
for (var i em arrayNumbers) {
soma += arrayNúmeros[i];
}
Uma maneira melhor é:
Copie o código da seguinte forma: var sum = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i++) {
soma += arrayNúmeros[i];
}
O benefício adicional é que os valores das duas variáveis i e len são executados apenas uma vez, o que é mais eficiente que o seguinte método:
Copie o código da seguinte forma: for (var i = 0; i < arrayNumbers.length; i++)
Por que? Porque arrayNumbers.length é calculado toda vez que faz um loop.
35 Passe funções em vez de strings ao chamar setTimeout() e setInterval().
Se você passar uma string para setTimeout() ou setInterval(), a string será analisada como se estivesse usando eval, o que consome muito tempo.
Não use:
Copie o código do código da seguinte forma:
setInterval('doSomethingPeriodically()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000)
Em vez disso, use:
Copie o código do código da seguinte forma:
setInterval(doSomethingPeriodically, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);
36 Use instruções switch/case em vez de instruções if/else longas
Ao julgar mais de 2 situações, usar switch/case é mais eficiente e elegante (mais fácil de organizar o código). Mas não use switch/case quando houver mais de 10 situações a serem julgadas.
37 Use switch/case ao julgar a faixa numérica
Na seguinte situação, é razoável usar switch/case para determinar a faixa de valores:
Copie o código do código da seguinte forma:
function getCategoria(idade) {
var categoria = "";
mudar (verdadeiro) {
caso éNaN(idade):
categoria = "não é uma idade";
quebrar;
caso (idade >= 50):
categoria = "Antigo";
quebrar;
caso (idade <= 20):
categoria = "Bebê";
quebrar;
padrão:
categoria = "Jovem";
quebrar;
};
categoria de retorno;
}
getCategory(5); // retornará "Bebê"
//Geralmente, para julgar o intervalo numérico, é mais apropriado usar if/else. switch/case é mais adequado para julgar certos valores
38 Especifique o objeto protótipo para o objeto criado
É possível escrever uma função que crie um objeto com parâmetros especificados como protótipo:
Copie o código da seguinte forma: function clone(object) {
função OneShotConstructor(){};
OneShotConstructor.prototype= objeto;
retornar novo OneShotConstructor();
}
clone(Array).prototype; // []
39 Uma função de escape HTML
Copie o código da seguinte forma: function escapeHTML(text) {
var substituições= {"<": "<", ">": ">","&": "&", "/"": """};
return text.replace(/[<>&"]/g, function(caractere) {
retornar substituições[personagem];
});
}
40 Evite usar try-catch-finally dentro de um loop
Em tempo de execução, cada vez que a cláusula catch for executada, o objeto de exceção capturado será atribuído a uma variável e, na estrutura try-catch-finally, essa variável será criada todas as vezes.
Evite escrever assim:
Copie o código da seguinte maneira: var object = ['foo', 'bar'], i;
for (i = 0, len = objeto.comprimento; i <len; i++) {
tentar {
//faça algo que gere uma exceção
}
pegar (e) {
//trata exceção
}
}
Em vez disso, use:
Copie o código da seguinte maneira: var object = ['foo', 'bar'], i;
tentar {
for (i = 0, len = objeto.comprimento; i <len; i++) {
//faça algo que gere uma exceção
}
}
pegar (e) {
//trata exceção
}
41 Defina o tempo limite para XMLHttpRequests.
Depois que uma solicitação XHR demorar muito (por exemplo, devido a problemas de rede), pode ser necessário abortar a solicitação e, em seguida, usar setTimeout() com a chamada XHR.
Copie o código da seguinte forma: var xhr = new XMLHttpRequest();
xhr.onreadystatechange=função(){
if (this.readyState == 4) {
clearTimeout(tempo limite);
//faça algo com os dados de resposta
}
}
var tempo limite = setTimeout(função(){
xhr.abort(); // retorno de chamada de erro
}, 60*1000 /* tempo limite após um minuto */ );
xhr.open('GET', url, verdadeiro);
xhr.send();
Além disso, geralmente você deve evitar totalmente as solicitações síncronas do Ajax.
42 Lidando com tempos limite do WebSocket
Normalmente, após a criação de uma conexão WebSocket, o servidor atingirá o tempo limite da sua conexão após 30 segundos se você estiver inativo. Os firewalls também são desconectados após um período de inatividade.
Para evitar problemas de tempo limite, pode ser necessário enviar mensagens vazias de forma intermitente ao servidor. Para fazer isso, você pode adicionar as duas funções a seguir ao seu código: uma para manter a conexão e outra para cancelar a retenção da conexão. Com esta técnica, você pode controlar o problema de tempo limite.
Use um timerID:
Copie o código da seguinte forma: var timerID = 0;
função keepAlive() {
var tempo limite = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout(keepAlive, tempo limite);
}
função cancelarKeepAlive() {
if (timerID) {
cancelarTimeout(timerId);
}
}
O método keepAlive() deve ser adicionado no final do método onOpen() da conexão webSOcket, e cancelKeepAlive() é adicionado no final do método onClose().
43 Tenha em mente que os operadores primitivos são sempre mais eficientes que as chamadas de função. Use vanillaJS.
Por exemplo, não use:
Copie o código. O código é o seguinte: var min = Math.min(a,b);
A.push(v);
Em vez disso, use:
Copie o código da seguinte forma: var min = a < b ?
A[A.comprimento] = v;
44 Não se esqueça de usar ferramentas de organização de código ao codificar . Use JSLint e ferramentas de compactação de código (minificação) (como JSMin) antes de ficar online. "Ferramenta para economizar tempo: ferramenta de embelezamento e formatação de código"
45 JavaScript é incrível.
Resumir
Eu sei que existem muitas outras dicas, truques e práticas recomendadas por aí, então se você tiver mais alguma coisa que gostaria de adicionar ou receber comentários ou correções aos que compartilhei, por favor me avise nos comentários.