Cómo escribir código front-end JS y Html5 de alta calidad
En primer lugar, tengo algo de experiencia en desarrollo front-end. Si hay algún problema, espero que puedan darme algunas sugerencias para poder progresar mejor.
1.
Antes del desarrollo, debe haber una convención de nomenclatura para unificar el código y estandarizar la estructura del código del equipo, a fin de mejorar la legibilidad del código.
2.
Creo que todos ven códigos densamente empaquetados cuando miran el código de otras personas. Creo que todos tendrán dolor de cabeza si quieren leer la estructura del código. capaz de leerlo y lleva mucho tiempo. Por lo tanto, los comentarios se vuelven particularmente importantes. Cuanto más claros y detallados sean los comentarios, mayor será la facilidad de mantenimiento del código y creo que será más fácil de modificar y mantener. p>
3. Variables
Las variables están en todas partes en js, por lo que es particularmente importante declarar las variables de esta manera. Primero, use menos variables globales, lo que aumentará la velocidad de carga. una mala experiencia de usuario para el proyecto
4. Si declara una variable sin usar var, hará que la variable se convierta en una variable global.
5. Función
Número de parámetros de la función
Los parámetros de la función no deben exceder de 3. Si la función tiene más de 3 parámetros, algunos parámetros deben encapsularse.
6. Paso de parámetros de función
Pase solo los parámetros requeridos por la función. Por ejemplo
// No recomendado
función greet(data){
console.log('Hola, soy ' + data.name);
p>}
// Función recomendada
saludar(nombre){
console.log('Hola, soy ' + nombre);
}
7. Función de función
Una función solo hace una cosa. Esto ayuda con las pruebas y la reutilización del código.
Las funciones deben estar lo más libres posible de efectos secundarios. Sin efectos secundarios significa que los parámetros pasados y las variables globales no se modifican.
8. Reducir el código duplicado
Recuerdo haber visto en un artículo que si el código duplicado aparece tres veces, el código duplicado debe refactorizarse.
Acoplamiento flojo
Una función solo hace una cosa
Almacenar en caché algunos resultados de cálculo
9. p>
. Configuración separada y código lógico
No modifiques objetos que no te pertenecen
Los objetos que no te pertenecen incluyen
<. p> . Objetos nativos del navegador, como objetos, matrices, etc.DOM, como documentos
BOM, como ventanas
Objetos de biblioteca de clases<. /p>
Si desea ampliar la funcionalidad de los objetos nativos del navegador, puede crear una función y pasar objetos nativos del navegador en la función. Tal como lo hace Underscore.js.
10. Unificación del estilo del código
11. Evitar la duplicación de código tanto como sea posible
¿Cómo reducir el código duplicado?
. En JS, el código repetido se puede escribir como un método. Si es universal, se puede escribir en un archivo JS separado.
En CSS, es necesario utilizar la función Mixins de lenguajes de preprocesamiento como Sass y Less. Escribe las partes repetidas como mixins.
12. Configuración y lógica separadas
En JS, la configuración común de todo el sitio está escrita en config.js. Si es una configuración js, al comienzo del archivo, use el objeto defaultParam para almacenar la configuración variable y use const para definir la configuración inmutable.
En CSS, aún necesita usar el lenguaje de preprocesamiento. . Para la configuración de todo el sitio, se define en _variables.scss.
Para un archivo CSS específico, use variables para definirlas al principio del archivo
13 Reduzca los efectos secundarios del código
1>En JS, intente no usar global. variables para comunicación en métodos; no agregue métodos a la cadena prototipo de objetos globales como Array; trate de no definir métodos y variables globales: si realmente hay muchas variables y métodos colocados globalmente, puede aprender jQuery y poner muchas variables y métodos en un objeto global Arriba; para eventos personalizados, el nombre del evento también debe tener un espacio de nombres.
2>En CSS, es muy difícil lograr que no haya efectos secundarios. Para páginas simples, un método es dividir los elementos de la página en componentes. Al escribir estilos, el selector debe usar el selector de componentes y el selector de elementos actual. Cuando los componentes se vuelven complejos, los componentes también pueden contener muchos subcomponentes. Luego el selector se hace cada vez más largo. . . Mi solución es utilizar BEM.
14. Mejorar la legibilidad del código
Nombramiento razonable de variables, métodos, etc., a través del nombre se puede saber qué hace aproximadamente.
Si es así, añade un comentario para explicarlo. Comente el código incomprensible
. Utilice números mágicos tanto como sea posible
Para HTML, elija las etiquetas adecuadas
15. p>
En primer lugar, mejora la reutilización del código, en segundo lugar, facilita la depuración y, en tercer lugar, facilita las pruebas