Especificación
Este es el estándar de escritura de código seguido y acordado por el equipo de desarrollo front-end, cuyo objetivo es mejorar la estandarización y la mantenibilidad del código.
Principios básicos
Cumplir con los estándares web, HTML semántico, separación de estructura, rendimiento y comportamiento, y excelente compatibilidad. En términos de rendimiento de la página, se requiere que el código sea conciso, claro y ordenado, para reducir al máximo la carga del servidor y garantizar la calidad. velocidad de análisis más rápida.
especificación general
1. Ignore (omita) el protocolo: como fondo: url(http://www.google.com/images/example); debe escribir fondo: url(//www.google.com/images/example); facilitar el cambio http con el protocolo https a menos que se deba utilizar un determinado protocolo
2. Utilice IDE para lograr una sangría de nivel claro al escribir. La tecla de tabulación se reemplaza por cuatro espacios.
Debido a que las herramientas de edición de diferentes sistemas interpretan las pestañas de manera diferente, la tecla de tabulación en Windows ocupa cuatro espacios, mientras que en Linux ocupa ocho espacios (a menos que usted mismo establezca la ocupación de la tecla de tabulación. longitud de posición).
Por ejemplo, texto sublime, puede configurar la tecla de tabulación en esta herramienta.
3. Utilice minúsculas para los atributos de las etiquetas.
4. No dejes espacios al final para evitar diferencias.
5. Utilice UTF-8 (sin BOM) y agregue <meta charset="utf-8″> al documento
6. Utilice ".js" minúscula para nombrar archivos y recomiende "-" en lugar de "_"
7.TODO(contacto) y TODO: elemento de acción, no use @@
Especificación de refinamiento HTML
1. Especificaciones para usar html5 <!DOCTYPE html>
2. El formato predeterminado de la etiqueta <img> es: <img src="xxx.png" alt="default text" /> para evitar el problema de src=""
3. Formato predeterminado de la etiqueta <a>: <a href="###" title="Nombre del enlace">xxx</> Nota: target="_blank" se determina según las necesidades
4. La etiqueta <a> reserva marcadores de posición de enlace usando ###, consulte: un problema de marcador de posición de etiqueta
5. Al escribir la dirección del enlace se debe evitar la redirección, por ejemplo: href="http://itaolun.com/", es decir, se debe agregar "/" después de la dirección URL.
6. Todas las etiquetas deben cerrarse de acuerdo con los estándares XHTML.
7. Utilice siempre la misma forma de escritura de la barra al final de la etiqueta: <br /> <hr /> Preste atención al espacio entre
8. Evite el uso de etiquetas obsoletas, como: <b> <u> <i> y reemplácelas con <strong> <em>, etc.
9. Utilice data-xxx para agregar datos personalizados, como: <input data-xxx="yyy"/>
10. Evite el uso de style="xxx:xxx;" en hojas de estilo en línea utilizando entidades de símbolos HTML de referencia.
11. Se deben agregar etiquetas a los elementos del formulario descriptivo (entrada, área de texto), como <p>Nombre: <input type="text" id="name" name="name" /></p> debe escribirse como : < p><label for=”name”>Nombre: </label><input type=”text” id=”name” /></p>
Especificación de refinamiento de CSS
1. Agregue ";" después de cada atributo de estilo
Conveniente herramienta de compresión "segmentación de oraciones".
2. Denominación de clases, utilice "-" [conector de signo menos] para separar las letras de la clase:
Separar con "-" es más claro que usar camel case.
Línea de producto-módulo-producto-submódulo, también puede utilizar este método al nombrar
ID: Nomenclatura CamelCase como:
nombre topBoxList pie de páginaCopyright
3. Para el uso de los espacios se aplicarán las siguientes reglas:
.hotel-contenido {
peso de fuente: negrita;
} Debe haber un espacio antes del selector y {. El nombre del atributo debe tener un espacio después: El nombre del atributo debe tener un espacio después: Una razón para agregar espacios antes (prohibido) es la estética. En segundo lugar, hay un error en IE 6. Pica el bicho.
4. (Recomendado) Orden de escritura de los atributos, por ejemplo:
.hotel-contenido {
/* posición*/
mostrar: bloquear;
posición: absoluta;
izquierda: 0;
arriba: 0;
/* Modelo de caja */
ancho: 50 píxeles;
altura: 50 píxeles;
margen: 10px;
borde: 1px negro sólido;
/ *otro* /
color: #efefef;
}En relación con el posicionamiento, los más comunes incluyen: posición de visualización flotante superior izquierda, etc. Relacionados con el modelo de caja, los más comunes incluyen: ancho, alto, margen, relleno, borde y otros atributos.
Escribir en este orden puede mejorar el rendimiento de la representación DOM del navegador. Por ejemplo, si el ancho y el alto de la imagen en la página web no están configurados, antes de cargar la imagen, el espacio que ocupa es 0, pero después. cargado, el espacio 0 se abre repentinamente, lo que hará que los elementos debajo de él se reorganicen y representen, lo que provocará un repintado y un reflujo. Cuando escribimos CSS, primero ponemos la posición de los elementos. Primero, le informamos al navegador si el elemento está dentro o fuera del flujo de texto, y dónde se encuentra en la página. Luego, le informamos su ancho, alto. borde, etc. Estos atributos que ocupan espacio y otros atributos se representan dentro de esta área fija. Eso es más o menos lo que significa ~.
Artículos recomendados:
Resultados de la encuesta: ¿Cómo ordenas tus propiedades CSS?
http://www.mozilla.org/css/base/content.css
5. (Recomendado) Al escribir estilos para una estructura HTML específica, use nombre de elemento + nombre de clase
/* Todos los navegadores están escritos para ul*/
ul.nav {
...
} ".a div" y ".a div.b", ¿por qué este último es mejor? Si las necesidades cambian y se agrega un div adicional bajo ".a", ¿el estilo inicial afectará los divs posteriores?
6. (No recomendado) Usar filtro, es decir, (Prohibido) usar expresión
El problema principal aquí es la eficiencia. Debes prestarle especial atención y usar menos cosas que quemen la CPU.
7. Los comentarios CSS están representados por "/* */". Cuando se comenta en una sola línea, el objeto anotado y los caracteres de comentario anteriores y siguientes conservan un espacio y ocupan una línea separada cuando se comentan en varias líneas, el comentario inicial; El carácter y el carácter del comentario final ocupan una línea cada uno. Por ejemplo:
/* Comentar CSS */
/*
mesa {
colapso de fronteras: colapso;
}
*/Especificación de refinamiento JS
1. Salto de línea
Cada línea de código debe tener menos de 120 caracteres. Si supera este número, puede considerar una nueva línea. Los operadores como "." o "+" deben colocarse al final de la línea. La nueva línea debe tener una sangría un nivel más antes de la nueva línea.
Si los parámetros de una función o método son largos, divídalos adecuadamente.
Están prohibidos los saltos de línea entre la palabra clave return y la expresión que se devolverá. Por ejemplo:
// Lo que realmente se devuelve no está definido, no es 1
prueba de función() {
devolver
1;
} 2. Líneas de código
Está prohibido escribir varias declaraciones breves en una línea, es decir, escribir solo una declaración en una línea.
Declaraciones como if, for, do, while, switch, case, default, break y continue ocupan su propia línea.
Todos los cuerpos de bucle y las declaraciones de ejecución de los órganos de juicio, como if, for, do, while, etc., deben estar encerrados entre "{}" y no se permite omitir llaves. Por ejemplo:
// Incorrecto si (i < 5) i += 1;
// Corregir si (i < 5) {
yo += 1
} 3. Alineación <br />El delimitador {} del bloque de código, "{" sigue la línea anterior y está separado por un espacio al frente, "}" debe ocupar una línea exclusiva y ubicarse en la misma columna, mientras que alineados a la izquierda con las declaraciones que se refieren a ellos.
El método de sangría anterior debe usarse al comienzo del cuerpo de la función, la definición de la clase y los programas en las declaraciones if, for, do, while, switch y case.
4. Espacio
Debe haber un espacio después de la palabra clave para resaltarla.
No puede haber espacios entre los nombres de funciones, nombres de métodos y el corchete izquierdo "(", por ejemplo:
// función incorrecta getInfo () {
// código
}
// Función correcta getInfo() {
// código
}Al declarar una expresión de función, no se puede dejar ningún espacio entre la función y el corchete izquierdo "(", por ejemplo:
// Usuario var incorrecto = función () {
// código
}
// Corregir var usuario = función() {
// código
} Agrega un espacio después de la coma.
Operadores de asignación, operadores de comparación, operadores aritméticos, operadores lógicos, operadores de campo de bits, como "=", "+=" ">=", "<=", "+", "*", "%", "&& ", "||" y otros operadores binarios deben ir precedidos y seguidos de espacios.
No hay espacios antes y después de operadores unarios como "!", "~", "++", "--" y "&" (operador de dirección).
No hay espacios antes y después de "." y "[]".
5. Línea en blanco
Agregue una línea en blanco después de cada declaración de clase y al final de cada definición de función.
Dentro del cuerpo de una función, las declaraciones lógicamente estrechamente relacionadas no deben estar separadas por líneas en blanco, y otros lugares deben estar separados por líneas en blanco.
6. Utilice operadores condicionales estrictos. Utilice === en lugar de == y !== en lugar de !=
7. Evite comas adicionales. Por ejemplo: var arr = [1,2,3,]
8. Todas las declaraciones deben terminar con un punto y coma, excepto function, if, switch, try y while.
9. Coloque la llave izquierda al final de la línea y la llave derecha al principio de la línea.
10. No se recomienda utilizar nuevo para construir los siguientes tipos de objetos: nuevo Número, nueva Cadena, nuevo Booleano, nuevo Objeto (reemplazar con {}), nueva Matriz (reemplazar con []).
11. Es necesario que haya un espacio después de "," entre los miembros de la matriz.
12. Está prohibido utilizar nombres de palabras clave reservadas de JavaScript en js/json, lo que fácilmente puede causar errores en IE. Palabras clave (break, case, catch, continuar, default, eliminar, do, else, finalmente, for, function, if, in,stanceof, new, return, switch, this, throw, try, typeof, var, void, while, con), palabras clave (abstracto, booleano, byte, char, clase, con st, depurador, doble, enumeración, exportar, extiende, fimal, flotador, ir a, implementa, importar, int, interfaz, largo, mativo, paquete, privado, protegido, público, corto, estático, súper, sincronizado, lanza, transitorio, volátil).
13. Se recomienda utilizar "+" como conector de nueva línea en lugar de "".
14. La información solicitada tiene prohibido utilizar descripciones en lenguaje general. Debe ser concisa y clara. Al ver la información, puede localizar inmediatamente el error. Por ejemplo, cuando solicite información al usuario para informar un error, utilice "Este usuario no existe". " en lugar de "Los datos devueltos por el fondo son incorrectos", "Tiempo de espera de red".