JavaScript avanzado: cómo escribir código JavaScript elegante

1. Código mantenible

En términos generales, el código es mantenible significa que tiene las siguientes características:

1. Fácil de entender, no es necesario preguntarle al desarrollador original, cualquiera puede ver qué hace el código y cómo se implementa;
2. De acuerdo con el sentido común, todo en el código parece lógico, por complicada que sea la operación;
3. Fácil de adaptar, incluso si los datos cambian, no necesita ser reescrito por completo;
4. Fácil de expandir, la estructura del código ha sido cuidadosamente diseñada para admitir la futura expansión de las funciones principales;
5. Fácil de depurar, cuando hay un problema, el código puede brindar información clara y puede ubicar directamente el problema;

2. Especificaciones de codificación: legibilidad

Para que el código sea fácil de mantener, primero debe hacerse legible. La sangría del código es una base importante para garantizar la legibilidad. Si todos usan la misma sangría, el código de todo el proyecto será más fácil de entender. La sangría generalmente se define por la cantidad de espacios en lugar de la tecla de tabulación, porque la tecla de tabulación se muestra de manera diferente en diferentes compiladores de texto y, en general, la sangría es de 4 espacios.
Otro aspecto de la legibilidad son los comentarios de código. En la mayoría de los lenguajes de programación, es una práctica ampliamente aceptada escribir comentarios para cada método.
En general, los comentarios deben escribirse en los siguientes lugares:

1. Funciones y métodos, cada función y método debe comentarse para describir su propósito y el algoritmo utilizado para realizar la tarea. Al mismo tiempo, también escriba claramente la premisa de la función o método, el significado de cada parámetro y si la función devuelve un valor.
2. Los bloques de código grandes, varias líneas de código pero que se usan para completar una sola tarea, deben comentarse al frente para escribir claramente la tarea que se debe completar.
3. Los algoritmos complejos, si utilizan un método único para resolver el problema, deben explicarse mediante anotaciones. Esto no solo ayudará a otros a revisar el código, sino que también lo ayudará a usted mismo a revisar el código en el futuro.
4. Use tecnología negra, algunos métodos especiales y suposiciones específicas.

3. Nomenclatura de variables y funciones

La denominación adecuada de variables y funciones en el código es fundamental para su legibilidad y mantenimiento.

1. el nombre de la variable debe ser nombre;
2. Los nombres de funciones deben comenzar con un verbo;
3. Las variables, funciones y métodos comienzan con una letra minúscula y usan mayúsculas y minúsculas;
4. El nombre debe ser lo más descriptivo e intuitivo posible, pero no demasiado detallado;

Cuarto, acoplamiento flojo

Cada vez que una parte de una aplicación depende demasiado de otra, el código se acopla estrechamente y, por lo tanto, es difícil de mantener.
Un problema típico es que un objeto tiene una referencia directa a otro, por lo que modificar uno puede tener que modificar el otro. El software estrechamente acoplado es difícil de mantener y definitivamente requerirá reescrituras frecuentes.

1. Separar HTML y JavaScript

El acoplamiento más común en el desarrollo web es HTML y JavaScript. En las páginas web, HTML y JavaScript representan soluciones en diferentes niveles. HTML son datos y JavaScript es comportamiento. Esto se debe a que para que puedan interoperar, las dos tecnologías deben estar vinculadas de diferentes maneras. Desafortunadamente, algunas de estas formas conducen a un acoplamiento estrecho de HTML y JavaScript.
Incruste JavaScript directamente en HTML, o use un

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

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

Si bien esto es técnicamente correcto, en la práctica acopla estrechamente el HTML que representa los datos con el JavaScript que define el comportamiento.Idealmente, HTML y JavaScript deberían estar completamente separados, con JavaScript importado a través de un archivo externo y luego agregado usando el DOM. conducta.
En general, debe evitarse la creación de grandes cantidades de HTML en JavaScript. Una vez más, esto es principalmente para garantizar que la capa de datos y la capa de comportamiento realicen sus funciones respectivas y que sea más fácil localizar el problema cuando algo sale mal.

2. Separar CSS y JavaScript

Otra capa de una aplicación web es CSS, que es responsable del estilo de la
página.JavaScript y CSS están estrechamente relacionados y ambos se basan en HTML, por lo que a menudo se usan juntos.
Un ejemplo donde CSS y JavaScript están estrechamente vinculados:

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

3. Desacople la lógica de la aplicación y los controladores de eventos

Cada aplicación web tiene una gran cantidad de controladores de eventos que escuchan varios eventos. Sin embargo, muy pocos de ellos pueden separar la lógica de la aplicación de los controladores de eventos.
Estos son algunos puntos que debe tener en cuenta al desacoplar la lógica de la aplicación y la lógica empresarial:

1. No pase el objeto de evento a otros métodos, solo pase los datos necesarios en el objeto de evento;
2. Todas las operaciones posibles en la aplicación deben realizarse sin controladores de eventos;
3. Los controladores de eventos deben manejar eventos y dejar el procesamiento posterior a la lógica de la aplicación;
   hacer lo anterior puede dar un gran impulso a la mantenibilidad de cualquier código, así como abrir muchas posibilidades para futuras pruebas y desarrollo.

5. Convenciones de codificación

1. Respete la propiedad de los objetos
2. No declare variables globales
Como máximo se puede crear una variable global como espacio de nombres para otros objetos y funciones.
3. No compares valores nulos
4. Usa constantes

1. valor repetido
2. cadena de interfaz de usuario
3. URL
4. cualquier valor que puede variar

6. Conocimiento del alcance

A medida que aumenta el número de ámbitos en la cadena de ámbitos, también aumenta el tiempo necesario para acceder a las variables fuera de la cadena de ámbitos actual; el acceso a las variables globales siempre es más lento que el acceso a las variables locales porque se debe recorrer la cadena de ámbitos, cualquier reducción sospechosa del efecto transversal Las iniciativas de tiempo de cadena de dominio pueden mejorar el rendimiento del código.

1. Evite las búsquedas globales

Una de las cosas más importantes para mejorar el rendimiento de su código es probablemente tener cuidado con las búsquedas globales. Las variables y funciones globales son siempre las que consumen más tiempo en comparación con las variables locales debido a las búsquedas de cadenas de alcance.
Si se hace referencia al documento varias veces en el bucle for, el rendimiento de esta función se puede mejorar significativamente guardando la referencia al objeto del documento en el ámbito local, ya que solo se requiere la búsqueda de la cadena de ámbito.

2. La declaración with no es aplicable

La declaración with debe evitarse en el código crítico para el rendimiento.Al igual que una función, la declaración with crea su propio alcance y, por lo tanto, alarga la cadena de alcance del código dentro de ella. El diamagnético dentro de la instrucción with debe ser más lento que el código ejecutado fuera de ella debido a un paso más en la búsqueda de la cadena de alcance.

Siete, optimizar el ciclo

Una construcción sintáctica comúnmente utilizada en la programación mientras que los bucles son muy comunes en JavaScript, la optimización de estos bucles es una parte importante de la optimización del rendimiento, ya que el bucle ejecutará el mismo código varias veces, por lo que el tiempo de ejecución aumentará automáticamente.

1. Simplificar las condiciones de terminación

Debe ser lo más rápido posible porque la condición de terminación se calcula cada vez que se realiza un bucle.

2. Simplifica el cuerpo del loop

El cuerpo del bucle es la parte que consume más tiempo, así que intente optimizarlo tanto como sea posible. Asegúrese de que no contenga cálculos intensivos que puedan moverse fácilmente fuera del ciclo.

3. Ciclo de prueba después del uso

Los bucles más comunes son bucles for y while, los cuales son bucles de prueba primero. do-while es un ciclo posterior a la prueba que evita la evaluación inicial de la condición de terminación y, por lo tanto, es más rápido.

4. Desenrolla el lazo

Si la cantidad de bucles es limitada, generalmente es más rápido deshacerse del bucle y simplemente llamar a la función varias veces.

8. Minimiza las oraciones

La cantidad de declaraciones de código JavaScript afecta la velocidad de ejecución. Una declaración que puede realizar varias operaciones es más rápida que varias declaraciones que realizan una operación cada una. Luego, el objetivo de la optimización es encontrar declaraciones que se puedan combinar para reducir el tiempo de ejecución de todo el script.

1. Declaraciones de variables múltiples

2. Insertar valores iterativos

Siempre que use valores iterativos (incremento o decremento), use declaraciones compuestas siempre que sea posible.
por ejemplo,
let name = values[i++]
sustituir

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

3. Usa matrices y objetos literales

Nueve, optimizar la interacción DOM

En todo código JavaScript, la parte que involucra al DOM es sin duda muy lenta. La manipulación e interacción del DOM lleva mucho tiempo, ya que la totalidad o parte de la página debe volver a renderizarse con frecuencia. Además, las operaciones aparentemente simples pueden llevar mucho tiempo debido a la gran cantidad de información que se transporta en el DOM. Comprender cómo optimizar las interacciones DOM puede acelerar en gran medida la ejecución de scripts.

1. Minimice las actualizaciones en tiempo real

Al acceder al DOM, siempre que la parte a la que se accede sea parte de la página mostrada, se está realizando una operación de actualización en tiempo real. Se llama actualización en vivo porque implica actualizar la visualización de la página inmediatamente para que el usuario la vea. Cada actualización de este tipo, ya sea que inserte un carácter o elimine una parte del contenido de la página, incurre en una penalización de rendimiento. Esto se debe a que el navegador necesita volver a calcular miles de métricas antes de poder realizar la actualización. Cuantas más actualizaciones en tiempo real, más tiempo se tarda en ejecutar el código.

2. Usa HTML interno

Hay dos formas de crear nuevos nodos DOM en una página, usando métodos DOM como createElement() y appendChild(), y usando innerHTML. Para una pequeña cantidad de actualizaciones de DOM, hay poca diferencia entre las dos técnicas, pero para una gran cantidad de actualizaciones de DOM, usar innerHTML es mucho más rápido que crear la misma estructura usando métodos DOM estándar.
Al asignar un valor a innerHTML, se crea un analizador HTML en segundo plano y, luego, se crea la estructura DOM mediante llamadas DOM nativas en lugar de los métodos DOM de JavaScript, que son más rápidos porque ejecutan código compilado en lugar de código interpretado.

3. Usa eventos delegados

La mayoría de las aplicaciones web hacen un uso intensivo de los controladores de eventos para la interacción del usuario. La cantidad de controladores de eventos en una página está directamente relacionada con la velocidad a la que la página responde a las interacciones del usuario. Para reducir el impacto en las respuestas de la página, se debe usar la delegación de eventos tanto como sea posible.
La delegación de eventos aprovecha la propagación de eventos, y cualquier evento de propagación puede controlarse no en el destino del evento, sino en cualquier elemento antecesor del destino. Según este conocimiento, los controladores de eventos se pueden agregar a elementos de nivel superior responsables de múltiples objetivos. Siempre que sea posible, los controladores de eventos deben agregarse a nivel de documento, ya que los eventos de toda la página se pueden controlar a nivel de documento.

4 Colección HTML

Debido a que las aplicaciones web tienen grandes problemas de rendimiento, siempre que se acceda a HTMLCollection, ya sean sus propiedades o métodos, activará el documento de consulta, y esta consulta consume bastante tiempo. Reducir el número de visitas a HTMLCollection puede mejorar el rendimiento del script.
El lugar más crítico para optimizar el acceso a HTMLCollection es el bucle.

10. Mapa mental de JavaScript

Preste atención al número público: programación Nezha

La programación de Nezha actualiza artículos de alta calidad todas las semanas. Después de prestar atención, responda a [CSDN] para recibir mapas mentales de Java, materiales de aprendizaje de Java y materiales de entrevistas masivas.

 

Agrégame WeChat: 18525351592

Ingrese al grupo de intercambio técnico, hay muchos peces gordos técnicos en el grupo, intercambien tecnología juntos, avancen juntos, ingresen juntos a la gran fábrica y pueden comprar libros técnicos gratis ~~