Cómo escribir un buen JavaScript

Prefacio

En el trabajo real, a menudo deberíamos ver algún código que no tiene problemas de funcionamiento, pero que tiene un estilo de codificación y especificaciones muy deficientes, lo que a menudo hace que la gente no se atreva a seguir leyendo. incluso afectar el estado de ánimo del lector durante el día. Estos códigos no solo son difíciles de leer, sino también de mantener. Por lo general, los escriben programadores novatos que acaban de empezar a programar o programadores experimentados que llevan varios años trabajando. Por lo tanto, el propósito de este artículo es ayudar a los estudiantes de JavaScript que no han desarrollado un buen estilo de codificación y no conocen los estándares de codificación correspondientes a mejorar su imagen de codificación.

Imagen de codificación

Arriba propuse el concepto de imagen de codificación. Personalmente pienso:

Imagen de codificación = especificación de codificación de estilo de codificación

. Una buena imagen de codificación equivale a un joven bien vestido. Para los programadores, esta es la forma más directa y sencilla para que sus compañeros comprendan sus excelentes habilidades.

Echemos un vistazo a una imagen de codificación incorrecta:

//Saluda

function func(){

var age = 18, sexo='hombre';

var saludo='hola';

if(agelt;=18amp;amp;sex=='hombre'){

console.log(saludo 'niño')

}

...

}

func()

El código anterior está amontonado, carece de conocimiento de los estándares y la experiencia de lectura es muy pobre. Es insoportable mirarlo.

Veamos una buena imagen de código:

// Saluda

función greetFn() {

var edad = 18,

sexo = 'hombre',

saludo = 'hola';

if (edad lt; = 18 amp; amp; sexo === ' hombre ') {

console.log(saludo 'niño');

}

...

};< / p>

greetFn();

¿Se siente más cómodo con el código anterior?

Se puede ver que es crucial desarrollar una buena imagen de codificación, y este artículo explica principalmente la imagen de codificación basada en JavaScript, es decir, el estilo de codificación y las especificaciones de codificación basadas en JavaScript.

Entonces, ¿qué es el estilo de codificación, qué es la especificación de codificación y cuál es la diferencia entre los dos?

Estilo de codificación

En primer lugar, dado que el estilo de codificación es un estilo, no hay nada bueno o malo. Así como todos se visten de manera diferente, algunas personas se visten de manera más apropiada y otras se visten de manera más informal.

En el estilo de codificación JavaScript, también hay un estilo relativamente decente, especialmente en el desarrollo en equipo, no podemos escribir nuestro propio estilo a voluntad.

A continuación se muestran algunos estilos de codificación informales y se comparan con buenos estilos de codificación.

1. Comentarios razonables // Método de escritura no recomendado

var name = 'Laub'; //No hay espacio entre el código y los comentarios

if ( nombre) {

/*

*Sin línea en blanco antes del comentario

*Sin espacio después del asterisco

*/

}// Método de escritura recomendado

var name = 'Laub'; // Hay un espacio entre el código y los comentarios

if (nombre) {

/*

* Hay una línea en blanco antes del comentario

* Hay un espacio después del asterisco

*/

}

2. Espaciado razonable // Método de escritura no recomendado

var name='Laub' // No hay espacio entre el signo igual y ambos lados

// No hay espacio entre declaraciones if a nivel de bloque

if(name){

console.log('hello');

}// Método de escritura recomendado

var name = 'Laub'; //Hay un espacio entre el signo igual y ambos lados

//Hay un espacio entre sentencias if a nivel de bloque

if (nombre) {

console.log('hello'); Sangría razonable // Método de escritura no recomendado: sin sangría razonable

function getName() {

console.log('Laub'}/. / Método de escritura recomendado: sangría razonable

función getName() {

console.log('Laob');

}

4. Línea en blanco razonable // Método de escritura no recomendado: no hay líneas en blanco entre los bloques de funciones de código

function getName() {

var name = 'Laub';

if (nombre) {

p>

console.log('hello');

}

}// Escritura recomendada método: hay líneas en blanco entre los bloques de funciones de código

función getName() {

var name = 'Laub';

if (name) {

console.log('hello');

}

}

5. Nomenclatura razonable // Método de escritura no recomendado

var getName = 'Laub'; // Variable El prefijo del nombre es un verbo

//El nombre de la función tiene el prefijo de un sustantivo

nombre de la función() {

console.log('hello');

}// Método de escritura recomendado

var name = 'Laub' // El prefijo del nombre de la variable; es un sustantivo

// El prefijo del nombre de la función es un verbo

función getName() {

console.log('hello')

}

6. Declaración razonable // Método de escritura no recomendado: función Utilice

getName() antes de la declaración

función; getName() {

console.log('hello');

}// Método de escritura recomendado: usar la función después de la declaración

function getName() {

console.log('hello');

}

getName();

7. Final razonable // No recomendado: ninguno Utilice punto y coma al final

var name = 'Laub'

var getName = function() {

console.log('hola')

}// Método de escritura recomendado: use punto y coma al final

var name = 'Laub'

var getName = function() {

console .log('hello');

};

Lo anterior enumera principalmente 7 ejemplos de estilos de codificación más comunes para comparar. En términos de métodos de escritura recomendados y no recomendados. Hay dos métodos de escritura correctos o incorrectos, pero el método de escritura recomendado es más fácil de leer y mantener, más adecuado para el desarrollo del equipo y también es un reflejo de una buena imagen de codificación.

Estándares de codificación

Para los estándares de codificación, dado que son estándares, debemos escribirlos de acuerdo con ciertas reglas. Escribir código aleatoriamente que viole los estándares de codificación puede provocar errores de programa y posibles errores, por lo que debería ser más riguroso que el estilo de codificación, y algunas personas incluirán el estilo de codificación en los estándares de codificación.

A continuación se muestran algunos códigos de ejemplo comunes:

1. Comparar parámetros // Método de escritura no recomendado: == y != realizarán la conversión de tipos al comparar y deben evitarse en la medida de lo posible. como sea posible Utilice

var num = 123;

if (num == '123') {

console.log(num);

} else if (num != '321') {

console.log('321');

}// Método de escritura recomendado: use === y != = para comparar

var num = 123;

if (num === '123') {

console.log(num);

p>

} else if (num !== '321') {

console.log('321');

}

2 .Ajustar la declaración if // No recomendado: si la declaración no se ajusta con un número grande, pueden ocurrir errores potenciales

var num = 123;

if ( num === '123')

console.log(num); // Método de escritura recomendado: envuelve la declaración if con un número grande

var num = 123;

if (num == = '123') {

console.log(num);

}

3. Utilice eval/ / con precaución: no recomendado: debe evitarse eval, inseguro y que consume mucho rendimiento (analizado en declaraciones js una vez y ejecutado una vez)

var json = '{"name": "Laub", "func ": alert("hola")} ';

eval('(' json ')'); // Ventana emergente "hola" // Método de escritura recomendado

var json = '{"name": "Laub ", "func": alert("hello")}';

JSON.parse(json); // Error de verificación

4 Determinar el tipo // Método de escritura no recomendado: utilice typeof para determinar el objeto creado por el constructor

var str = new String('Laub'); typeof str); // 'objeto' // Método de escritura recomendado: use instancia de para determinar el objeto creado por el constructor

var str = new String('Laub'); console.log(str instanciade String); // true

5. Detectar atributos // No recomendado: use undefinido y nulo para detectar si existe una propiedad

if (obj[' nombre'] !== undefinido ) {

console.log('el atributo de nombre existe'); // Si obj.name no está definido, provocará un error de juicio

}

if (obj['nombre'] !== null) {

console.log('el atributo de nombre existe'); // Si obj.name es nulo, lo será. causar un error de juicio

}// Método de escritura recomendado: use el operador in para detectar si la propiedad del objeto existe y use el método hasOwnProperty

Detectar la existencia de atributos de objeto que no incluyen la cadena de prototipo

if ('nombre' in obj) {

console.log('nombre atributo existe');

}

if (obj.hasOwnProperty('nombre')) {

console.log('la propiedad del nombre existe');

}

Lo anterior enumera principalmente 5 ejemplos de estándares de codificación comunes. Estandarizar razonablemente su propio código puede reducir en gran medida los costos de mantenimiento innecesarios y los posibles riesgos de errores que los estudiantes de JavaScript deben tener en cuenta.

Conclusión

"Los programas están escritos para que las personas los lean, y sólo ocasionalmente son ejecutados por computadoras". Esto causará problemas innecesarios a otros y a todo el proyecto.

Se hace referencia al contenido de este artículo en el libro "Escritura de JavaScript mantenible".