Especificación de desarrollo front-end (1) - convención de nomenclatura

Language 2023-07-12 18:36:01 views: null

prefacio

Todos en el equipo tienen una comprensión diferente de la especificación. Cualquier desarrollo en equipo necesita una especificación. Una especificación de código unificado definitivamente obtendrá el doble de resultados con la mitad del esfuerzo y facilitará el mantenimiento. Se realiza el siguiente resumen, en referencia a la especificación del código del equipo de aleación de Tencent .

directorio, archivo

nomenclatura del proyecto

Todo en minúsculas, separados por guiones bajos.

ejemplo:my_project_name

nombres de directorios

Consulte las reglas de nomenclatura del proyecto;

Cuando hay estructuras en plural, se debe utilizar la nomenclatura en plural.

Ejemplo: scripts, styles, images,data_models

Nomenclatura de archivos JS

Consulte las reglas de nomenclatura del proyecto.

ejemplo:account_model.js

CSS, nomenclatura de archivos SCSS

Consulte las reglas de nomenclatura del proyecto.

Ejemplo: retina_sprites.scss

Nomenclatura de archivos HTML

Consulte las reglas de nomenclatura del proyecto.

ejemplo:error_report.html

Nomenclatura de componentes VUE

La primera letra del nombre del componente está en mayúscula en mayúsculas y minúsculas y debe estar compuesta por varias palabras, a excepción de algunos componentes integrados, si es una sola palabra, agregue el logotipo V

Ejemplos: ToDoItem.vue, VTable.vue,VDetail.vue

Reponer

alloyteam团队Se recomienda usar guiones bajos para separar los nombres de proyectos estandarizados, pero en la url, usar guiones tiene ciertas ventajas, porque los motores de búsqueda como Google dividirán las palabras con guiones como palabras clave, y si son guiones bajos, entonces el conjunto se usará como una palabra clave (Baidu trata ambas situaciones por igual), por lo que si hay una necesidad de SEO, se recomienda usar guiones en el nombre del proyecto en la URL. ejemplo:my-project-name

HTML

  • La sangría usa tabulador suave (4 espacios);

  • Los nodos anidados deben estar sangrados;

  • En los atributos, use comillas dobles, no comillas simples;

  • Los nombres de atributos están todos en minúsculas, con guiones como separadores;

  • No use barras inclinadas al final de las etiquetas de cierre automático (la especificación de HTML5 dice que son opcionales);

  • No omita las etiquetas de cierre opcionales, por ejemplo: </li>y </body>;

  • Use este tipo de documento simple al comienzo de la página para habilitar el modo estándar, haciéndolo lo más consistente posible en cada navegador; aunque el tipo de documento no distingue entre mayúsculas y minúsculas, por convención, el tipo de documento está en mayúsculas;

  • atributo lang, de acuerdo con la especificación HTML5: el atributo lang debe agregarse a la etiqueta html. Esto ayudará a las herramientas de voz y de traducción, diciéndoles cómo pronunciar y traducir;

  • La codificación de caracteres, al declarar una codificación de caracteres explícita, permite que el navegador determine fácil y rápidamente el método de representación adecuado para el contenido web, generalmente especificado como 'utf-8';

  • Modo de compatibilidad con IE, use <meta>la etiqueta para especificar qué versión de IE debe usar la página para renderizar;

  • Importar CSS, JS Según la especificación de HTML5, normalmente no es necesario especificar el tipo al introducir CSS y JS, porque text/css y text/javascript son sus valores predeterminados respectivamente;

ejemplo:

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="test.css">
        <script src="test.js"></script>
        <title>Page title</title>
    </head>
    <body>
        <img src="images/company_logo.png" alt="Company">

        <h1 class="hello-world">Hello, world!</h1>
    </body>
</html>

Orden de atributo de etiqueta

  • clase
  • identificación
  • nombre
  • datos-*
  • src, para, tipo, href, valor, longitud máxima, máx., mín., patrón
  • marcador de posición, título, alt
  • aria-*, papel
  • requerido, solo lectura, deshabilitado

La clase está diseñada para componentes altamente reutilizables, por lo que debería estar en primer lugar;

id es más específico y debe usarse con moderación, así que colóquelo en segundo lugar.

ejemplo:

    <a class="..." id="..." data-modal="toggle" href="#">Example link</a>

    <input class="form-control" type="text">

    <img src="..." alt="...">

etiqueta de atributo booleano

El atributo booleano se refiere a un atributo que no necesita declarar un valor.XHTML requiere que cada atributo declare un valor, pero HTML5 no.

ejemplo:

    <input type="text" disabled>

    <input type="checkbox" value="1" checked>

    <select>
        <option value="1" selected>1</option>
    </select>

Etiquetas generadas por JS

La generación de etiquetas en archivos JS hace que el contenido sea más difícil de encontrar, más difícil de editar y peor para el rendimiento. Esta situación debe evitarse en la medida de lo posible.

Reducir el número de etiquetas.

Al escribir código HTML, es necesario evitar nodos principales redundantes;

Muchas veces, se necesita iteración y refactorización para hacer menos HTML.

    <!-- Not well -->
    <span class="avatar">
        <img src="...">
    </span>

    <!-- Better -->
    <img class="avatar" src="...">

Práctico sobre perfecto

Trate de seguir los estándares y la semántica de HTML, pero no debe hacerlo a expensas de la utilidad desperdiciada;

Siempre trate de resolver problemas con la menor complejidad y la menor cantidad de etiquetas posible.

CSS, SCSS, MENOS

  • La sangría usa tabulador suave (4 espacios);
  • Los nodos anidados deben estar sangrados;
  • Un punto y coma, se debe agregar un punto y coma al final de cada declaración de atributo;
  • espacio
    • No se requieren espacios en las siguientes situaciones:
      • después del nombre del atributo
      • Antes del separador de reglas múltiples ','
      • !importante '!' después
      • Después de '(' y antes de ')' en el valor del atributo
      • Sin espacios adicionales al final de la línea
    • Los espacios son necesarios en las siguientes situaciones:
      • antes del valor del atributo
      • Antes y después de los selectores '>', '+', '~'
      • '{'adelante
      • Antes de !importante '!'
      • @else antes y después
      • Después del ',' en el valor del atributo
      • Comentarios después de '/ ' y antes de '/'
  • nueva línea
    • Las siguientes situaciones no requieren saltos de línea:
      • '{'adelante
    • Los saltos de línea son necesarios en las siguientes situaciones:
      • Antes y después '}'
      • Cada propiedad en su propia línea
      • Después del delimitador ',' para reglas múltiples
  • nota
    • Para comentarios, use '/**/' (no use '//' en scss), consulte la escritura a la derecha para obtener más detalles;
    • La sangría es coherente con la siguiente línea de código;
    • Puede estar al final de una línea de código, separado del código por un espacio.
  • nombre
    • Los nombres de las clases usan letras minúsculas, separadas por guiones
    • id se nombra en caso de camello
    • Las variables, funciones, combinaciones y marcadores de posición en scss se nombran en camello
  • color
    • Color hexadecimal con letras minúsculas;
    • El sistema hexadecimal de color debe abreviarse tanto como sea posible.
    .element {
        position: absolute;
        top: 10px;
        left: 10px;
        .icon {
            font-size: 16px;
        }
    }

    /* not good */
    .element {
        color :red! important;
        background-color: rgba(0,0,0,.5);
    }

    /* good */
    .element {
        color: red !important;
        background-color: rgba(0, 0, 0, .5);
    }

    /* not good */
    .element ,
    .dialog{
        ...
    }

    /* good */
    .element,
    .dialog {

    }

    /* not good */
    .element>.dialog{
        ...
    }

    /* good */
    .element > .dialog{
        ...
    }

    /* not good */
    .element{
        ...
    }

    /* good */
    .element {
        ...
    }

    /* not good */
    @if{
        ...
    }@else{
        ...
    }

    /* good */
    @if {
        ...
    } @else {
        ...
    }

    /* Modal header */
    .modal-header {
        /* 50px */
        width: 50px;
        color: red; /* color red */
    }

    /* class */
    .element-content {
        ...
    }

    /* id */
    #myDialog {
        ...
    }

    /* 变量 */
    @colorBlack: #000;


    /* not good */
    .element {
        color: #ABCDEF;
        background-color: #001122;
    }

    /* good */
    .element {
        color: #abcdef;
        background-color: #012;
    }

JavaScript

  • Sangría, use tabulador suave (4 espacios);
  • La longitud de una sola línea no debe exceder los 80, pero si el editor habilita el ajuste de línea, se puede ignorar la longitud de una sola línea.
  • punto y coma
    • Se requiere un punto y coma después de las siguientes situaciones:
    • declaración de variables
    • expresión
    • devolver
    • tirar
    • romper
    • continuar
    • hacer mientras
  • Comentarios de la documentación
    • Usar cuando:
      todas las constantes, todas las funciones, todas las clases
  • Comillas, la capa más externa usa comillas simples de manera uniforme.
  • nombres de variables
    • Las variables estándar se nombran en camello (excepto las propiedades del objeto, considerando principalmente los datos devueltos por cgi)
    • 'ID' en mayúsculas en nombres de variables
    • 'URL' en mayúsculas en nombres de variables
    • 'Android' escribe en mayúscula la primera letra en el nombre de la variable
    • 'iOS' en el nombre de la variable pone en minúsculas las dos primeras letras y en mayúsculas las dos últimas letras
    • Las constantes están todas en mayúsculas y conectadas con guiones bajos
    • Constructor, primera letra mayúscula
    • Los objetos jQuery deben nombrarse comenzando con '$'
    // 文档注释
    /**
     * @func
     * @desc 一个带参数的函数
     * @param {string} a - 参数a
     * @param {number} b=1 - 参数b默认值为1
     * @param {string} c=1 - 参数c有两种支持的取值</br>1—表示x</br>2—表示xx
     * @param {object} d - 参数d为一个对象
     * @param {string} d.e - 参数d的e属性
     * @param {string} d.f - 参数d的f属性
     * @param {object[]} g - 参数g为一个对象数组
     * @param {string} g.h - 参数g数组中一项的h属性
     * @param {string} g.i - 参数g数组中一项的i属性
     * @param {string} [j] - 参数j是一个可选参数
     */
    function foo(a, b, c, d, g, j) {
    
    
        ...
    }


    // 变量命名
    var thisIsMyName;

    var goodID;

    var reportURL;

    var AndroidVersion;

    var iOSVersion;

    var MAX_COUNT = 10;

    function Person(name) {
    
    
        this.name = name;
    }

    // not good
    var body = $('body');

    // good
    var $body = $('body');
  • nulo
    • Escena aplicable:
      • Inicializa una variable a la que se le puede asignar un objeto en el futuro
      • Comparar con la variable inicializada
      • Pasar argumentos como una llamada de función con un objeto como argumento
      • como el valor de retorno de una función que devuelve un objeto
    • Escenarios no aplicables:
      • No use nulo para juzgar si hay un parámetro cuando se llama a la función
      • No comparar con variables no inicializadas
    // not good
    function test(a, b) {
    
    
        if (b === null) {
    
    
            // not mean b is not supply
            ...
        }
    }

    var a;  // 未初始化

    if (a === null) {
    
    
        ...
    }

    // good
    var a = null;

    if (a === null) {
    
    
        ...
    }
  • indefinido
    • Nunca use undefined directamente para un juicio variable;
    • Use typeof y la cadena 'undefined' para juzgar la variable.
    // not good
    if (person === undefined) {
    
    
        ...
    }

    // good
    if (typeof person === 'undefined') {
    
    
        ...
    }
  • jshint
    • usar '=', '!' en lugar de '==', '!=';
    • Debe haber una sentencia hasOwnProperty en for-in;
    • No agregue métodos en el prototipo de objetos integrados, como Array, Date;
    • No declare una variable en el código del ámbito interno, pero luego acceda a la variable con el mismo nombre en el ámbito externo;
    • Las variables no deben declararse antes de que se utilicen;
    • No use simplemente el constructor en una oración de código, recuerde asignarlo a una variable;
    • No declare variables con el mismo nombre en el mismo ámbito;
    • No agregue corchetes en algunos lugares innecesarios, por ejemplo: eliminar (ab);
    • No use variables no declaradas (las variables globales deben agregarse al atributo global del archivo .jshintrc);
    • No declare variables pero no las use;
    • No haga asignaciones donde se deban hacer comparaciones;
    • El depurador no debería aparecer en el código enviado;
    • No debe haber elementos vacíos en la matriz;
    • No declare funciones dentro de bucles;
    • No use constructores como este, por ejemplo: nueva función () { ... }, nuevo objeto;
    // good
    for (key in obj) {
    
    
        if (obj.hasOwnProperty(key)) {
    
    
            // be sure that obj[key] belongs to the object and was not inherited
            console.log(obj[key]);
        }
    }

    // not good
    delete(obj.attr);

    // good
    delete obj.attr;
  • misceláneas

    • No mezcle tabulaciones y espacios;

    • No use múltiples tabulaciones o espacios en un solo lugar;

    • Use 'LF' para saltos de línea;

    • Las referencias al contexto this solo se pueden nombrar usando uno de '_this', 'that', 'self';

    • No tenga caracteres en blanco al final de la línea;

    • Debe haber instrucciones especiales para la caída y no defecto del interruptor;

    • No se permiten bloques de código vacíos.

    function Person() {
    
    
        // not good
        var me = this;

        // good
        var _this = this;

        // good
        var that = this;

        // good
        var self = this;
    }

Supongo que te gusta

Origin blog.csdn.net/Kevin_xq/article/details/127876570
Recomendado
Clasificación
Diario
Más
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)

Code World

© 2018 codetd.com