Spielen Sie mit Code | Teilen Sie praktischen Vue-Frontend-Code (3)

Fügen Sie bei Bedarf keine Kommentare hinzu (so kurz wie möglich)
Versuchen Sie bei Bedarf so detailliert wie möglich zu sein (so lange wie nötig)

3.1 Kommentare zu HTML-Dateien

3.1.1 Einzeilige Kommentare

Wird im Allgemeinen für einfache Beschreibungen verwendet, z. B. bestimmte Statusbeschreibungen, Attributbeschreibungen usw.

Vor und nach dem Kommentarinhalt steht ein Leerzeichen. Der Kommentar steht oberhalb des zu kommentierenden Codes und belegt eine eigene Zeile.

empfehlen:
```

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

Nicht empfohlen

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

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

3.1.2 Modulkommentare

Wird im Allgemeinen verwendet, um den Namen des Moduls sowie die Start- und Endpositionen des Moduls zu beschreiben.

Vor und nach dem Kommentarinhalt befindet sich ein Leerzeichen, das den Anfang und das Ende des Moduls anzeigt . Zwischen den Modulen befindet sich eine Zeile.

empfehlen:

<!-- 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 -->

Nicht empfohlen

<!-- 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 Verschachtelte Modulkommentare

Wenn innerhalb von Modulkommentaren erneut Modulkommentare auftauchen, um das Hauptmodul hervorzuheben, werden verschachtelte Module nicht mehr verwendet.

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

Stattdessen verwenden

<!-- /Comment Text -->

Kommentare werden in einer separaten Zeile am Ende des Schluss-Tags des Moduls geschrieben.

<!-- 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 Kommentare zur CSS-Datei

3.2.1 Einzeilige Kommentare

Das erste und das letzte Zeichen des Kommentarinhalts sind jeweils ein Leerzeichen, das eine separate Zeile mit einer Zeile zwischen den Zeilen einnimmt.

empfehlen:

/* Comment Text */ 
.jdc {} 

/* Comment Text */ 
.jdc {}

Nicht empfohlen:

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

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

3.2.2 Modulkommentare

Das erste und das letzte Zeichen des Kommentarinhalts sind jeweils ein Leerzeichen, das /* eine Zeile mit der Beschreibung der Modulinformationen einnimmt, mehrere horizontale Zeilentrennzeichen, die eine Zeile - belegen */ , und zwei Zeilen zwischen den Zeilen.

empfehlen:

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


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

Nicht empfohlen:

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

3.2.3 Dateikommentare

@charset Geben Sie den Seitennamen, den Autor, das Erstellungsdatum und andere Informationen unterhalb der Deklarationserklärung zur Stildateikodierung an.

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

3.3 Kommentare zu JavaScript-Dateien

3.3.1 Einzeilige Kommentare

Verwenden Sie einzeilige Kommentare //. Kommentare sollten in einer einzelnen Zeile über dem zu kommentierenden Objekt geschrieben werden und nicht nach einer Anweisung angehängt werden.

// is current tab const active = true

Nicht empfohlen:
```
const active = true // is current tab
```

Über der Kommentarzeile ist eine Leerzeile erforderlich ( es sei denn, die Kommentarzeile befindet sich am Anfang eines Blocks ), um die Lesbarkeit zu verbessern.

empfehlen:

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
}

Nicht empfohlen:

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

3.3.2 Mehrzeilige Kommentare

Verwenden Sie mehrzeilige Kommentare /** ... */statt mehrzeiliger //.

empfehlen:

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

  return element
}

Nicht empfohlen:

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

  return element
}

3.3.3 Kommentarfelder

Zur besseren Lesbarkeit ist zwischen dem Kommentarinhalt und dem Kommentarzeichen ein Leerzeichen erforderlich. eslint: spaced-comment.

empfehlen:

// is current tab
const active = true

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

  return element
}

Nicht empfohlen:

//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 Sonderzeichen

Manchmal finden wir einen möglichen Fehler, der aus bestimmten Gründen nicht behoben werden kann, oder es gibt noch einige Funktionen, die irgendwo abgeschlossen werden müssen. Zu diesem Zeitpunkt müssen wir entsprechende spezielle Markierungskommentare verwenden, um zukünftige Selbst oder Mitarbeiter zu informieren. Es gibt zwei häufig verwendete spezielle Tags:

// FIXME : Erklären Sie, wo das Problem liegt
// TODO : Erklären Sie, was noch getan werden muss oder wie das Problem gelöst werden kann

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 Kommentare zur Dokumentklasse

Dokumentationskommentare wie Funktionen, Klassen, Dateien, Ereignisse usw. verwenden alle die jsdoc-Spezifikation.

/**
 * 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 Anmerkungswerkzeuge

ESLint Es ist derzeit das beliebteste JS-Code-Inspektionstool. ESLint Es verfügt über einige annotationsbezogene Regeln, die Benutzer aktivieren können:

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