JavaScript Avançado: Como escrever um código JavaScript elegante

contente

1. Código sustentável

De um modo geral, o código é sustentável significa que possui as seguintes características:

Fácil de entender, não há necessidade de perguntar ao desenvolvedor original, qualquer um pode ver o que o código faz e como ele é implementado;
De acordo com o senso comum, tudo no código parece lógico, por mais complicada que seja a operação;
Fácil de adaptar, mesmo que os dados mudem, não precisa ser totalmente reescrito;
Fácil de expandir, a estrutura do código foi cuidadosamente projetada para suportar futuras expansões das funções principais;
Fácil de depurar, quando há um problema, o código pode fornecer informações claras e pode localizar diretamente o problema;

2. Especificações de codificação - Legibilidade

Para tornar o código fácil de manter, ele deve primeiro ser legível. A indentação de código é uma base importante para garantir a legibilidade.Se todos usarem a mesma indentação, o código de todo o projeto será mais fácil de entender. O recuo geralmente é definido pelo número de espaços em vez da tecla tab, porque a tecla tab é exibida de maneira diferente em diferentes compiladores de texto e, geralmente, o recuo é de 4 espaços.
Outro aspecto da legibilidade são os comentários de código. Na maioria das linguagens de programação, é uma prática amplamente aceita escrever comentários para cada método.
Em geral, os comentários devem ser escritos nos seguintes locais:

Funções e métodos, cada função e método devem ser comentados para descrever sua finalidade e o algoritmo usado para realizar a tarefa. Ao mesmo tempo, também escreva claramente a premissa da função ou método, o significado de cada parâmetro e se a função retorna um valor.
Blocos de código grandes, várias linhas de código, mas usados para concluir uma única tarefa, devem ser comentados na frente para escrever claramente a tarefa a ser concluída.
Algoritmos complexos, caso utilizem um método único para resolver o problema, devem ser explicados por meio de anotações. Isso não apenas ajudará outras pessoas a revisar o código, mas também ajudará você mesmo a revisar o código no futuro.
Use tecnologia preta, alguns métodos especiais e suposições específicas.

3. Nomeação de variáveis e funções

A nomeação adequada de variáveis e funções no código é fundamental para sua legibilidade e manutenção.

nome da variável deve ser nome;
Os nomes das funções devem começar com um verbo;
Variáveis, funções e métodos começam com uma letra minúscula e usam camel case;
O nome deve ser o mais descritivo e intuitivo possível, mas não muito detalhado;

Quarto, acoplamento solto

Sempre que uma parte de um aplicativo depende muito de outra, o código se torna fortemente acoplado e, portanto, difícil de manter.
Um problema típico é que um objeto tem uma referência direta a outro, de modo que modificar um pode ter que modificar o outro. Software fortemente acoplado é difícil de manter e definitivamente exigirá reescritas frequentes.

1. Separe HTML e JavaScript

O acoplamento mais comum no desenvolvimento da Web é HTML e JavaScript. Em páginas da Web, HTML e JavaScript representam soluções em diferentes níveis. HTML é dados e JavaScript é comportamento. Isso ocorre porque para que eles interoperem, as duas tecnologias precisam estar conectadas de maneiras diferentes. Infelizmente, algumas dessas maneiras levam a um forte acoplamento de HTML e JavaScript.
Incorpore JavaScript diretamente em HTML ou use um

<!-- 使用<script>造成紧密耦合 -->
<script>
	document.write("hello 哪吒编程");
</script>

<!-- 使用事件处理程序属性造成紧密耦合 -->
<input type="button" value="Click me" onclick="dosomething()"/>

Embora isso seja tecnicamente bom, na prática ele acopla fortemente o HTML que representa os dados com o JavaScript que define o comportamento. Idealmente, o HTML e o JavaScript devem ser completamente separados, com o JavaScript sendo importado por meio de um arquivo externo e adicionado usando o DOM comportamento.
Em geral, a criação de grandes quantidades de HTML em JavaScript deve ser evitada. Novamente, isso é principalmente para garantir que a camada de dados e a camada de comportamento executem suas respectivas funções, e é mais fácil localizar o problema quando algo dá errado.

2. Separe CSS e JavaScript

Outra camada de um aplicativo da Web é o CSS, responsável pelo estilo da página.
JavaScript e CSS estão intimamente relacionados e ambos são construídos em cima do HTML, portanto, geralmente são usados juntos.
Um exemplo em que CSS e JavaScript estão intimamente ligados:

element.style.color = "red";
element.style.backgroundColor = "blue";

3. Separe a lógica do aplicativo e os manipuladores de eventos

Cada aplicativo da web tem um grande número de manipuladores de eventos que atendem a vários eventos. No entanto, muito poucos deles podem separar a lógica do aplicativo dos manipuladores de eventos.
Aqui estão alguns pontos que você deve estar ciente ao desacoplar a lógica do aplicativo e a lógica de negócios:

Não passe o objeto de evento para outros métodos, mas apenas passe os dados necessários no objeto de evento;
Cada operação possível no aplicativo deve ser executada sem manipuladores de eventos;
Os manipuladores de eventos devem lidar com eventos e deixar o processamento subsequente para a lógica do aplicativo;
fazer o que foi dito acima pode dar um grande impulso à manutenção de qualquer código, além de abrir muitas possibilidades para testes e desenvolvimentos futuros.

5. Convenções de Codificação

1. Respeite a propriedade do objeto
2. Não declare variáveis globais
No máximo uma variável global pode ser criada como um namespace para outros objetos e funções.
3. Não compare null
4. Use constantes

valor repetido
seqüência de interface do usuário
URL
qualquer valor que possa variar

6. Conscientização do escopo

À medida que o número de escopos na cadeia de escopo aumenta, também aumenta o tempo necessário para acessar variáveis fora da cadeia de escopo atual, acessar variáveis globais é sempre mais lento do que acessar variáveis locais porque a cadeia de escopo deve ser atravessada, qualquer encurtamento suspeito do efeito de travessia As iniciativas de tempo da cadeia de domínio podem melhorar o desempenho do código.

1. Evite pesquisas globais

Uma das coisas muito importantes para melhorar o desempenho do seu código é provavelmente tomar cuidado com as pesquisas globais. Variáveis e funções globais são sempre as que consomem mais tempo em comparação com variáveis locais devido às pesquisas da cadeia de escopo.
Se o documento for referenciado várias vezes no loop for, o desempenho dessa função pode ser significativamente aprimorado salvando a referência ao objeto de documento no escopo local, pois apenas a pesquisa da cadeia de escopo é necessária.

2. A declaração com não é aplicável

A instrução with deve ser evitada em código de desempenho crítico. Semelhante a uma função, a instrução with cria seu próprio escopo e, portanto, alonga a cadeia de escopo do código dentro dela. O diamagnético dentro da instrução with deve ser mais lento do que o código executado fora dela por causa de mais uma etapa na pesquisa da cadeia de escopo.

Sete, otimize o ciclo

Uma construção sintática comumente usada na programação enquanto os loops são, portanto, muito comuns em JavaScript, otimizar esses loops é uma parte importante da otimização de desempenho, porque o loop executará o mesmo código várias vezes, portanto, o tempo de execução aumentará automaticamente.

1. Simplifique as condições de rescisão

Deve ser o mais rápido possível porque a condição de término é calculada toda vez que o loop é repetido.

2. Simplifique o corpo do loop

O corpo do loop é a parte mais demorada, então tente otimizá-lo o máximo possível. Certifique-se de que não contenha cálculos intensivos que possam ser facilmente movidos para fora do loop.

3. Ciclo de teste após o uso

Os loops mais comuns são os loops for e while, ambos são loops test-first. do-while é um loop pós-teste que evita a avaliação inicial da condição de término e, portanto, é mais rápido.

4. Desenrole o laço

Se o número de loops for limitado, geralmente é mais rápido abandonar o loop e apenas chamar a função várias vezes.

8. Minimize frases

O número de instruções de código JavaScript afeta a velocidade de execução. Uma instrução que pode executar várias operações é mais rápida do que várias instruções que executam uma operação cada. Então, o objetivo da otimização é encontrar instruções que possam ser combinadas para reduzir o tempo de execução de todo o script.

1. Declarações de múltiplas variáveis

2. Insira valores iterativos

Sempre que você usar valores iterativos (incrementar ou decrementar), use instruções compostas sempre que possível.
por exemplo
let name = values[i++]
, substituto

let name = values[i];
i++;

3. Use arrays e literais de objeto

Nove, otimize a interação do DOM

Em todo código JavaScript, a parte que envolve o DOM é sem dúvida muito lenta. A manipulação e interação do DOM leva muito tempo, pois toda ou parte da página precisa ser renderizada com frequência. Além disso, operações aparentemente simples podem levar muito tempo devido à grande quantidade de informações contidas no DOM. Entender como otimizar as interações do DOM pode acelerar bastante a execução do script.

1. Minimize as atualizações em tempo real

Ao acessar o DOM, desde que a parte acessada faça parte da página exibida, está realizando uma operação de atualização em tempo real. É chamado de atualização ao vivo porque envolve atualizar a exibição da página imediatamente para o usuário ver. Cada atualização desse tipo, independentemente de inserir um caractere ou excluir um conteúdo da página, incorre em uma penalidade de desempenho. Isso ocorre porque o navegador precisa recalcular milhares de métricas para isso antes de realizar a atualização. Quanto mais atualizações em tempo real, mais tempo leva para executar o código.

2. Use innerHTML

Há duas maneiras de criar novos nós DOM em uma página, usando métodos DOM, como createElement() e appendChild(), e usando innerHTML. Para um pequeno número de atualizações do DOM, há pouca diferença entre as duas técnicas, mas para um grande número de atualizações do DOM, usar innerHTML é muito mais rápido do que criar a mesma estrutura usando métodos DOM padrão.
Ao atribuir um valor a innerHTML, um analisador HTML é criado em segundo plano e, em seguida, a estrutura DOM é criada usando chamadas DOM nativas em vez de métodos DOM do JavaScript, que são mais rápidos porque executam código compilado em vez de código interpretado.

3. Use eventos delegados

A maioria dos aplicativos da Web faz uso intenso de manipuladores de eventos para interação do usuário. O número de manipuladores de eventos em uma página está diretamente relacionado à velocidade com que a página responde às interações do usuário. Para reduzir o impacto nas respostas da página, a delegação de eventos deve ser usada o máximo possível.
A delegação de eventos aproveita o borbulhar de eventos, e qualquer evento borbulhante pode ser tratado não no destino do evento, mas em qualquer elemento ancestral do destino. Com base nesse conhecimento, manipuladores de eventos podem ser adicionados a elementos de nível superior responsáveis por vários destinos. Sempre que possível, os manipuladores de eventos devem ser adicionados no nível do documento, pois os eventos da página inteira podem ser tratados no nível do documento.

4 Coleção HTML

Como as aplicações web apresentam grandes problemas de desempenho, desde que o HTMLCollection seja acessado, sejam suas propriedades ou métodos, ele acionará o documento de consulta, e essa consulta é bastante demorada. Reduzir o número de visitas ao HTMLCollection pode melhorar o desempenho do script.
O local mais crítico para otimizar o acesso ao HTMLCollection é o loop.

10. Mapa Mental JavaScript

insira a descrição da imagem aqui

Preste atenção ao número público: programação Nezha

A programação da Nezha atualiza artigos de alta qualidade toda semana. Depois de prestar atenção, responda a [CSDN] para receber mapas mentais Java, materiais de aprendizagem Java e materiais de entrevista em massa.

Adicione-me WeChat: 18525351592

Puxe você para o grupo de troca técnica, há muitos figurões técnicos no grupo, troque tecnologia juntos, avance juntos, entre na grande fábrica juntos e você pode comprar livros técnicos de graça ~~