Juegue con código | Comparta algunos códigos prácticos de interfaz de usuario de Vue (3)

Hay un carácter de espacio antes y después del contenido del comentario. El comentario se encuentra encima del código a comentar y ocupa una línea separada.

recomendar:
```

<div>...</div>
```

No recomendado

<div>...</div><!-- Comment Text -->

<div><!-- Comment Text -->
  ...
</div>

3.1.2 Comentarios del módulo

Generalmente se utiliza para describir el nombre del módulo y las posiciones inicial y final del módulo.

Hay un carácter de espacio antes y después del contenido del comentario, que indica el comienzo y el final del módulo. Hay una línea entre los módulos.

recomendar:

<!-- S Comment Text A -->	
<div class="mod_a">
  ...
</div>
<!-- E Comment Text A -->
	
<!-- S Comment Text B -->	
<div class="mod_b">
  ...
</div>
<!-- E Comment Text B -->

No recomendado

<!-- S Comment Text A -->
<div class="mod_a">
  ...
</div>
<!-- E Comment Text A -->
<!-- S Comment Text B -->	
<div class="mod_b">
  ...
</div>
<!-- E Comment Text B -->

3.1.3 Comentarios de módulo anidados

Cuando los comentarios del módulo aparecen nuevamente dentro de los comentarios del módulo, para resaltar el módulo principal, los módulos anidados ya no se utilizan.

<!-- S Comment Text -->
<!-- E Comment Text -->

En lugar de usar

<!-- /Comment Text -->

Los comentarios se escriben en una línea separada en la parte inferior de la etiqueta de cierre del módulo.

<!-- S Comment Text A -->
<div class="mod_a">
		
    <div class="mod_b">
        ...
    </div>
    <!-- /mod_b -->
    	
    <div class="mod_c">
    	...
    </div>
    <!-- /mod_c -->
		
</div>
<!-- E Comment Text A -->

3.2 comentarios de archivos CSS

3.2.1 Comentarios de una sola línea

El primer carácter y el último carácter del contenido del comentario son espacios y ocupan una línea separada, con una línea entre líneas.

recomendar:

/* Comment Text */ 
.jdc {} 

/* Comment Text */ 
.jdc {}

No recomendado:

/*Comment Text*/
.jdc {
  display: block;
}

.jdc {
  display: block;/*Comment Text*/
}

3.2.2 Comentarios del módulo

El primer y el último carácter del contenido del comentario son espacios, /* ocupan una línea con la descripción de la información del módulo, múltiples separadores de líneas horizontales - ocupan */ una línea y dos líneas entre líneas.

recomendar:

/* Module A
---------------------------------------------------------------- */
.mod_a {}


/* Module B
---------------------------------------------------------------- */
.mod_b {}

No recomendado:

/* Module A ---------------------------------------------------- */
.mod_a {}
/* Module B ---------------------------------------------------- */
.mod_b {}

3.2.3 Comentarios de archivo

@charset Indique el nombre de la página, el autor, la fecha de creación y otra información debajo de la declaración de codificación del archivo de estilo .

@charset "UTF-8";
/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */

3.3 comentarios de archivos JavaScript

3.3.1 Comentarios de una sola línea

Utilice comentarios de una sola línea //. Los comentarios deben escribirse en una sola línea encima del objeto que se comenta y no deben agregarse después de una declaración.

// is current tab const active = true

No recomendado:
```
const active = true // is current tab
```

Se requiere una línea en blanco encima de la línea de comentario ( a menos que la línea de comentario esté en la parte superior de un bloque ) para aumentar la legibilidad.

recomendar:

function getType () {  
  console.log('fetching type...')
  
  // set the default type to 'no type'
  const type = this.type || 'no type'
  return type
}

// 注释行上面是一个块的顶部时不需要空行
function getType () {  
  // set the default type to 'no type'
  const type = this.type || 'no type'			
  return type
}

No recomendado:

function getType () {  
  console.log('fetching type...')
  // set the default type to 'no type'
  const type = this.type || 'no type'
  return type
}

3.3.2 Comentarios de varias líneas

Utilice comentarios de varias líneas /** ... */en lugar de comentarios de varias líneas //.

recomendar:

/**
 * make() returns a new element
 * based on the passed-in tag name
 */
function make (tag) {
  // ...

  return element
}

No recomendado:

// make() returns a new element
// based on the passed in tag name
function make (tag) {
  // ...

  return element
}

3.3.3 Espacios para comentarios

Se requiere un espacio entre el contenido del comentario y el carácter del comentario para aumentar la legibilidad. eslint: spaced-comment.

recomendar:

// is current tab
const active = true

/**
 * make() returns a new element
 * based on the passed-in tag name
 */
function make(tag) {  
  // ...

  return element
}

No recomendado:

//is current tab
const active = true

/**
 *make() returns a new element
 *based on the passed-in tag name
 */
function make(tag) {  
  // ...

  return element
}

3.3.4 Marcas especiales

A veces encontramos un posible error que no se puede solucionar por alguna razón, o todavía hay algunas funciones que deben completarse en alguna parte. En este momento, debemos utilizar los comentarios de marca especiales correspondientes para informar a futuros yo o colaboradores. Hay dos etiquetas especiales de uso común:

// FIXME : Explique cuál es el problema
// TODO : Explique qué más hay que hacer o la solución al problema.

class Calculator extends Abacus {
  constructor () {
    super ()

      // FIXME: shouldn’t use a global here
      total = 0

      // TODO: total should be configurable by an options param
      this.total = 0
  }
}

3.3.5 Comentarios de clase de documento

Los comentarios de documentación, como funciones, clases, archivos, eventos, etc., utilizan la especificación jsdoc.

/**
 * Book类，代表一个书本.
 * @constructor
 * @param {string} title - 书本的标题.
 * @param {string} author - 书本的作者.
 */
function Book (title, author) {
  this.title = title
  this.author = author
}

Book.prototype = {
  /**
   * 获取书本的标题
   * @returns {string|*}
   */
  getTitle: function () {
    return this.title
  },
  /**
   * 设置书本的页数
   * @param pageNum {number} 页数
   */
  setPageNum: function (pageNum) {
    this.pageNum=pageNum
  }
}

3.3.6 Herramientas de anotación

ESLint Es la herramienta de inspección de código JS más popular en este momento y ESLint tiene algunas reglas relacionadas con las anotaciones que los usuarios pueden elegir activar:

valid-jsdoc
require-jsdoc
no-warning-comments
capitalized-comments
line-comment-position
lines-around-comment
multiline-comment-style
no-inline-comments
spaced-comment