Especificación técnica de desarrollo front-end

Especificaciones técnicas de desarrollo front-end (especificaciones de nombres, especificaciones HTML, etiquetas semánticas...)-Javascript Document Class Resources-CSDN Download

Convenciones de nombres

nomenclatura del proyecto

Se adopta el nombre minúsculasCamelCase , y los nombres en el código no se pueden subrayar, ni se pueden concluir con un guión bajo o un signo de dólar.

manojo;

nombres de directorios

Todos los nombres son lowerCamelCase en minúsculas . Cuando hay una estructura plural, use nomenclatura plural y las abreviaturas no usen plurales.

Nombre de archivo JS , CSS , HTML , PNG

Se adopta el nombre minúsculasCamelCase , y los nombres en el código no se pueden subrayar, ni se pueden concluir con un guión bajo o un signo de dólar.

manojo;

rigor de nombres

1. Está estrictamente prohibido usar pinyin e inglés en el nombre del código, y no está permitido usar chino directamente. Descripción: Inglés correcto

La ortografía y la gramática pueden facilitar la comprensión de los lectores y evitar la ambigüedad. Tenga en cuenta que incluso los métodos de nomenclatura pinyin puros deben evitarse;

// bien

sistema de gestión de centros comerciales

// malo

mall_management-system / centro-management-sistema

// bien

scripts/estilos/componentes/imágenes/utilidades/diseños/demoStyles/

scripts de demostración / img / doc

// malo

script/estilo/demo_scripts/demo-styles/imgs/docs

// bien

renderDom.js / signup.css / index.html / companyLogo.png

// malo

renderizar-dom.js / UserManagement.html

// bien

Los nombres de uso internacional como henan / luoyang / rmb pueden considerarse como los mismos que en inglés.

// malo

DaZhePromotion [ descuento ] / getPingfenByName() [ puntuación ] / int una determinada variable = 3 2. Ponga fin a las abreviaturas completamente no estándar y evite la ignorancia del significado.

Especificación HTML

Etiquetas HTML

Las etiquetas deben ser legales, cerradas y anidadas correctamente, y los nombres de las etiquetas deben estar en minúsculas ;

No hay ningún error en la sintaxis de la etiqueta y debe ser semántica;

El atributo personalizado de la etiqueta comienza con data - , como: <a href="#" data - num='18'> </a> ;

A menos que haya funciones específicas, requisitos de componentes, etc., está prohibido usar ids para definir estilos de elementos.

Enlace

Agregue el atributo de título a la etiqueta <a> ;

El atributo href de la etiqueta <a> debe escribirse con una dirección de enlace y, si no hay ninguna, agregar javascript:alert(' ¡Estad atentos! ') ;

Saltar entre páginas que no están en este tema, use el modo de abrir una nueva ventana: target="_blank" .

tipo HTML

Se recomienda usar la declaración de tipo de documento de HTML5 : ( Se recomienda HTML en formato de texto/html . Evite usar XHTML . XHTML

Y sus atributos, como application/xhtml+xml, tienen soporte de aplicaciones y espacio de optimización muy limitados en los navegadores).

sangría

Utilice 2 espacios (un tabulador ) para la sangría ;

Los nodos anidados deben estar sangrados.

Etiquetas semánticas

// malo

La " abreviatura " de AbstractClass se denomina AbsClass ;

La condición " abreviatura " se llama condi , y tales abreviaturas aleatorias reducen seriamente la legibilidad del código.

especificar la codificación de caracteres

Modo de compatibilidad de IE

especificar la codificación de caracteres

tipo de documento en mayúsculas

// bien

<!DOCTYPEhtml>

<html>

< juego de caracteres meta = "UTF-8" />

<título> Título de la página </título>

</cabeza>

</cuerpo>

</html> Hay muchas etiquetas semánticas nuevas en HTML5 , por lo que las etiquetas semánticas se usan primero para evitar una página con etiquetas div o p .

Cotizaciones ( html , plantilla vue )

Utilice comillas dobles (" ") en lugar de comillas simples ('') .

Especificación CSS

nombre

Los nombres de ID y clase siempre usan nombres que reflejan el propósito y el uso del elemento, u otros nombres genéricos, en lugar de apariencia y oscuridad.

El nombre.

Orden de escritura de atributos

Se recomienda la siguiente secuencia:

Propiedades de posicionamiento del diseño: visualización/posición/flotante/claro/visibilidad/desbordamiento

// bien

// malo

<div>

<p></p>

</div>

Los nombres de las clases usan letras minúsculas, separadas por guiones

id se nombra en caso de camello

Las variables, funciones, mixins y marcadores de posición en scss y menos se nombran en camel case

// malo

.fw-800 {

peso de fuente : 800 ;

}

.rojo {

color : rojo ;

}

// bueno

.pesado {

peso de fuente : 800 ;

}

.importante {

color : rojo ;

} Atributos propios: ancho/alto/margen/relleno/borde/fondo

Atributos de texto: color/fuente/decoración de texto/alineación de texto/alineación vertical/espacio en blanco/palabra de ruptura

Otras propiedades ( CSS3 ): content / cursor / border-radius / box-shadow / text-shadow /

fondo: gradiente lineal …

Selector

Evite el uso de nombres de etiquetas en los selectores css Desde la perspectiva del principio de separación de estructura, rendimiento y comportamiento, debe intentar evitar HTML en css

tags, y existen problemas potenciales con los nombres de las etiquetas que aparecen en los selectores css .

Muchos desarrolladores front-end no usan selectores secundarios directos cuando escriben cadenas de selectores (Nota: la diferencia entre los selectores secundarios directos y los selectores descendientes).

A veces, esto puede causar problemas de diseño dolorosos y, a veces, puede ser costoso. Sin embargo, en cualquier caso, es muy

Mala práctica. Si no está escribiendo selectores muy generales que deben coincidir con el final del DOM , siempre debe considerar los selectores secundarios inmediatos.

Utilice atributos abreviados tanto como sea posible

.acerca de {

pantalla : bloque ;

posición : relativa ;

flotante : izquierda ;

desbordamiento : automático ;

ancho : 100px ;

altura : 100px ;

margen : 0 10px ;

relleno : 20px 0 ;

fondo : rgba ( 0 , 0 , 0 , .5 );

borde : 1px rojo sólido ;

color : #333 ;

familia de fuentes : Arial , 'Helvetica Neue' , Helvetica , sans-serif ;

alineación de texto : centro ;

cursor : puntero ;

borde-radio : 10px ;

}

// bueno

.contenido > .título {

tamaño de fuente : 2rem ;

}

// malo

.contenido .título {

tamaño de fuente : 2rem ;

}

// bueno

borde superior : 0 ;

fuente : 100% / 1.6 palatino , georgia , serif ;

relleno : 0 1em 2em ;

// malo

border-top-style : none ; cada selector y atributo en su propia línea

omitir unidades después de 0

Evite el uso de selectores de ID y selectores de etiquetas globales para evitar contaminar los estilos globales

familia de fuentes : palatino , georgia , serif ;

tamaño de fuente : 100% ;

altura de línea : 1.6 ;

parte inferior acolchada : 2em ;

relleno-izquierda : 1em ;

relleno derecho : 1em ;

acolchado superior : 0 ;

// bueno

botón {

ancho : 100px ;

altura : 50px ;

color : #fff ;

fondo : #00a0e9 ;

}

// malo

botón {

ancho : 100px ; altura : 50px ; color : #fff ; fondo : #00a0e9 ;

}

// bueno

división {

relleno inferior : 0 ;

margen : 0 ;

}

// malo

división {

relleno inferior : 0px ;

margen : 0em ;

} Escritura de prefijo privado del navegador CSS3

Los prefijos privados del navegador CSS3 son lo primero, seguidos por los prefijos estándar.

Especificación de Javascript

nombre

1. Use minúsculas camel case para nombrar lowerCamelCase . El nombre en el código no se puede subrayar, ni se puede concluir con un guión bajo o un signo de dólar.

manojo;

2. El nombre del método método debe estar en forma de verbo o de verbo + sustantivo;

// bueno

.encabezado {

relleno inferior : 0px ;

margen : 0em ;

}

// malo

#encabezado {

relleno inferior : 0px ;

margen : 0em ;

}

.acerca de {

borde-radio : 10px ;

-webkit- borde-radio : 10px ;

-moz- borde-radio : 10px ;

-o- borde-radio : 10px ;

-ms- border-radius : 10px ;

}

// bien

valor local / getHttpMessage () / inputUserId

// malo

_name / name_ / name$ 2 ) Los nombres de métodos, nombres de parámetros, variables miembro y variables locales usan el estilo lowerCamelCase

formato, debe seguir la forma joroba.

// bien

saveShopCarData / openShopCarInfoDialog

// malo

guardar / abrir / mostrar / ir 3. Por la presente explique, agregue, elimine, verifique y modifique, las siguientes 5 palabras se usan de manera uniforme para los detalles, y otras palabras no están permitidas (el propósito es unificar cada extremo) ;

`añadir/actualizar/eliminar/detallar/obtener`

Adjunto: Verbos comúnmente usados en métodos de función :

/**

obtener obtener /establecer configuración

agregar aumentar /eliminar eliminar

crear crear /destory eliminar

empezar empezar /parar parar

abrir abrir /cerrar cerrar

leer leer /escribir escribir

cargar cargar /guardar guardar

crear crear / destruir destruir

comienzo comienza / final termina

copia de seguridad copia de seguridad /restauración recuperación

importar importar /exportar exportar

dividir / fusionar _

inyectar inyección /extraer extracción

adjuntar / separar _

unión unión / separación separada

ver ver / navegar navegar

editar / modificar _

seleccionar seleccionar / marcar marcar

copiar copiar /pegar pegar

deshacer deshacer /rehacer rehacer

insertar insertar /eliminar eliminar

agregar unirse / agregar agregar

limpiar limpiar /limpiar limpiar

índice índice / ordenar

encontrar encontrar /buscar buscar ,

aumentar aumentar /disminuir disminuir

reproducir reproducir /pausar pausa

iniciar iniciar /ejecutar ejecutar

compilar compilar /ejecutar ejecución

depuración depuración / seguimiento de seguimiento

observar observar /escuchar monitorear

compilar compilar /publicar versión

entrada entrada / salida salida

codificar codificar / decodificar decodificar

cifrar cifrado /descifrar descifrar

comprimir compresión /descomprimir descompresión

empaquetar empaquetar /desempacar desempacar ,

Análisis de análisis / generación de emisiones

conectar conexión /desconectar desconexión ,

enviar enviar /recibir recibir

descargardescargar / cargarcargar _

actualizar actualizar /sincronizar sincronización

actualizar actualizar /revertir recuperación

bloquear bloquear / desbloquear desbloquear

salida salida /entrada entrada

enviar enviar / confirmar entrega

empujar empujar / tirar tirar

expandirExpandir / contraerContraer _

empezar empezar / terminar terminar

Inicio /finalización 4. Los nombres de las constantes están todos en mayúscula, y las palabras están separadas por guiones bajos, y la expresión semántica debe ser completa y clara, y el nombre no debe ser demasiado largo .

formato de código

1. Utilice 2 espacios para la sangría ;

2. Inserte una línea en blanco entre códigos con lógica diferente, semántica diferente y negocios diferentes para separarlos y mejorar la legibilidad.

Nota: En cualquier caso, no es necesario insertar varias líneas en blanco para la separación.

cadena

Utilice uniformemente comillas simples ('') en lugar de comillas dobles ("") . Esto es muy útil al crear cadenas HTML :

declaración de objeto

1. Usar valores literales para crear objetos ;

entrar para entrar /salir para salir

abortar rendirse / dejar de fumar

obsoleto obsoleto / depreciado obsoleto

recopilar colección / colección agregada

**/

// bien

constante MAX_STOCK_COUNT

// malo

constante MAX_COUNT

// bien

si ( x < y ) {

x += 10 ;

} más {

x += 1 ;

}

// bien

let str = 'foo' ;

let pruebaDiv = '<div id="prueba"></div>' ;

// malo

let str = 'foo' ;

let testDiv = "<div id='test'></div>" 2. Use literales en lugar de constructores de objetos.

soportes

Se requieren llaves después de las siguientes palabras clave (incluso si el contenido del bloque de código es solo una línea):

Juicio condicional y bucle de hasta tres capas

Si el juicio condicional se puede resolver usando operadores ternarios y operadores lógicos, no use el juicio condicional, pero recuerde no escribir una operación ternaria demasiado larga.

operador. Si supera las 3 capas, extráigalo en una función y escriba un comentario claro.

El nombre de conversión de este

Las referencias al contexto esto solo se pueden nombrar usando 'eso'

alcance del bloque

1. vamos a reemplazar var ;

// bien

dejar usuario = {};

// malo

dejar usuario = nuevo objeto ();

// bien

var usuario = {

edad : 0 ,

nombre : 1 ,

ciudad : 3

};

// malo

var usuario = nuevo Objeto ();

usuario _ edad = 0 ;

usuario _ nombre = 0 ;

usuario _ ciudad = 0 ;

if , else , for , while , do , switch , try , catch , finalmente , with

// bien

si ( condición ) {

hacer algo ();

}

// Cuando hay una sola línea de contenido después de if

condición && hacerAlgo ()

// malo

if ( condition ) doSomething (); ES6 propone dos nuevos comandos para declarar variables: let y const . Entre ellos, let puede reemplazar completamente var , porque los dos tienen la misma semántica,

Y no tiene efectos secundarios.

Por lo tanto, se recomienda no usar el comando var , sino usar el comando let en su lugar.

2. Constantes globales y seguridad de subprocesos.

Entre let y const , se recomienda usar const primero , especialmente en el entorno global No se deben establecer variables, solo se deben establecer constantes.

Se prefiere const a let por varias razones. Una es que const puede recordar a las personas que leen el programa que esta variable no debe cambiar; la otra es

const está más en línea con la idea de programación funcional.La operación no cambia el valor, sino que solo crea un nuevo valor, y esto también es propicio para futuras operaciones distribuidas;

La última razón es que el compilador de JavaScript optimizará const , por lo que usar más const ayudará a mejorar la eficiencia de ejecución del programa.

Rate, es decir , la diferencia esencial entre let y const es en realidad la diferencia en el procesamiento interno del compilador.

Hay otras dos ventajas de declarar constantes const . Una es que las personas que leen el código se darán cuenta de inmediato de que este valor no debe modificarse, y la otra es evitar cambios inadvertidos.

Errores causados por la modificación de los valores de las variables.

Todas las funciones deben establecerse como constantes.

cadena

Las cadenas estáticas siempre usan comillas simples o acentos graves, no comillas dobles. Las cadenas dinámicas usan acentos graves.

asignación de desestructuración

1. Cuando se utilizan miembros de matriz para asignar valores a variables, se prefiere la asignación de desestructuración;

2. Si el parámetro de la función es un miembro del objeto, se prefiere la asignación de desestructuración;

// malo

const a = "foobar" ;

const b = 'foo' + a + 'bar' ;

// aceptable

const c = `foobar` ;

// bien

const a = 'foobar' ;

const b = `foo${ a }bar` ;

constante arr = [ 1 , 2 , 3 , 4 ];

// malo

const primero = arr [ 0 ];

const segundo = arr [ 1 ];

// bien

const [ primero , segundo ] = arr ;

// malo

función getFullName ( usuario ) {

const nombre = usuario . primerNombre ;

const apellido = usuario .apellido 3. Si la función devuelve varios valores, se prefiere la asignación de desestructuración del objeto a la asignación de desestructuración de la matriz . Esto facilita volver a agregar más tarde

valor, y cambiar el orden en que se devuelven los valores.

objeto

1. Para los objetos definidos en una sola línea, el último miembro no termina con una coma. Objetos definidos en varias líneas, el último miembro termina con una coma;

}

// bien

función getFullName ( obj ) {

constante {

primer nombre ,

apellido

} = objeto ;

}

// mejor

función getFullName ({

primer nombre ,

apellido

}) {}

// malo

función procesarEntrada ( entrada ) {

volver [ izquierda , derecha , arriba , abajo ];

}

// bien

función procesarEntrada ( entrada ) {

volver {

izquierda ,

cierto ,

arriba ,

abajo

};

}

constante {

izquierda ,

bien

} = procesarEntrada ( entrada );

// malo

constante a = { k1 : v1 , k2 : v2 , };

constante b = {

k1 : v1 ,

k2 : v2

};

// bien

constante a = { k1 : v1 , k2 : v2 }; constante b = {

k1 : v1 ,

k2 : v2 ,

};

2. El objeto debe ser lo más estático posible, una vez definido no se pueden añadir nuevos atributos a voluntad. Si agregar atributos es inevitable, use

método Object.assign ;

// malo

constante a = {};

un . x = 3 ;

// si la remodelación es inevitable

constante a = {};

objeto _ asignar ( a , { x : 3 });

// bien

constante a = { x : nulo };

un . x = 3 ;

3. Si el nombre de atributo del objeto es dinámico, puede utilizar la definición de expresión de atributo al crear el objeto;

// malo

constante obj = {

identificación : 5 ,

nombre : 'San Francisco' ,

};

obj [ getKey ( 'habilitado' )] = verdadero ;

// bien

constante obj = {

identificación : 5 ,

nombre : 'San Francisco' ,

[ getKey ( 'habilitado' )]: verdadero ,

};

4. Además, las propiedades y métodos del objeto deben expresarse de la manera más concisa posible, para que sea fácil de describir y escribir.

var ref = 'algún valor' ;

// malo

átomo constante = {

ref .: ref .,

valor : 1 ,

addValue : función ( valor ) {

átomo de retorno . valor + valor ;

};

// bien

const átomo = { matriz

1. Utilice el operador de propagación ( ... ) para copiar la matriz;

2. Use el método Array.from para convertir un objeto similar a una matriz en una matriz.

función

1. Las funciones de ejecución inmediata se pueden escribir en forma de funciones de flecha;

2. Para aquellas ocasiones en las que se utilizan funciones anónimas como parámetros, intente utilizar funciones de flecha en su lugar. Porque esto es más conciso y une esto ;

ref .,

valor : 1 ,

agregarValor ( valor ) {

átomo de retorno . valor + valor ;

};

// malo

const len = artículos . longitud ;

const itemsCopy = [];

déjame ; _

para ( i = 0 ; i < len ; i ++ ) {

itemsCopy [ i ] = items [ i ];

}

// bien

const elementosCopiar = [ ... elementos ];

const foo = documento . querySelectorAll ( '.foo' );

const nodos = Array . de ( foo );

//La diferencia entre Array.from y el operador de propagación

El método Array.from también admite objetos tipo matriz . Los llamados objetos similares a arreglos tienen solo una característica esencial, es decir, deben tener una propiedad de longitud .

Por lo tanto , cualquier objeto con un atributo de longitud se puede convertir en una matriz a través del método Array.from y el operador de extensión no se puede convertir en este momento.

matriz _ desde ({ longitud : 3 });

// [ indefinido, indefinido, indefinido ]

En el código anterior, Array.from devuelve una matriz con tres miembros, y el valor de cada posición es indefinido . conversión de operador de propagación

No se puede obtener este objeto.

(() => {

consola _ log ( 'Bienvenido a Internet.' );

})(); // malo

[ 1 , 2 , 3 ]. mapa ( función ( x ) {

devuelve x * x ;

});

// bien

[ 1 , 2 , 3 ]. mapa (( x ) => {

devuelve x * x ;

});

// mejor

[ 1 , 2 , 3 ]. mapa ( x => x * x );

3. La función de flecha reemplaza a Function.prototype.bind , y self/_this/that no debe usarse para enlazar this ;

// malo

const self = esto ;

constboundMethod = función ( ... parámetros ) {

método de devolución . aplicar ( auto , params );

}

// aceptable

constboundMethod = método . _ atar ( esto );

// mejor

constboundMethod = ( ... params ) = > método . aplicar ( esto , parámetros );

4. Las funciones de flecha se recomiendan para funciones simples, de una línea y no reutilizables. Si el cuerpo de la función es más complicado y el número de líneas es mayor, aún debe

Use el método tradicional de escritura de funciones;

5. Todos los elementos de configuración deben concentrarse en un objeto y colocarse en el último parámetro.Los valores booleanos no se pueden usar directamente como parámetros;

// malo

función dividir ( a , b , opción = falso ) {}

// bien

función dividir ( a , b , {

opciones = falso

} = {}) {}

6. No use la variable arguments en el cuerpo de la función , use el operador resto ( ... ) en su lugar. porque el operador resto dice explícitamente que quieres

Para obtener parámetros y argumentos es un objeto similar a una matriz, y el resto del operador puede proporcionar una matriz real: 7. Use la sintaxis de valor predeterminado para establecer el valor predeterminado del parámetro de función.

Deconstrucción de mapas

Preste atención a la distinción entre Object y Map , y solo use Object cuando simule objetos de entidad del mundo real . Si solo necesita la clave: valor

La estructura de datos utiliza la estructura Map . Porque Map tiene un mecanismo transversal incorporado.

módulo

La sintaxis del módulo ES6 es la forma estándar de escribir módulos de JavaScript , insista en usar esta forma de escritura y reemplace el lenguaje CommonJS de Node.js

Ley.

1. Use import en lugar de require() ;

// malo

función concatenarTodos () {

const argumentos = Array . prototipo _ rebanada _ llamada ( argumentos );

devolver argumentos . unir ( '' );

}

// bien

función concatenarTodos ( ... argumentos ) {

devolver argumentos . unir ( '' );

}

// malo

función manejarCosas ( opciones ) {

opta = opta || {};

}

// bien

función manejarCosas ( opciones = {}) {

// ...

}

let mapa = nuevo Mapa ( arr );

for ( let key of map . keys ()) {

consola _ registro ( clave );

}

for ( let valor del mapa . valores ()) {

consola _ registro ( valor );

}

for ( let elemento del mapa . entradas ()) {

consola _ registro ( elemento [ 0 ], elemento [ 1 ]);

} // Manera de escribir CommonJS

const móduloA = require ( 'móduloA' );

const func1 = móduloA . func1 ;

const func2 = móduloA . func2 ;

// ES6 forma de escribir

importar { func1 , func2 } desde 'moduleA' ;

2. Use export para reemplazar module.exports ;

// Cómo escribir commonJS

var Reaccionar = requerir ( 'reaccionar' );

var Migas de pan = Reaccionar . crear clase ({

renderizar () {

volver < navegación / > ;

}

});

módulo _ exportaciones = Pan rallado ;

// ES6 forma de escribir

importar Reaccionar desde 'reaccionar' ;

La clase Breadcrumbs extiende React . componente {

renderizar () {

volver < navegación / > ;

}

};

exportar migas de pan predeterminadas ;

Si el módulo tiene solo un valor de salida, use export default , si el módulo tiene múltiples valores de salida, a menos que uno de los valores de salida sea especial

Importante, de lo contrario se recomienda no utilizar export default , es decir, si varios valores de salida están en una relación igual, export default y ordinario

No utilice exportar al mismo tiempo.

3. Si el módulo genera una función de forma predeterminada, la primera letra del nombre de la función debe estar en minúsculas, lo que indica que se trata de un método de herramienta;

función hacerStyleGuide () {}

exportar por defecto makeStyleGuide ;

4. Si el módulo genera un objeto de forma predeterminada, la primera letra del nombre del objeto debe estar en mayúscula, lo que indica que se trata de un objeto de valor de configuración.

const StyleGuide = {

es6 : {}

};

exportar StyleGuide predeterminado ; Especificación de escritura Vue

Orden de introducción de componentes

Al importar componentes, deben introducirse en el orden de global a local, de vue a js

Los nombres de los componentes son varias palabras

Los nombres de los componentes siempre deben constar de varias palabras, excepto el componente raíz App y cosas como <transition> , <component>

Componentes incorporados de Vue .

Al hacerlo, se evitan conflictos con elementos HTML existentes y futuros , ya que todos los nombres de elementos HTML son de una sola palabra.

archivo de componentes

Siempre que haya un sistema de compilación capaz de unir archivos, separe cada componente en archivos.

Cuando necesite editar un componente o buscar el uso de un componente, este enfoque puede ayudarlo a encontrarlo más rápidamente.

importar { mapGetters } de 'vuex' ;

importar eventBus desde '../event/eventBus.js'

import TodoLtem from '@/component/todoList.vue' // Este componente es una lista de tareas // Introducir el archivo vue

, debe llevar el sufijo .vue

importar {

getUserInfo , // Obtener información básica del usuario

getUserLoginInfo // Obtener detalles de usuario de inicio de sesión

} de '@/api/common/userInfo.js'

</script>

// bien

aplicación _ componente ( 'elemento pendiente' , {

// ...

})

exportación predeterminada {

nombre : 'TodoItem' ,

// ...

}

// malo

aplicación _ componente ( 'todo' , {

// ...

})

exportación predeterminada {

nombre : 'TodoItem' ,

// ...

} Caso de archivo componente de un solo archivo

El nombre de archivo de un componente de un solo archivo debe usar el método de nomenclatura lowerCamelCase , y la nomenclatura en el código no puede estar subrayada ni discontinua

conectar

El nombre de un componente de un solo archivo debe usar UpperCamelCase , que debe nombrarse cuando se registra el componente.

Cuando se usa en la plantilla, también se nombra con una gran joroba

// bien

componentes /

|- TodoLista . vista

| -TodoItem.vue_ _ _

// malo

aplicación _ componente ( 'TodoLista' , {

// ...

})

aplicación _ componente ( 'TodoItem' , {

// ...

})

// bien

componentes /

|- miComponente . visto

// malo

componentes /

|- mi - componente . vista

//bien

exportación predeterminada {

nombre : 'MiComponente'

}

</plantilla>

importar MyComponent desde './myComponent.vue'

exportación predeterminada {

componente :{

micomponente

}

</script> Nombre del componente básico

Los componentes básicos que aplican estilos y convenciones específicos ( es decir, componentes de presentación, sin lógica o sin estado ) deben comenzar todos con un prefijo específico.

prefijo, como Base , App o V.

Nombres de componentes estrechamente acoplados

Los componentes secundarios que están estrechamente relacionados con el componente principal deben nombrarse con el nombre del componente principal como prefijo.

Si hay muchos elementos característicos, deberían envolverse activamente

// bien

componentes /

|- Botón Base . vista

|- Tabla base . vista

|- BaseIcon . vue

componentes /

| -Botón de la aplicación . visto

| -AppTable . visto

| -Icono de aplicación . vista

componentes /

|- Botón V. vista

| -VTable . visto

| - FILA ver

// malo

componentes /

|- MiBoton . vista

|- Vista de tabla . visto

|- Icono . vista

// bien

componentes /

|- lista de tareas . vista

|- todos los elementos de la lista . vista

|- botóntodoListItem . vista

// malo

componentes /

|- TodoLista . vista

| -TodoItem.vue_ _ _

| - TodoButton.vue_ _

// bien

<MiComponente

fo = "un"

barra = "b"

baz = "c"

foo = "a" Definición de propiedad

La definición de prop debe ser lo más detallada posible

En el código enviado, la definición de prop debe ser lo más detallada posible, al menos especificando su tipo.

Las definiciones cuidadosas de accesorios tienen dos ventajas:

Describen la API del componente , por lo que el diseño y el uso del componente pueden entenderse fácilmente;

En un entorno de desarrollo, Vue le advertirá si se proporciona un apoyo malformado a un componente para ayudarlo a capturar el potencial.

fuente de error

Establezca el valor clave para v - para

Utilice siempre la clave con v - para .

barra = "b"

baz = "c"

fo = "un"

barra = "b"

baz = "c"

// malo

<MiComponente foo = "a" bar = "b" baz = "c" foo = "a" bar = " b " baz = "c" foo = "a" bar = "b"

baz = "c" foo = "a" bar = "b" baz = "c" />

// bien

accesorios : {

estado : Cadena

}

// mejor ejemplo

accesorios : {

estado : {

tipo : Cadena ,

requerido : cierto ,

validador : valor => {

volver [

'sincronizando' ,

'sincronizado' ,

'conflicto de versión' ,

'error'

]. incluye ( valor )

}

// malo

// Esto solo es aceptable para la creación de prototipos

props : [ 'status' ] siempre se debe teclear con v - for en el componente para mantener el estado del componente interno y su subárbol. Incluso para elementos, manteniendo predecible

El comportamiento de las pruebas también es una buena práctica. Está prohibido utilizar el índice del ciclo como clave del componente.

Evite usar v - if y v - for juntas (vue2.x)

Nunca utilice tanto v - if como v - for en el mismo elemento .

Generalmente tendemos a hacer esto en dos situaciones comunes:

Para filtrar elementos en la lista ( por ejemplo, v - for="user in users" v - if="user.isActive" ) . en este tipo de

En este caso, reemplace los usuarios con una propiedad calculada ( como activeUsers ) y devuelva la lista filtrada.

Para evitar mostrar listas que deberían estar ocultas ( como v - for="user in users" v - if="shouldShowUsers" ) .

En este caso, mueva v - if al elemento contenedor ( como ul , ol ) .

// bien

< ul >

< li

v - for = "todo en todos"

: clave = "todo.id"

{ { todo . text }}

< /li>

</ul> _

// malo

< ul >

< li v - for = "todo en todos" >

{ { todo . text }}

< /li>

</ul> _

< ul >

< li v - for = "(todo,idx) en todos" : tecla = "idx" >

{ { todo . text }}

< /li>

</ul> _

// bien

<ul>

{ { nombre.usuario }}

</li>

</template>

</ul>

// bad

<ul>

<li

v-for = "user in users"

v-if = "user.isActive"

:key = "user.id"

{ { user.name }} 为组件样式设置作用域

对于应用来说，样式在顶层 App 组件和布局组件中可以是全局的，但是在其它所有组件中都应该是有

作用域的。

这条规则只适用于单文件组件。你 不一定 要使用 scoped attribute 。作用域也可以通过 CSS Modules

( 一个基于 class 的，类似 BEM 的策略 ) 或者其它的库 / 约定来实现。

不管怎样，对于组件库来说，我们应该更倾向于选用基于 class 的策略，而不是 scoped attribute 。

Esto facilita la anulación de estilos internos: use nombres de clases comprensibles para los humanos , no tenga una prioridad de selector alta y no

provocará un conflicto.

Expresiones simples utilizadas en plantillas

Las plantillas de componentes solo deben contener expresiones simples y las expresiones complejas deben refactorizarse en propiedades o métodos calculados.

</li>

</ul>

// bien

< clase de botón = "botón botón-cerrar" > × </botón>

</plantilla>

< ámbito de estilo >

.botón {

borde : ninguno ;

borde-radio : 2px ;

}

.boton-cerrar {

color de fondo : rojo ;

}

</estilo>

// malo

< clase de botón = "btn btn-cerrar" > × </botón>

</plantilla>

.btn-cerrar {

color de fondo : rojo ;

}

</estilo>

// bien

<p> { { normalizedFullName }} </p> Abreviatura de comando

Las abreviaturas de las directivas ( con : para v - bind: , @ para v - on: y # para v - slot ) deben usarse siempre o nunca

usar.

</plantilla>

// la expresión compleja se ha movido a una propiedad calculada

calculado: {

nombre completo normalizado: función () {

devuelve this.fullName.split(' ').map(función (palabra) {

devolver palabra[0].toUpperCase() + palabra.slice(1)

}).unirse(' ')

}

// malo

<p>

{ { fullName.split(' ').map(función (palabra) { return palabra[0].toUpperCase() +

palabra.slice(1) }).join(' ') }}

</p>

</plantilla>

// bien

<entrada

:valor = "nuevoTodoTexto"

:placeholder = "nuevoTodoInstrucciones"

<entrada

v-bind:valor = "nuevoTodoTexto"

v-bind:placeholder = "nuevoTodoInstructions"

<entrada

@input = "enEntrada"

@focus = "enfocar"

<entrada

v-on:entrada = "enEntrada"

v-on:focus = "onFocus"

<h1> Aquí podría haber un título de página </h1>

</plantilla>

<p> Aquí hay información de contacto </p>

El orden de las etiquetas </template> es consistente

Los componentes de un solo archivo siempre deben mantener el orden de las etiquetas como

Opciones v-show y v-if

Si en tiempo de ejecución, necesita cambiar con mucha frecuencia, use v-show ; si en tiempo de ejecución, la condición rara vez cambia, use v-if .

Opciones de orden de componente / instancia

Las opciones para componentes / instancias deben tener un orden uniforme.

<h1> Aquí podría haber un título de página </h1>

</plantilla>

<p> Aquí hay información de contacto </p>

</plantilla>

// malo

<entrada

v-bind:valor = "nuevoTodoTexto"

:placeholder = "nuevoTodoInstrucciones"

<entrada

v-on:entrada = "enEntrada"

@focus = "enfocar"

<h1> Aquí podría haber un título de página </h1>

</plantilla>

<p> Aquí hay información de contacto </p>

</plantilla>

// bien

<guión> ... </guión>

// malo

dónde.

1. Percepción global ( se requiere que se perciba fuera del componente )

nombre

2. Opciones de compilación de plantillas ( cambiar la forma en que se compilan las plantillas )

opciones del compilador

3. Dependencia de la plantilla ( recursos utilizados en la plantilla )

componentes

directivas

4. Combinación ( combinar propiedad en opciones )

extiende

mezclando

proporcionar / inyectar

5. Interfaz ( interfaz del componente )

heredarAttrs

accesorios

emite

exponer

6. API de composición ( punto de entrada para usar la API de composición )

configuración

7. Estado local ( propiedad sensible local )

datos

calculado

8. Eventos ( devoluciones de llamadas activadas por eventos de respuesta )

mirar

Eventos del ciclo de vida ( en el orden en que se invocan )

antes de crear

creado

antes del monte

montado

antes de Actualizar

actualizado

activado

desactivado

antes de desmontar

desmontado

error capturado

renderRastreado

render Triggered

9. Propiedades no receptivas ( propiedades de instancia que no dependen de sistemas receptivos )

métodos

10. Representación ( descripción declarativa de la salida del componente )

El orden de los atributos de la plantilla / elemento de representación

Los atributos de los elementos ( incluidos los componentes ) deben tener un orden uniforme.

Este es el orden predeterminado que recomendamos para las opciones de componentes. Se dividen en varias categorías, por lo que puede conocer el atributo personalizado recién agregado

y dónde debe colocarse la directiva.

1. Definición ( proporcionar opciones para los componentes )

2. Representación de listas ( creando múltiples variantes del mismo elemento )

v - para

3. Condición ( si el elemento se representa / muestra )

v - si

v - si no - si

v - más

v - mostrar

v - capa

4. Modificadores de renderizado ( cambiando cómo se renderizan los elementos )

en - para

v - una vez

5. Percepción global ( se requiere que se perciba fuera del componente )

identificación

6. Atributo de unicidad ( atributo que requiere un valor único )

árbitro

llave

7. Enlace bidireccional ( combina enlaces y eventos )

v - modelo

8. Otros atributos ( todos los atributos normales, vinculados o no vinculados)

9. Evento ( escucha de eventos componente )

v - en

10. Contenido ( anular el contenido del elemento )

v - html

v - texto

Selectores de elementos en ámbito

Los selectores de elementos deben evitar scoped .

En los estilos con ámbito , los selectores de clase son preferibles a los selectores de elementos porque el uso intensivo de los selectores de elementos es lento.

// bien

< clase de botón = "btn btn-cerrar" > × </botón>

</plantilla>

< ámbito de estilo >

.btn-cerrar {

color de fondo : rojo ; especificación del enrutador Vue

Transferencia de datos de salto de página utilizando parámetros de enrutamiento

Utilice el mecanismo de carga diferida de ruta (lazy loading)

Convención de nomenclatura en el enrutador

La convención de nomenclatura de path y childrenPoints adopta la convención de nomenclatura de pequeña joroba (trate de mantener la estructura de directorios del archivo vue consistente, porque el destino

El directorio y los nombres de los archivos están todos en humpcase, lo que facilita encontrar el archivo correspondiente)

**La convención de nomenclatura de nombres adopta la convención de nomenclatura de la gran joroba y es coherente con el nombre del componente del componente . (Porque mantener vivo

característica, keep-alive se almacena en caché de acuerdo con el nombre del componente , por lo que los dos deben ser altamente consistentes)

}

</estilo>

// malo

<botón> × </botón>

</plantilla>

< ámbito de estilo >

botón {

color de fondo : rojo ;

}

</estilo>

// bien

sea id = '123' ;

esto _ $enrutador . empujar ({

nombre : 'Centro de usuario' ,

consulta : {

identificación : identificación

}

});

// bien

{

ruta : '/uploadAttachment' ,

nombre : 'Subir archivo adjunto' ,

meta : {

título : ' Subir archivo adjunto '

componente : () => importar ( '@/view/components/uploadAttachment/index.vue' )

// Carga dinámicamente la especificación del directorio del proyecto Vue

Base

Todos los nombres en el proyecto vue deben ser consistentes con los nombres del backend. Por ejemplo, permisos: privilegio de back-end, front-end independientemente del enrutador, tienda,

¡ API y demás deben usar palabras privilegiadas !

Descripción del catálogo

exportar const recargar = [{

ruta : '/recargar' ,

nombre : 'Recargar' ,

componente : Principal ,

meta : {

título : ' Carga Dinámica ' ,

icono : 'icono iconfont'

niños : [{

ruta : '/recargar/smartReloadList' ,

nombre : 'SmartReloadList' ,

componente : () =>

importar ( '@/views/reload/smartReload/smartReloadList.vue' )

}]

}

];

directorio fuente src

|-- api todas las interfaces api

|-- activos recursos estáticos, imágenes, iconos, estilos , etc.

|-- componentes componentes comunes

|-- config información de configuración

|-- constantes información constante, proyecto todo Enum, constantes globales, etc.

|-- datos datos de simulación, almacenamiento temporal

|-- interfaz simulada, almacenamiento temporal

|-- enrutamiento de enrutador, administración unificada

|-- store vuex, gestión unificada

|-- temas tema de estilo personalizado

|-- vistas ver directorio

| |-- rol rol nombre del módulo

| |-- |-- página de lista de roles roleList.vue

| |-- |-- roleAdd.vue rol nueva página

| |-- |-- página de actualización de roles roleUpdate.vue

| |-- |-- estilo de módulo de función index.less

|-- |-- carpeta de componente común del módulo de funciones de componentes

| |-- directorio api del módulo empleado empleado

directorio de activos

directorio de componentes

Los nombres de archivos y variables deben ser consistentes con el backend.

Este directorio corresponde a la interfaz API de back-end , de acuerdo con el controlador de back-end y un archivo api js . Si el proyecto es grande, puede presionar

Divida los subdirectorios según el negocio y mantenga la coherencia con el backend.

El nombre del método en la API debe ser lo más coherente posible desde el punto de vista semántico con la URL de la API de backend.

Agregue anotaciones a cada método en la API , y las anotaciones son consistentes con la documentación de swagger de back-end.

extremo posterior:

URL : EmployeeController.java

/empleado/añadir

/empleado/eliminar/{id}

/empleado/actualizar

Interfaz:

empleado.js

// agregar empleado

agregarEmpleado: (datos) => {

volver postAxios('/empleado/agregar', datos)

// Actualizar la información del empleado

actualizarEmpleado: (datos) => {

volver postAxios('/empleado/actualizar', datos)

// eliminar empleado

eliminarEmpleado: (IdEmpleado) => {

volver postAxios('/empleado/eliminar/' + id de empleado)

Los activos son recursos estáticos, que almacenan imágenes, estilos, íconos y otros recursos estáticos. El formato de nomenclatura de los recursos estáticos es

kebabCaso

|activos

|-- iconos

|-- imágenes

| |-- colordefondo.png

| |-- uploadHeader.png

|-- directorio de constantes de estilos

Este directorio debe dividirse en directorios de acuerdo con los componentes. El directorio se llama kebabCase y la regla de nomenclatura de los componentes también es kebabCase .

|componentes

|-- registro de errores

| |-- index.view

| |-- sin índice

|-- editor de rebajas

| |-- index.view

| |-- index.js

|-- kebabCase

Este directorio almacena todas las constantes del proyecto. Si las constantes se usan en vue , use el complemento vue - enum

( https://www.npmjs.com/package/vue-enum ) _

Estructura de directorios:

| constantes

|-- índice . js

|-- rol . js

|-- empleado . js

Ejemplo : empleado.js _

exportar const EMPLOYEE_STATUS = {

NORMALES : {

valor : 1 ,

descripción : ' normal '

DESHABILITADO : {

valor : 1 ,

desc : ' deshabilitado '

ELIMINADO : {

valor : 2 ,

desc : ' Eliminado '

}

};

exportación const EMPLOYEE_ACCOUNT_TYPE = {

Q Q : {

valor : 1 ,

desc : ' Inicio de sesión QQ '

WECHAT : {

valor : 2 ,

desc : ' Inicio de sesión de WeChat '

DING DING : {

valor : 3 ,

desc : ' Inicio de sesión de DingTalk '

}, directorios de enrutadores y tiendas

directorio de vistas

notas

requisitos de anotación

NOMBRE DE USUARIO : {

valor : 4 ,

desc : ' nombre de usuario contraseña inicio de sesión '

}

};

exportación predeterminada {

EMPLEADO_ESTADO ,

EMPLOYEE_ACCOUNT_TYPE

};

Estos dos directorios deben dividir el negocio y no se pueden colocar en un archivo js .

El enrutador intenta ser coherente con la estructura de las vistas .

store recomienda dividir diferentes archivos js según el negocio. Cuando el negocio es complejo, debe dividirse en diferentes módulos

El nombre debe ser coherente con el backend, el enrutador , la API , etc.

Los componentes en componentes deben usar reglas pascal-case

|-- vistas ver directorio

| |-- rol rol nombre del módulo

| | |-- página de lista de roles roleList.vue

| | |-- roleAdd.vue rol nueva página

| | |-- página de actualización de roles roleUpdate.vue

| | |-- estilo de módulo de función index.less

| | |-- carpeta de componentes comunes del módulo de función de componentes

| | | |-- componente de encabezado de rol roleHeader.vue

| | | |-- componente de cuadro emergente de rol roleModal.vue

| |-- módulo empleado empleado

| |-- BehaviorLog módulo de registro de registro de comportamiento

| |-- codeGenerator módulo generador de código organiza los lugares que deben ser comentados

otro

Trate de no manipular manualmente el DOM

Debido al uso del marco vue , intente usar el DOM de actualización basado en datos de vue en el desarrollo del proyecto e intente (no como último recurso) no

Manipule manualmente DOM , incluyendo: agregar, eliminar, modificar elementos dom , cambiar estilos, agregar eventos, etc.

Eliminar código inútil

Debido al uso de la herramienta de versión de código svn , el código inútil debe eliminarse a tiempo, por ejemplo: algunas declaraciones de consola de depuración,

depurador , código inútil para funciones obsoletas.

especificación de compromiso svn

nota

Para el código enviado a la base de código svn , cada compromiso debe completar las modificaciones realizadas por este envío. Cuando hay múltiples modificaciones, use la secuencia

pantalla de mesa

integridad del código

El código enviado a la base de código svn debe garantizar que pueda ejecutarse normalmente después de Checkout , y está prohibido mostrar un mensaje de error o advertencia en la consola.

Envíe el código, se prohíbe cargar información de configuración personal en la base de código svn para evitar conflictos con los desarrolladores conjuntos , y la baseUrl de la solicitud está prohibida en el código

Conmutación multientorno codificada de forma rígida, use la configuración del entorno del nodo para determinar qué ruta usar, debe asegurarse de que los archivos en la base del código se puedan empaquetar después de pagar

Trabaja bien en todos los entornos.

Para los comentarios de la página, el siguiente contenido debe escribirse en la parte superior de la página ()

<!--

des : la descripción de esta página debe indicar la función de esta página o componente

creador : Creador (el autor original del archivo puede escribir)

createTime : Hora de creación (puede ser escrita por el autor original del archivo)

-->

Para el método en el que la página debe modificarse debido a requisitos o errores , también se debe indicar el siguiente contenido

des : la descripción de este cambio debe indicar el motivo de este cambio

actualizador : Creador (el autor de la modificación , no el autor del archivo actual que necesita escribir)

updateTime : Hora de creación (el autor de la modificación)

Instrucciones de uso de componentes públicos

El archivo js de la interfaz en el directorio api debe anotarse para describir la función de la interfaz

El estado, la mutación, la acción, etc. en la tienda deben anotarse para describir la función del atributo.

Cuando un archivo vue presenta un componente, se debe agregar una nota para explicar el propósito del componente

Cuando un archivo vue introduce un método en la API , se debe agregar una nota para explicar el propósito del método.

Para los métodos del archivo vue , se deben agregar comentarios para cada método , y se deben agregar comentarios adicionales para el procesamiento comercial complejo en el método.

Los datos del archivo vue , nombres de atributos muy comunes, deben comentarse, por ejemplo: tableData/searchForm no necesita agregar comentarios,

scaleEffectKey necesita agregar anotaciones

1.xxx

2.xxx ignorar

//bien

servicio _ baseURL = proceso . env . VUE_APP_BASE_URL ;

//malo

servicio _ baseURL = 'http://127.0.0.1:9999' ;

// Varios tipos de archivos que no necesitan ser enviados

. DS_Tienda

node_modules

/ dist

. historia

# Archivos de registro

npm - depuración . registro *

hilado - depuración . registro *

error de hilo . registro *

pnpm - depuración . registro *

# Editor de directorios y archivos

. idea

. vscode

* . su

* . ntvs *

* . njspros

* . sln

* . sw ?

Especificación técnica de desarrollo front-end

Supongo que te gusta