O JavaScript é uma linguagem de programação de classe mundial que pode ser usada para desenvolvimento da Web, desenvolvimento de aplicativos móveis (PhoneGap, Appcelerator), desenvolvimento do lado do servidor (Node.js e Wakanda), etc. JavaScript também é o primeiro idioma para muitos novatos a entrar no mundo da programação. Ele pode ser usado para exibir caixas rápidas simples no navegador ou para controlar o robô através do NodeBot ou Noderuino. Os desenvolvedores que podem escrever código JavaScript bem estruturado e eficiente são agora os mais procurados que as pessoas no mercado de recrutamento.
Neste artigo, compartilharei algumas dicas, dicas e práticas recomendadas JavaScript. Exceto por alguns, ambos são o mecanismo JavaScript do navegador e o intérprete JavaScript do lado do servidor.
O código de amostra deste artigo passou no teste no Google Chrome 30 mais recente versão (V8 3.20.17.15).
1. Certifique -se de usar a palavra -chave VAR ao atribuir um valor a uma variável pela primeira vez.
Se uma variável não for declarada e diretamente atribuída ao valor, ela será usada como uma nova variável global por padrão. Tente evitar o uso de variáveis globais.
2. Use === Substitua ==
O == e! = Os operadores converterão automaticamente o tipo de dados, se necessário. Mas === e! == não, eles compararão valores e tipos de dados ao mesmo tempo, o que também os torna mais rápidos que == e! =.
A cópia do código é a seguinte:
[10] === 10 // é falso
[10] == 10 // é verdadeiro
'10' == 10 // é verdadeiro
'10' === 10 // é falso
[] == 0 // é verdadeiro
[] === 0 // é falso
'' == false // é verdadeiro, mas verdade == "a" é falso
'' === FALSE // é falso
3. Os resultados lógicos de seqüências subfinadas, nulas, 0, falsas, nan e vazias são todas falsas
4. Use semicolons no final da linha
Na prática, é melhor usar semicolons. Não há problema em esquecer de escrevê -los. Na maioria dos casos, o intérprete JavaScript será adicionado automaticamente. Por que você deseja usar um ponto de vírgula, você pode se referir à verdade sobre os semicolons no artigo JavaScript.
5. Use o construtor de objeto
A cópia do código é a seguinte:
Função Pessoa (primeiro nome, sounName) {
this.FirstName = FirstName;
this.LastName = LastName;
}
var saad = nova pessoa ("saad", "mousliki");
6. Cuidado com o tipo de, instância e construtor
TIPOOF: Javascript UNARY Operator, usado para retornar o tipo original de uma variável na forma de uma string. Observe que o tipo de nulo também retornará objeto e a maioria dos tipos de objetos (matriz, data de tempo etc.) também retornará objeto.
Construtor: Propriedades do protótipo interno, que podem ser reescritas através do código
O operador de JavaScript de instância: JavaScript, pesquisará no construtor na cadeia de protótipos, retornará true se encontrado, retornará false se false.
A cópia do código é a seguinte:
var arr = ["a", "b", "c"];
typeof arr; // retorna "objeto"
Arr instância de matriz // true
Arr.Constructor (); // []
7. Use funções de autocall
As funções são executadas automaticamente diretamente após a criação, que geralmente é chamada de função anônima autoinvocada ou expressões de função de chamada direta (expressão de função imediatamente invocada). O formato é o seguinte:
A cópia do código é a seguinte:
(função(){
// O código colocado aqui será executado automaticamente
}) ();
(função (a, b) {
var resultado = a+b;
resultado de retorno;
}) (10,20)
8. Obtenha aleatoriamente membros da matriz
A cópia do código é a seguinte:
var itens = [12, 548, 'A', 2, 5478, 'Foo', 8852, 'Doe', 2145, 119];
var randomItem = itens [math.floor (math.random () * items.length);
9. Obtenha números aleatórios dentro do intervalo especificado
Essa função é particularmente numérica ao gerar dados falsos para teste, como o número de salários dentro de um intervalo especificado.
A cópia do código é a seguinte:
var x = math.floor (math.random () * (max - min + 1)) + min;
10. Gere uma variedade de números de 0 para valores especificados
A cópia do código é a seguinte:
var NumberArray = [], max = 100;
for (var i = 1; NumberArray.push (i ++) <max;); // números = [1,2,3 ... 100]
11. Gere strings alfanuméricos aleatórios
A cópia do código é a seguinte:
função generaterandomalphanum (len) {
var rdmString = "";
para (; rdmString.length <len; rdmString += Math.random (). ToString (36) .Substr (2));
retornar rdmstring.substr (0, len);
12. interromper a ordem de matrizes de números
A cópia do código é a seguinte:
Var números = [5, 458, 120, -215, 228, 400, 122205, -85411];
números = números.sort (function () {return math.random () - 0,5});
/ * A matriz de números será semelhante a [120, 5, 228, -215, 400, 458, -85411, 122205] */
Aqui usamos a função de classificação de matriz interna do JavaScript. Uma maneira melhor é implementá-lo com código especial (como o algoritmo Fisher-Yates). Você pode se referir a esta discussão no StackOverflow.
13. Remova os espaços das cordas
Idiomas como Java, C# e PHP implementam funções especiais de despacho de cordas, mas não existe javascript. Você pode usar o seguinte código para fazer uma função de acabamento para a função do objeto String:
A cópia do código é a seguinte:
String.prototype.trim = function () {return this.replace (/^/s+|/s+$/g, "");};
O novo mecanismo JavaScript já possui uma implementação nativa de Trim ().
14. Adicionando entre matrizes
A cópia do código é a seguinte:
var Array1 = [12, "Foo", {Nome "Joe"}, -2458];
var Array2 = ["Doe", 555, 100];
Array.prototype.push.apply (Array1, Array2);
/ * o valor da matriz1 é [12, "foo", {name "joe"}, -2458, "doe", 555, 100] */
15. Converta objetos em matrizes
A cópia do código é a seguinte:
var argarray = array.prototype.slice.call (argumentos);
16. Verifique se é um número
A cópia do código é a seguinte:
função isNumber (n) {
retornar! isnan (parsefloat (n)) && isfinite (n);
}
17. Verifique se é uma matriz
A cópia do código é a seguinte:
função isarray (obj) {
return object.prototype.toString.Call (obj) === '[Array do objeto]';
}
Mas se o método ToString () for reescrito, ele não funcionará. Você também pode usar o seguinte método:
A cópia do código é a seguinte:
Array.esArray (OBJ); // é um novo método de matriz
Se você não usar o quadro no seu navegador, também poderá usar a Instância, mas se o contexto for muito complexo, também poderá cometer um erro.
A cópia do código é a seguinte:
var myFrame = document.createElement ('iframe');
document.body.appendChild (myframe);
var myarray = window.frames [window.frames.length-1] .Array;
var arr = new MyArray (a, b, 10); // [a, b, 10]
// O construtor de MyArray foi perdido, o resultado de uma instância será anormal
// Os construtores não podem ser compartilhados entre quadros
Arr instância de matriz; // false
18. Obtenha os valores máximos e mínimos na matriz
A cópia do código é a seguinte:
VAR números = [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);
19. Limpe a matriz
A cópia do código é a seguinte:
var myarray = [12, 222, 1000];
MyArray.Length = 0; // MyArray será igual a [].
20. Não exclua ou remova os elementos diretamente da matriz
Se você usar excluir diretamente nos elementos da matriz, ele não será excluído, mas basta definir o elemento como indefinido. A emenda deve ser usada para exclusão de elementos de matriz.
Não:
A cópia do código é a seguinte:
var itens = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2154, 119];
items.Length; // retorna 11
excluir itens [3]; // retorna verdadeiro
items.Length; // retorna 11
/ * O resultado dos itens é [12, 548, "A", indefinido × 1, 5478, "Foo", 8852, indefinido × 1, "Doe", 2154, 119] */
Quanto a:
A cópia do código é a seguinte:
var itens = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2154, 119];
items.Length; // retorna 11
items.splice (3,1);
items.Length; // retorna 10
/* O resultado dos itens é [12, 548, "A", 5478, "Foo", 8852, indefinido × 1, "Doe", 2154, 119]
Você pode usar excluir ao excluir as propriedades de um objeto.
21. Use o atributo de comprimento para truncar a matriz
No exemplo anterior, use o atributo de comprimento para limpar a matriz e você também pode usá -lo para truncar a matriz:
A cópia do código é a seguinte:
var myarray = [12, 222, 1000, 124, 98, 10];
MyArray.Length = 4; // MyArray será igual a [12, 222, 1000, 124].
Ao mesmo tempo, se o atributo de comprimento for aumentado, o valor do comprimento da matriz aumentará e indefinido será usado como um novo elemento para preencher. O comprimento é uma propriedade gravável.
A cópia do código é a seguinte:
MyArray.Length = 10; // O novo comprimento da matriz é 10
MyArray [MyArray.Length - 1]; // indefinido
22. Use lógica e / ou em condições
A cópia do código é a seguinte:
var foo = 10;
foo == 10 && Dosomething (); // é a mesma coisa que se (foo == 10) dosomething ();
foo == 5 || doSomething (); // é a mesma coisa que se (foo! = 5) dosomething ();
Lógico ou também pode ser usado para definir valores padrão, como os valores padrão dos parâmetros de função.
A cópia do código é a seguinte:
função doSomething (arg1) {
arg1 = arg1 || 10; // arg1 terá 10 como um valor padrão se ainda não estiver definido
}
23. Faça o método de função map () loop os dados
A cópia do código é a seguinte:
var quadrados = [1,2,3,4] .map (função (val) {
retornar val * val;
});
// quadrados serão iguais a [1, 4, 9, 16]
24. Mantenha o número especificado de lugares decimais
A cópia do código é a seguinte:
var num = 2,443242342;
num = num.tofixado (4); // num será igual a 2.4432
Observe que o tofixec () retorna uma string, não um número.
25. Problemas de cálculo de pontos flutuantes
A cópia do código é a seguinte:
0,1 + 0,2 === 0.3 // é falso
9007199254740992 + 1 // é igual a 9007199254740992
9007199254740992 + 2 // é igual a 9007199254740994
Por que? Porque 0,1+0,2 é igual a 0,300000000000000000000004. Os números de JavaScript são construídos de acordo com o padrão IEEE 754 e são representados internamente por decimais de ponto flutuante de 64 bits. Para detalhes, consulte como os números no JavaScript são codificados.
Esse problema pode ser resolvido usando o tofixed () e o toprecision ().
26. Verifique as propriedades do objeto através do loop for-in
O uso a seguir pode impedir que ele insira as propriedades do protótipo do objeto durante a iteração.
A cópia do código é a seguinte:
para (Var Nome em objeto) {
if (object.HasownProperty (nome)) {
// Faça algo com nome
}
}
27. Operador de vírgula
A cópia do código é a seguinte:
var a = 0;
var b = (a ++, 99);
console.log (a); // a será igual a 1
console.log (b); // b é igual a 99
28. Armazenamento temporário de variáveis usadas para cálculo e consulta
No seletor de jQuery, todo o elemento DOM pode ser armazenado temporariamente.
A cópia do código é a seguinte:
var NavRright = document.QuerySelector ('#Right');
var Navleft = document.QuerySelector ('#esquerda');
var nAVup = document.QuerySelector ('#up');
var NAVDOWN = document.QuerySelector ('#Down');
29. Verifique os parâmetros passados em isfinite () com antecedência
A cópia do código é a seguinte:
isfinite (0/0); // false
isfinite ("foo"); // false
isfinite ("10"); // verdadeiro
isfinita (10); // verdadeiro
isfinite (indefinido); // false
isfinite (); // false
isfinita (nulo); // verdade, preste atenção especial a isso
30. Evite usar números negativos como indexação em matrizes
A cópia do código é a seguinte:
var númeroRray = [1,2,3,4,5];
var de = NumberArray.IndexOf ("Foo"); // de é igual a -1
NumberArray.splice (de, 2); // vai retornar [5]
Observe que o parâmetro de índice passado para Splice não é um número negativo. Quando é um número negativo, o elemento será excluído do final da matriz.
31. Use JSON para serializar e desserializar
A cópia do código é a seguinte:
var pessoa = {nome: 'saad', idade: 26, departamento: {id: 15, nome: "r & d"}};
var stringfromperson = json.stringify (pessoa);
/ * Stringfromperson resultado é "{" name ":" saad "," idade ": 26," departamento ": {" id ": 15," nome ":" r & d "}}" */
var PersonFromString = JSON.Parse (Stringfromperson);
/* O valor da pessoa que é o mesmo é o mesmo que o objeto de pessoa*/
32. Não use Eval () ou Construtor de Função
A sobrecarga dos construtores de Eval () e função é alta. Cada vez que são chamados, o mecanismo JavaScript precisa converter o código -fonte em código executável.
A cópia do código é a seguinte:
var func1 = nova função (funçãoCode);
var FUNC2 = EVEST (FUNCÇÃOCODE);
33. Evite usar com ()
Use com () para adicionar variáveis ao escopo global. Portanto, se houver outras variáveis com o mesmo nome, é fácil ser confuso e o valor também será substituído.
34. Não use-se para matrizes
evitar:
A cópia do código é a seguinte:
var sum = 0;
para (var i em Arraynumbers) {
Sum += Arraynumbers [i];
}
Em vez de:
A cópia do código é a seguinte:
var sum = 0;
for (var i = 0, len = arraynumbers.length; i <len; i ++) {
Sum += Arraynumbers [i];
}
Outra vantagem é que as duas variáveis I e LEN estão na primeira declaração do loop for, e ambas serão inicializadas apenas uma vez, que é mais rápido que o seguinte método de escrita:
A cópia do código é a seguinte:
for (var i = 0; i <Arraynumbers.length; i ++)
35. Use funções em vez de strings ao passar para setInterval () e Settimeout ()
Se você passar uma string para setTimeout () e setInterval (), eles se converterão de maneira semelhante a avaliar, que definitivamente será mais lenta, então não use:
A cópia do código é a seguinte:
setInterval ('doSomethingPeriodicalmente ()', 1000);
setTimeout ('DosomethingAfterFiveSeconds ()', 5000);
Em vez disso, use:
A cópia do código é a seguinte:
setInterval (doSomethingPeriodicamente, 1000);
setTimeout (doSomethingAfterfiveSeconds, 5000);
36. Use o interruptor/caixa em vez de uma grande pilha de se/else
Ao julgar que existem mais de duas filiais, use o switch/estojo para ser mais rápido e mais elegante e mais propício à organização do código. Obviamente, se houver mais de 10 ramos, não use o comutador/caixa.
37. Use intervalos digitais no comutador/caso
De fato, as condições do caso no comutador/caso também podem ser escritas assim:
A cópia do código é a seguinte:
função getCategory (idade) {
var category = "";
Switch (true) {
Caso isnan (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); // vai devolver "bebê"
38. Use objetos como protótipos
Dessa forma, você pode criar um novo objeto com base nisso como um parâmetro:
A cópia do código é a seguinte:
função clone (objeto) {
função onShotConstructor () {};
OnShotConstructor.prototype = object;
devolver o novo onehotConstructor ();
}
clone (matriz) .prototipo; // []
39. Função de conversão de campo HTML
A cópia do código é a seguinte:
função escapehtml (text) {
var replacements = {"<": "<", ">": ">", "&": "&", "/": "" "};
Return text.replace (/[<> & "]/g, function (caractere) {
retornar substituições [caracteres];
});
}
40. Não use Try-Catch-finalmente dentro do loop
A parte da captura no Try-Catch-Finally atribuirá exceções a uma variável quando executada, e essa variável será construída em uma nova variável no escopo do tempo de execução.
Não:
A cópia do código é a seguinte:
var object = ['foo', 'bar'], i;
for (i = 0, len = object.Length; i <len; i ++) {
tentar {
// Faça algo que lança uma exceção
}
Catch (e) {
// lidera a exceção
}
}
Em vez de:
A cópia do código é a seguinte:
var object = ['foo', 'bar'], i;
tentar {
for (i = 0, len = object.Length; i <len; i ++) {
// Faça algo que lança uma exceção
}
}
Catch (e) {
// lidera a exceção
}
41. Preste atenção à definição de tempo limite ao usar xmlhttprequests
Quando o xmlHttPrequests é executado, quando não há resposta por um longo tempo (como problemas de rede etc.), a conexão deve ser abortada. Este trabalho pode ser feito por setTimeout ():
A cópia do código é a seguinte:
var xhr = novo xmlHttPrequest ();
xhr.onreadyStateChange = function () {
if (this.readyState == 4) {
ClearTimeout (tempo limite);
// Faça algo com dados de resposta
}
}
var timeout = setTimeout (function () {
xhr.abort (); // Retorno de chamada de erro de chamada
}, 60*1000 /*Tempo limite após um minuto* /);
xhr.open ('get', url, true);
xhr.send ();
Ao mesmo tempo, deve -se notar que várias solicitações xmlHttPrequests não devem ser iniciadas ao mesmo tempo.
42. Lidar com o tempo limite do WebSocket
De um modo geral, após a criação da conexão do WebSocket, se não houver atividade em 30 segundos, o servidor será interrompido a conexão e o firewall também pode diminuir a conexão que não está ativa em um ciclo de unidade.
Para impedir que isso aconteça, uma mensagem vazia pode ser enviada ao servidor a cada determinado tempo. Esse requisito pode ser alcançado pelas duas funções a seguir, uma para manter a conexão ativa e a outra especificamente para encerrar esse estado.
A cópia do código é a seguinte:
var timerID = 0;
função keepalive () {
var timeout = 15000;
if (websocket.readyState == websocket.open) {
websocket.send ('');
}
timerID = setTimeout (Keepalive, Timeout);
}
função cancelkeepalive () {
if (timerid) {
canceltimeout (timerid);
}
}
A função keepalive () pode ser colocada no final do método onopen () da conexão WebSocket e cancelkeepalive () pode ser colocada no final do método onclose ().
43. Preste atenção ao tempo e o operador original é mais rápido que a chamada de função. Use baunilas
Por exemplo, geralmente não é assim:
A cópia do código é a seguinte:
var min = math.min (a, b);
A.Push (V);
Isso pode ser usado em vez disso:
A cópia do código é a seguinte:
var min = a <b? A: B;
A [A.Length] = V;
44. Preste atenção à estrutura do código durante o desenvolvimento, verifique e compacte o código JavaScript antes de entrar online
Você pode usar ferramentas como JSLINT ou JSMIN para verificar e compactar o código.