So gestalten Sie Ihren JS-Code besser aussehend und leichter lesbar

So gestalten Sie Ihren JS-Code besser aussehend und leichter lesbar_Grundkenntnisse

韦小宝

Freigeben： 2017-12-04 13:53:44

Original

1398 Leute haben es durchsucht

Dieser Artikel stellt den meisten JS-Programmierern vor allem vor, wie sie den von ihnen geschriebenen JS-Code schön und leicht lesbar machen können. Außerdem werden verschiedene Stellen und Methoden analysiert, die Aufmerksamkeit erfordern. Wenn Sie gerade erst anfangen JS, sollten Studierende einen Blick darauf werfen und gemeinsam lernen.

Wenn der Code, den Sie als JS-Programmierer schreiben, gut aussieht und leicht zu lesen ist, wird er nicht nur für Sie gut aussehen, sondern auch die Übergabe reibungsloser gestalten, wenn ein anderer Programmierer übernimmt.

Lassen Sie keine großen Abschnitte des kommentierten Codes im Code

Überlassen Sie die Verwaltung Git, sonst warum sollten Sie Git wollen?

// bad

// function add() {
//  const a = b + c
//  return a
// }

function add() {
 return a + 1000
}

// good
function add() {
 return a + 1000
}

Nach dem Login kopieren

Zeilen entsprechend umbrechen

// bad
function a() {
 const {
  state_a,
  state_b,
  state_c
 } = this.state
 this.setState({state_a: state_a * 2})
 return &#39;done&#39;
}

// good
function a() {
 const {
  state_a,
  state_b,
  state_c
 } = this.state

 this.setState({state_a: state_a * 2})

 return &#39;done&#39;
}

Nach dem Login kopieren

Fügen Sie Kommentare angemessen hinzu, aber fügen Sie keine Kommentare wie verrückt hinzu

Kommentieren Sie einen Codeabschnitt oder eine Codezeile, die besondere Aufmerksamkeit erfordert

Don' Ich mache keine verrückten Kommentare, es ist zu ausführlich und schön. Der Code kann für sich selbst sprechen

// bad
const a = &#39;a&#39; // 这是a
const b = &#39;b&#39; // 这是b
const c = &#39;c&#39; // 这是c

// good
/**
 * 申明变量
 */
 const a = &#39;a&#39;
 const b = &#39;b&#39;
 const c = &#39;c&#39;

Nach dem Login kopieren

Kategoriecodes mit ähnlichen Verhaltensweisen und Namen zusammen

// bad
function handleClick(arr) {
 const a = 1

 arr.map(e => e + a)

 const b = 2

 return arr.length + b
}

// good
function handleClick(arr) {
 const a = 1
 const b = 2

 arr.map(e => e + a)

 return arr.length + b
}

Nach dem Login kopieren

Ohne die Semantik zu zerstören, „speichere, was du kannst, speichere“

Behalte Bedenken Sie, dass eine Funktion in js auf Bürger wartet

Wenn sie jedoch so weit weggelassen wird, dass die Lesbarkeit beeinträchtigt wird, ist sie ein Fehler

Wenn Sie Wählen Sie zwischen Lesbarkeit und Einfachheit. Wählen Sie immer zuerst Lesbarkeit

function add(a) {
 return a + 1
}

function doSomething() {

}

// bad
arr.map(a => {
 return add(a)
})

setTimeout(() => {
 doSomething()
}, 1000)

// good
arr.map(add)

setTimeout(doSomething, 1000)

Nach dem Login kopieren

Pfeilfunktionen

// bad
const a = (v) => {
 return v + 1
}

// good
const a = v => v + 1


// bad
const b = (v, i) => {
 return {
  v,
  i
 }
}

// good
const b = (v, i) => ({v, i})


// bad
const c = () => {
 return (dispatch) => {
  // doSomething
 }
}

// good
const c = () => dispatch => {
 // doSomething
}

Nach dem Login kopieren

Ermitteln Sie den Wert des Objekts im Voraus (Schüler, die schreiben, müssen reagieren, müssen verstehen)

// bad
const a = this.props.prop_a + this.props.prop_b

this.props.fun()

// good
const {
 prop_a,
 prop_b,
 fun
} = this.props

const a = prop_a + prop_b

fun()

Nach dem Login kopieren

Vernünftige Verwendung verschiedener Ausdrücke

// bad
if (cb) {
 cb()
}

// good
cb && cb()


// bad
if (a) {
 return b
} else {
 return c
}

// good
return a ? b : c


// bad
if (a) {
 c = a
} else {
 c = &#39;default&#39;
}

// good
c = a || &#39;default&#39;

Nach dem Login kopieren

Methode zum Schreiben von Kettenaufrufen

// bad
fetch(url).then(res => {
 return res.json()
}).then(() => {
 // doSomething
}).catch(e => {

})

// good
fetch(url)
 .then(res => {
  return res.json()
 })
 .then(() => {
  // doSomething
 })
 .catch(e => {

 })

Nach dem Login kopieren

Halten Sie den Code vertikal

Suchen Sie diejenigen, die in der gesamten Datei besonders hervorstechen. Wenn Sie den Code eingeben, sollten Sie erwägen, sie umzubrechen

// bad
return handleClick(type, key, ref, self, source, props)

// good
return handleClick(
 type,
 key,
 ref,
 self,
 source,
 props
)

// bad
const a = this.props.prop_a === &#39;hello&#39; ? <di>world</p> : null

// good
const a = this.props.prop_a === &#39;hello&#39;
 ? <di>world</p>
 : null

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für Studenten hilfreich sein, die gerade erst mit js beginnen.

Verwandte Empfehlungen:

Web-Front-End-Codespezifikationen

JavaScript-Code-Spezifikationen und Leistungsveredelung

Javascript-Code-Spezifikationen Zusammenfassung der PHP-Code-Spezifikationen

Das obige ist der detaillierte Inhalt vonSo gestalten Sie Ihren JS-Code besser aussehend und leichter lesbar_Grundkenntnisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!