Heim > Artikel > Web-Frontend > 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 === 'hello' ? <di>world</p> : null // good const a = this.props.prop_a === 'hello' ? <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!