So gestalten Sie Ihren JS-Code besser und leichter lesbar (siehe ausführliche Einführung)

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. Er analysiert mehrere Stellen und Methoden, die Aufmerksamkeit erfordern.

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 auskommentierten Codes im Code.

Überlassen Sie die Verwaltung Git. Warum sollten Sie sonst Git wollen?

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

Zeilen entsprechend umbrechen

// bad
function a() {
 const {
 state_a,
 state_b,
 state_c
 } = this.state
 this.setState({state_a: state_a * 2})
 return 'done'
}
// good
function a() {
 const {
 state_a,
 state_b,
 state_c
 } = this.state
 this.setState({state_a: state_a * 2})
 return 'done'
}

Kommentare entsprechend hinzufügen, aber nicht verrückt hinzufügen

Kommentieren Sie einen Codeabschnitt oder eine Zeile von Code, der besondere Aufmerksamkeit erfordert

Machen Sie keine verrückten Kommentare, er ist zu ausführlich, schöner Code kann für sich selbst sprechen

// bad
const a = 'a' // 这是a
const b = 'b' // 这是b
const c = 'c' // 这是c
// good
/**
 * 申明变量
 */
 const a = 'a'
 const b = 'b'
 const c = 'c'

Kategoriecode mit ähnlichem Verhalten und ähnlicher Benennung 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
}

Solange es die Semantik nicht zerstört. Als Nächstes: „Wenn Sie es speichern können, speichern Sie es.“

Denken Sie daran, dass Funktionen in js erstklassige Bürger sind.

Wenn dies jedoch der Fall ist Wird es so weit weggelassen, dass die Lesbarkeit beeinträchtigt wird, schlägt es fehl

In der Lesbarkeit Wenn Sie sich zwischen Lesbarkeit und Einfachheit entscheiden müssen, wählen Sie immer zuerst die 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)

Pfeilfunktion

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

Get der Wert des Objekts im Voraus (Schüler, die schreiben und reagieren, müssen es 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()

Verwenden Sie verschiedene Ausdrücke angemessen

// 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 = 'default'
}
// good
c = a || 'default'

Kettenaufruf-Schreibmethode

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

Lassen Sie den Code vertikal wachsen

Finden Sie diejenigen, die in der gesamten Datei besonders hervorstechen. Beim Codieren sollten Sie darüber nachdenken, 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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird hilfreich sein alle in der Zukunft.

Verwandte Artikel:

JS behält eine Ziffer bei und entfernt Nichtziffern

JS validiert die Eingabe unter Beibehaltung angegebener Dezimalstellen

JS nutzt Time-Sharing-Funktionen, um Code zu optimieren

Das obige ist der detaillierte Inhalt vonSo gestalten Sie Ihren JS-Code besser und leichter lesbar (siehe ausführliche Einführung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!