Este artigo descreve 14 regras que devem ser seguidas ao escrever o código JavaScript. Compartilhe -o para sua referência, como segue:
1. Sempre use 'var'
No JavaScript, as variáveis são globalmente ou em toda a função. O uso da palavra -chave "var" será a chave para manter as variáveis concisas e claras. Ao declarar uma variável global ou no nível da função, a palavra-chave "var" deve sempre ser precedida. O exemplo a seguir enfatizará o problema potencial de não fazê -lo.
Problemas causados por não usar VAR
var i = 0; // Isso é bom - cria um teste global de função variável () {for (i = 0; i <10; i ++) {alert ("hello world!");}} Test (); alert (i); // A variável global I agora tem 10!Como a variável i na função variável não usa VAR para torná-la uma variável no nível da função, neste exemplo, ela faz referência a uma variável global. Sempre usar o VAR para declarar variáveis globais é muita prática, mas é crucial usar VAR para definir uma variável em toda a função. Os dois métodos a seguir são funcionalmente iguais:
A função correta
function test () {var i = 0; para (i = 0; i <10; i ++) {alert ("hello world!");}}}A função correta
function test () {for (var i = 0; i <10; i ++) {alert ("Hello World!");}}2. Detecção de recursos em vez de detecção de navegador
Algum código foi gravado para descobrir a versão do navegador e executar comportamentos diferentes com base no cliente que o usuário está usando. Isso, em geral, é uma prática muito ruim. Uma abordagem melhor é usar a detecção de recursos, primeiro detecte (o navegador) se existe esse recurso ou recurso antes de usar um recurso avançado que um navegador antigo possa não suportar e depois usá -lo. Isso detecta individualmente a versão do navegador é melhor, mesmo que você saiba o desempenho dele. Você pode encontrar um artigo que discute essa questão em profundidade em http://www.jibbering.com/faq/faq_notes/not_browser_detect.html.
exemplo:
if (document.getElementById) {var element = document.getElementById ('myid');} else {alert ('Seu navegador não possui os recursos necessários para executar este script!');}3. Use notação de suporte quadrado
Quando o acesso é determinado por execução ou inclui propriedades de objeto que não podem ser acessadas com o "". Sign, notação de suporte quadrado é usado. Se você não é um programador JavaScript experiente, sempre usar suportes quadrados é uma boa maneira de fazer isso
As propriedades de um objeto são acessadas por dois métodos fixos: "." Substantivo e "[]" Notação de suporte quadrado:
"." Método de notação:
MyObject.property
"[]" Notação de suporte quadrado:
MyObject ["Propriedade"]
Use o "". Assinar, o nome do atributo é o código rígido e não pode ser alterado durante a execução. Usando os colchetes "[] []", o nome do atributo é uma string que vem do cálculo do nome do atributo. Uma string deve ser um código rígido, ou uma variável, ou mesmo uma função que chama de volta um valor de string. Se um nome de atributo for gerado durante a execução, os suportes quadrados serão necessários. Se você possui propriedades como "value1", "value2" e "value3", e deseja usar a variável i = 2 para acessar
Isso pode ser executado:
MyObject ["valor"+i]
Isso não pode ser:
MyObject.value+i
E em alguns ambientes do lado do servidor (PHP, struts, etc.), os formulários são anexados com números [] para indicar que os formulários devem ser tratados como matrizes no lado do servidor. Dessa forma, usando o "". O sinal para se referir a um campo que contém o sinal [] não será executado porque [] é a sintaxe para se referir a uma matriz JavaScript. Portanto, é necessária [] notação:
Isso pode ser executado:
formref.Elements ["nome []"]
Isso não pode ser:
formref.Elements.name []
O uso recomendado da notação de suporte quadrado "[] [] [] significa que ela é sempre usada quando precisa (obviamente). É uma preferência e hábito privados quando não é estritamente necessário usá -lo. Um bom princípio empírico é usar o "". Notação para acessar as propriedades padrão do objeto e usar a notação de suporte quadrado "[] [] para acessar as propriedades do objeto definidas pela página. Dessa maneira, o documento ["getElementById"] () é um uso perfeitamente viável "[]" "", mas document.getElementById () é preferido sintaticamente porque o getElementById é uma propriedade de documento padrão definida em uma especificação DOM. Misture essas duas anotações a serem feitas, que é um atributo de objeto padrão e qual nome de atributo é definido pelo contexto deixa claro no código:
document.forms ["myformName"]. Elements ["myInput"]
Aqui, o Forms é uma propriedade padrão do documento, e o nome do formulário MyFormName é definido pela página. Ao mesmo tempo, os elementos e os atributos de valor são atributos padrão definidos pela especificação. MyInput é definido pela página. Esta página é uma sintaxe que facilita a compreensão das pessoas (o conteúdo do código) e é um idioma recomendado, mas não um princípio estrito.
4. Evite 'avaliar'
No JavaScript, a função Eval () é um método para executar o código arbitrário durante a execução. Em quase todos os casos, a avaliação não deve ser usada. Se aparecer na sua página, significa que há uma maneira melhor do que você está fazendo. Por exemplo, a avaliação é geralmente usada por programadores que não sabem usar a notação de suporte quadrado.
Em princípio, "avaliar é mau (avaliar é o diabo). Não o use, a menos que você seja um desenvolvedor experiente e saiba que sua situação é uma exceção.
5. Referências corretas aos elementos de formulário e formulário
Todos os formulários HTML devem ter um atributo de nome. Para documentos XHTML, o atributo de nome não é necessário, mas a tag de formulário deve ter o atributo de ID correspondente e deve ser referenciada com document.getElementById (). O uso de métodos de indexação como document.forms [0] para referenciar formulários é uma péssima prática em quase todos os casos. Alguns navegadores tratam os elementos nomeados em documentos usando o formulário como um atributo de formulário disponível. Isso não é confiável e não deve ser usado.
O exemplo a seguir mostra como impedir a referência incorreta de uma entrada de formulário usando colchetes quadrados e método de referência de objeto correto:
Entrada de formulário de referência correta:
document.forms ["formname"]. Elements ["inputName"]
Abordagem ruim:
Document.FormName.inputName
Se você deseja fazer referência a dois elementos de formulário em uma função, é melhor consultar o objeto do formulário primeiro e armazená -lo em uma variável. Isso evita consultas duplicadas para resolver referências de formulário:
var formElements = document.forms ["mainform"]. Elements; formElements ["input1"]. value = "a"; formElements ["input2"]. value = "b";
Quando você usa o OnChange ou outros métodos de manuseio de eventos semelhantes, uma boa abordagem é sempre se referir ao próprio elemento de entrada na função através de uma entradas. Todos os elementos de entrada carregam uma referência ao formulário que o contém:
<input type = "text" name = "endereço" onchange = "validate (this)">
função validate (input_obj) {// referência formvar theform contendo este elemento = input_obj.form; // Agora você pode se referir ao próprio formulário sem usar o código rígido se (theForm.Elements ["City"]. Value == "") {alert ("erro");}}Ao acessar as propriedades do formulário referenciando o elemento de formulário, você pode escrever uma função que não contenha código rígido para se referir a qualquer formulário nesta página com um nome específico. Esta é uma prática muito boa, porque as funções se tornam reutilizáveis.
Evite 'com'
A declaração com JavaScript insere um objeto na extremidade frontal de um escopo; portanto, qualquer referência a atributos/variáveis será resolvida primeiro com base no objeto. Isso é frequentemente usado como atalho para evitar referências duplicadas:
Exemplo de uso com:
com (document.forms ["mainform"]. elementos) {input1.value = "lixo"; input2.value = "lixo";}Mas o problema é que os programadores não têm uma maneira de verificar se o Input1 ou o Input2 foi realmente resolvido como propriedades de matrizes de elementos do formulário. Primeiro, ele detecta o atributo com esses valores de nome e, se não puder ser encontrado, continuará a detectar esse escopo (para baixo). Finalmente, ele tenta tratar o Input1 e o Input2 como um objeto global, e isso termina com um erro.
A solução alternativa é criar um objeto que reduz as referências e usá -lo para resolver essas referências.
Use uma referência:
var elements = document.forms ["mainform"]. elementos; elementos.input1.value = "lixo"; elementos.input2.value = "lixo";
7. Use "OnClick" ancorada em vez de "JavaScript: pseudo-protocolo"
Se você deseja acionar o código JavaScript na tag <a>, escolha OnClick em vez de JavaScript: pseudo-protocolo; O código JavaScript em execução usando o OnClick deve retornar a Ture ou False (ou uma expressão do que as avaliações para verdadeiro ou falso [como traduzir essa frase? Entendo desta maneira: uma expressão com prioridade acima ou falsa]) para devolver a própria tag: se verdadeiro, o href da âncora será tratado como um link geral; Se falso, o href será ignorado. É por isso que "retorne falsa"; é frequentemente incluído no final do código processado pelo OnClick.
Sintaxe correta:
Copie o código da seguinte forma: <a href = "// www.vevb.com" onclick = "Dosomething (); retorna false;"> go </a>
Nesse caso, a função "Dosomething ()" (definida em um canto da página) será chamada quando clicada. O HREF nunca será acessado por um navegador habilitado para JavaScript. O documento javascript_required.html será carregado em um navegador onde você pode lembrar o JavaScript necessário e não ativado pelo usuário. Geralmente, quando você garante que o usuário permita o suporte ao JavaScript, para o máximo possível, o link incluirá apenas href = "#". E essa abordagem não é incentivada. Geralmente, há uma boa abordagem: ele pode fornecer uma página que retorna à área local sem usar o JavaScript.
Às vezes, muitas pessoas querem visitar um link de acordo com situações. Por exemplo, quando um usuário deseja deixar uma de suas páginas de formulário e deseja verificar primeiro para garantir que nada seja alterado. Nesse caso, seu OnClick acessará uma função que retorna uma consulta se o link deve ser seguido:
Acesso ao link condicional:
<a href = "/" onclick = "return validate ();"> home </a>
function validate () {return prompt ("Você tem certeza de que deseja sair desta página?");}Nesse caso, a função validate () deve retornar apenas ture ou false. Quando o usuário estiver em termos, o usuário poderá emitir a página inicial ou quando o link não for acessado. Este exemplo solicita a confirmação (seu comportamento) a acessar a Ture ou False, que é totalmente determinado pelo usuário clicando em "Real" ou "Cancelar".
Aqui estão alguns exemplos de "não deveria ser". Se você vir o código a seguir em sua página, isso está incorreto e precisará ser modificado:
O que não deve ser feito:
<a href = "javascript: Dosomething ()"> link </a> <a href = "// www.vevb.com/#" onclick = "Dosomething ()"> link </a> <a href = "// ww.vevb.com/#" onClick = "" href = "// www.vevb.com/#" onclick = "javascript: doSomething (); retorna false;"> link </a>
8. Use o operador unário '+' para girar o tipo para numerar
Em JavaScript, o operador de sinal "+" atua como um sinal de plus matemático e um conector. Isso pode causar problemas quando os valores de campo do formulário forem adicionados. Por exemplo, como o JavaScript é um idioma do tipo fraco, o valor do campo de formulário será processado como uma matriz e, quando você os levar juntos, o "+" será tratado como um conector, não um sinal matemático mais.
Exemplos de problemas:
<nome name = "myform" action = "[url]"> <input type = "text" name = "val1" value = "1"> <input type = "text" name = "val2" value = "2"> </morm>
função total () {var theForm = document.forms ["myform"]; var total = theForm.Elements ["val1"]. Valor + theForm.Elements ["val2"]. value; alert (total); // Isso vai aparecer "12", mas o que você quer é 3!}Para resolver esse problema, o JavaScript precisa de um prompt para torná -lo processar esses valores como números. Você pode usar o sinal "+" para converter uma matriz em um número. Apresentar uma variável ou expressão com um sinal "+" forçará o processamento como um número, e isso também permitirá que a matemática "+" seja aplicada com sucesso.
Código modificado:
função total () {var theForm = document.forms ["myform"]; var total = (+theForm.Elements ["val1"]. valor)+(+theform.lements ["val2"]. value); alert (total); // Isso alertará 3}9. Evite document.ll
Document.All foi introduzido pelo IE da Microsoft e não é um recurso JavaScript DOM padrão. Embora a maioria dos novos navegadores o suporte para oferecer suporte ao código ruim que depende disso, (e) existem muitos navegadores que não o apoiam.
Não há razão para que outros métodos não sejam aplicáveis e um antigo navegador do IE (<5.0) precisa de suporte e o documento. Você não precisa usar o documento. Tudo para detectar se é um navegador do IE, porque outros navegadores agora geralmente o suportam.
Somente document.ll é a última escolha:
if (document.getElementById) {var obj = document.getElementById ("myid");} else if (document.all) {var obj = document.all ("myid");}Alguns princípios para usar o Document.all:
Tente outros métodos
Quando é a última escolha
Quando é necessário suportar os navegadores do IE abaixo da versão 5.0
Sempre use "if (document.all) {}" para ver se ele é suportado.
10. Não use comentários HTML nos blocos de código de script
Nos velhos tempos de JavaScript (1995), alguns navegadores como o Netscape 1.0 não apoiaram ou reconheceram a tag <cript>. Portanto, quando o JavaScript foi lançado pela primeira vez, havia uma tecnologia que impediria que o código real fosse exibido em navegadores mais antigos como texto. Há um "hack" que usa comentários HTML no código para ocultar esses códigos.
Fazendo com que os comentários HTML não sejam bons:
<Script Language = "Javascript"> <!-// Code aqui //-> </sCript>
Hoje, nenhum navegador comumente usado ignora a tag <Script>. Portanto, não há mais necessidade de ocultar o código -fonte JavaScript. De fato, também pode ser considerado inútil pelos seguintes motivos:
Na documentação XHTML, o código -fonte será oculto de todos os navegadores e renderizado a inútil (conteúdo);
Os comentários HTML não são permitidos, isso invalidará qualquer operação de decréscimo.
11. Evite usar namespaces globais indiscriminadamente
Geralmente, todas as variáveis e funções raramente são necessárias. O uso global pode causar conflitos de documentos de arquivo de origem JavaScript e abortos de código. Portanto, uma boa abordagem é adotar o encapsulamento funcional dentro de um espaço de nome global. Existem várias maneiras de concluir esta tarefa, o que é relativamente complicado. A maneira mais fácil é criar um objeto global e atribuir propriedades e métodos a este objeto:
Crie um espaço para nome:
var mylib = {}; // objeto global contentermylib.Value = 1; mylib.increment = function () {mylib.value ++;} mylib.show = function () {alert (mylib.value);} mylib.value = 6; mylib.incrent (); mylib.show (); // Alerta 7Os namespaces também podem ser criados usando fechamentos, e as variáveis de membros privadas também podem ser disfarçadas no JavaScript.
12. Evite chamadas de 'Ajax' síncronas
Ao usar a solicitação "AJAX", você seleciona o modo assíncrono ou usa o modo síncrono. Quando o comportamento do navegador pode continuar sendo executado, o modo assíncrono coloca a solicitação em segundo plano e o modo síncrono aguardará até que a solicitação seja concluída antes de continuar.
As solicitações feitas no modo de sincronização devem ser evitadas. Essas solicitações desativarão o navegador ao usuário até que a solicitação retorne. Depois que o servidor estiver ocupado e leva algum tempo para concluir a solicitação, o navegador do usuário (ou OS) não poderá fazer mais nada até que a solicitação seja interrompida.
Se você acha que sua situação exige o modo de sincronização, a maior possibilidade é que você precise de tempo para repensar seu design. Raramente, se houver, solicitações de Ajax no modo síncrono são realmente necessárias.
13. Usando JSON
Quando for necessário armazenar a estrutura de dados em texto simples ou enviar/recuperar a estrutura de dados através do AJAX, use JSON em vez de XML o máximo possível. O JSON (JavaScript Object Notation) é um formato de armazenamento de dados mais conciso e eficiente e não depende de nenhum idioma (e é neutro em linguagem).
14. Use a tag <Cript> correta
O uso da propriedade do idioma em <Script> não é favorecido. Uma maneira adequada é criar o seguinte bloco de código JavaScript:
<script type = "text/javascript"> // código aqui </sCript>
PS: O código acima não foi formatado e o código formatado geralmente será mais fácil de ler e entender. Aqui estão algumas ferramentas de formatação e compressão on -line para você usar em desenvolvimento futuro:
Ferramentas de embelezamento e formatação de código JavaScript on -line:
http://tools.vevb.com/code/js
Ferramentas de embelezamento/formatação/formatação/criptografia JavaScript Code:
http://tools.vevb.com/code/jscompress
Ferramenta de compactação JSMIN Online JS:
http://tools.vevb.com/code/jsmincompress
Código JSON Formatação/embelezamento on -line/Ferramentas de compressão/edição/conversão:
http://tools.vevb.com/code/jsonncodeFormat
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Javascript Algoritmos e Técnicas de Traversal "e" Resumo do Uso do Javascript Mathematic Operations "
Espero que este artigo seja útil para a programação JavaScript de todos.