12 Tipps zum Schreiben von sauberem und skalierbarem JavaScript-Code

JavaScript hat seinen Ursprung in den Anfängen des Webs. Es begann als Skriptsprache und hat sich mittlerweile zu einer vollwertigen Programmiersprache entwickelt, die die serverseitige Ausführung unterstützt.

Moderne Webanwendungen basieren stark auf JavaScript, insbesondere Single Page Applications (SPA). Mit neuen Frameworks wie React, AngularJS und Vue.js werden Webanwendungen hauptsächlich mit JavaScript erstellt.

Die Skalierung dieser Anwendungen (das Frontend entspricht dem Backend) kann ziemlich schwierig sein. Mit einem mittelmäßigen Setup stoßen Sie am Ende an Grenzen und verlieren sich in einem Meer der Verwirrung. Ich möchte einige Tipps geben, die Ihnen helfen, sauberen Code effizient zu schreiben.

Dieser Artikel ist für JavaScript-Entwickler aller Erfahrungsstufen geeignet. Allerdings profitieren Entwickler mit zumindest mittleren JavaScript-Kenntnissen am meisten von diesen Tipps.

1. Isolieren Sie den Code

Das Wichtigste, was ich vorschlagen kann, um Ihre Codebasis sauber und lesbar zu halten, ist die Trennung bestimmter Logikblöcke (normalerweise Funktionen) nach Themen. Wenn Sie eine Funktion schreiben, sollte diese standardmäßig nur einen Zweck haben und nicht mehrere Vorgänge gleichzeitig ausführen.

Außerdem sollten Nebenwirkungen vermieden werden, was bedeutet, dass in den meisten Fällen alles, was außerhalb einer Funktion deklariert wird, nicht geändert werden sollte. Empfangen Sie Daten in einer Funktion mit Parametern; auf alles andere sollte nicht zugegriffen werden. Wenn Sie etwas von der Funktion erhalten möchten, geben Sie einen neuen Wert zurück.

2. Modularität

Natürlich können Sie mehrere Funktionen in einem Modul (und/oder einer Klasse, wenn Sie möchten) zusammenfassen, wenn die Funktionen auf ähnliche Weise verwendet werden oder ähnliche Dinge tun. Wenn Sie beispielsweise viele verschiedene Berechnungen durchführen müssen, können Sie diese in unabhängige Schritte (Funktionen) aufteilen, die verkettet werden können.

Diese Funktionen können jedoch in einer Datei (Modul) deklariert werden. Hier ist ein JavaScript-Beispiel:

function add(a, b) {
    return a + b   
}
function subtract(a, b) {
    return a - b   
}
module.exports = {
    add,
    subtract
}
const { add, subtract } = require('./calculations')
console.log(subtract(5, add(3, 2))

Wenn Sie Front-End-JavaScript schreiben, achten Sie darauf, Standardexporte für Ihre wichtigsten Projekte und benannte Exporte für weniger wichtige Projekte zu verwenden.

3. Bevorzugen Sie mehrere Parameter gegenüber einem einzelnen Objektparameter

Bei der Deklaration einer Funktion sollten immer mehrere Parameter einem Parameter vorgezogen werden, der ein Objekt erfordert:

// GOOD
function displayUser(firstName, lastName, age) {
    console.log(`This is ${firstName} ${lastName}. She is ${age} years old.`)
}

// BAD
function displayUser(user) {
    console.log(`This is ${user.firstName} ${user.lastName}. She is ${user.age} years old.`)
}

Der Grund dafür ist: Wenn Sie sich das ansehen In der ersten Zeile einer Funktionsdeklaration wissen Sie genau, was Sie an die Funktion übergeben müssen.

Obwohl die Größe der Funktion begrenzt sein sollte (nur eine Arbeit ausführen), kann die Größe der Funktion größer werden. Es dauert länger, die Variablen zu finden, die im Funktionskörper (im Objekt verschachtelt) übergeben werden müssen. Manchmal scheint es einfacher zu sein, das gesamte Objekt zu verwenden und es an die Funktion zu übergeben, aber um die Anwendung zu skalieren, wird dieses Setup definitiv helfen.

Irgendwann macht es keinen Sinn, bestimmte Parameter zu deklarieren. Für mich sind es mehr als vier oder fünf Funktionsparameter. Wenn Ihre Funktion so groß wird, sollten Sie Objektparameter verwenden.

Der Hauptgrund hierfür ist, dass die Parameter in einer bestimmten Reihenfolge übergeben werden müssen. Wenn optionale Parameter vorhanden sind, müssen Sie undefined或null übergeben. Mithilfe von Objektparametern können Sie einfach das gesamte Objekt übergeben, wobei Reihenfolge und undefinierte Werte keine Rolle spielen.

4. Destrukturierung

Destrukturierung ist ein gutes Werkzeug, das in ES6 eingeführt wurde. Es ermöglicht Ihnen, ein bestimmtes Feld von einem Objekt abzurufen und es sofort einer Variablen zuzuweisen. Sie können es mit jeder Art von Objekt oder Modul verwenden.

// EXAMPLE FOR MODULES
const { add, subtract } = require('./calculations')

Es ​​ist sinnvoll, nur die Funktionen zu importieren, die Sie in der Datei verwenden müssen, und nicht das gesamte Modul, und dann von dort aus auf bestimmte Funktionen zuzugreifen. Ebenso kann Destrukturierung auch verwendet werden, wenn Sie sicher sind, dass Sie wirklich ein Objekt als Funktionsparameter benötigen. Dadurch erhalten Sie immer noch einen Überblick darüber, was Sie innerhalb der Funktion benötigen:

function logCountry({name, code, language, currency, population, continent}) {
    let msg = `The official language of ${name} `
    if(code) msg += `(${code}) `
    msg += `is ${language}. ${population} inhabitants pay in ${currency}.`
    if(contintent) msg += ` The country is located in ${continent}`
}

logCountry({
    name: 'Germany',
    code: 'DE',
    language 'german',
    currency: 'Euro',
    population: '82 Million',
})

logCountry({
    name: 'China',
    language 'mandarin',
    currency: 'Renminbi',
    population: '1.4 Billion',
    continent: 'Asia',
})

5, Standardeinstellungen verwenden

Destrukturierte Standardeinstellungen und sogar Basisfunktionsparameter sind sehr nützlich. Erstens geben sie Ihnen ein Beispiel für die Werte, die Sie an die Funktion übergeben können. Zweitens geben Sie an, welche Werte erforderlich sind und welche nicht. Anhand des vorherigen Beispiels könnte der vollständige Aufbau der Funktion folgendermaßen aussehen:

function logCountry({
    name = 'United States', 
    code, 
    language = 'English', 
    currency = 'USD', 
    population = '327 Million', 
    continent,
}) {
    let msg = `The official language of ${name} `
    if(code) msg += `(${code}) `
    msg += `is ${language}. ${population} inhabitants pay in ${currency}.`
    if(contintent) msg += ` The country is located in ${continent}`
}

logCountry({
    name: 'Germany',
    code: 'DE',
    language 'german',
    currency: 'Euro',
    population: '82 Million',
})


logCountry({
    name: 'China',
    language 'mandarin',
    currency: 'Renminbi',
    population: '1.4 Billion',
    continent: 'Asia',
})

Natürlich möchten Sie manchmal keinen Standardwert verwenden und stattdessen einen Fehler auslösen, wenn kein Wert übergeben wird. Dies ist jedoch oft ein praktischer Trick.

6. Datenknappheit

Die bisherigen Tipps lassen uns zu dem Schluss kommen: Geben Sie keine unnötigen Daten weiter. Auch hier bedeutet dies möglicherweise mehr Arbeit beim Einrichten von Funktionen, aber auf lange Sicht erhalten Sie auf jeden Fall eine besser lesbare Codebasis. Es ist äußerst wertvoll, genau zu wissen, welche Werte an einem bestimmten Standort verwendet wurden.

7. Zeilen- und Einzugsbeschränkungen

Ich habe große Dateien gesehen – sehr große Dateien. Tatsächlich gibt es über 3.000 Codezeilen. Es ist schwierig, logische Blöcke in diesen Dateien zu finden.

因此，您应该将文件大小限制为一定数量的行。我倾向于将文件保存在100行代码以下有时，很难分解文件，它们将增长到200-300行，在极少数情况下，最多可达400行。

超过此阈值，文件将变得混乱且难以维护。随意创建新的模块和文件夹。您的项目应该看起来像一个森林，由树（模块部分）和分支（模块和模块文件的组）组成。

相比之下，您的实际文件应该看起来像shire，到处都有一些小山（小凹痕），但所有文件都相对平坦。尽量使缩进水平保持在4以下。

8、使用更漂亮

在团队中工作需要清晰的样式指南和格式。ESLint提供了一个巨大的规则集，您可以根据需要进行自定义还有eslint--fix，它纠正了一些错误，但不是全部。

相反，我建议使用Prettier来格式化代码。这样，开发人员就不必担心代码格式化，而只需编写高质量的代码。外观将是一致的，格式自动。

9、使用有意义的变量名

理想情况下，应该根据变量的内容为其命名。下面是一些指导原则，可以帮助您声明有意义的变量名。

功能

函数通常执行某种操作。为了解释这一点，人类使用动词——例如转换或显示。最好在函数名的开头使用动词，例如convertCurrency或displayUserName。

数组

它们通常包含一个项目列表;因此，在变量名后面加上s。例如:

const students = ['Eddie', 'Julia', 'Nathan', 'Theresa']

布尔值

简单地从“是”或“必须”接近自然语言开始。你可以这样问，“那个人是老师吗?”→“是”或“不是”。“类似:

const isTeacher = true // OR false

数组函数

forEach、map、reduce、filter等都是很好的原生JavaScript函数，可以处理数组并执行一些操作。我看到很多人只是将el或element作为参数传递给回调函数。虽然这既简单又快捷，但是您也应该根据它们的值来命名它们。例如:

const cities = ['Berlin', 'San Francisco', 'Tel Aviv', 'Seoul']
cities.forEach(function(city) {
...
})

id

通常，您必须跟踪特定数据集和对象的id。当id被嵌套时，简单地将它保留为id。在这里，我喜欢在将对象返回到前端之前将MongoDB _id映射为简单的id。当从对象中提取id时，在前面加上对象的类型。例如:

const studentId = student.id
// OR
const { id: studentId } = student // destructuring with renaming

该规则的一个例外是模型中的MongoDB引用。在这里，只需在引用模型之后命名该字段。这将在填充引用文档时保持清晰：

const StudentSchema = new Schema({
    teacher: {
        type: Schema.Types.ObjectId,
        ref: 'Teacher',
        required: true,
    },
    name: String,
    ...
})

10、尽可能使用异步/等待

在可读性方面，回调是最糟糕的，尤其是在嵌套时承诺是一个很好的改进，但在我看来，async/await具有最好的可读性即使对于初学者，或者来自其他语言的人，这也会有很大帮助。但是，要确保你理解它背后的概念，不要漫不经心地到处使用它。

11、模块导入顺序

正如我们在技巧1和2中看到的，保持逻辑在正确的位置是可维护性的关键同样，如何导入不同的模块可以减少文件中的混乱。导入不同模块时，我遵循一个简单的结构：

// 3rd party packages
import React from 'react'
import styled from 'styled-components'

// Stores
import Store from '~/Store'

// reusable components
import Button from '~/components/Button'

// utility functions
import { add, subtract } from '~/utils/calculate'

// submodules
import Intro from './Intro'
import Selector from './Selector'

我在这里使用react组件作为示例，因为有更多类型的导入。你应该能够适应你的特定用例。

12、摆脱控制台

console.log是调试 - 的一种很好的方法，非常简单、快速，而且可以完成任务显然，有更复杂的工具，但我认为每个开发人员仍然在使用它。如果你忘了清理日志，你的主机最终会变得一团糟。然后有一些日志实际上要保存在代码库中；例如，警告和错误。

为了解决这个问题，出于调试的原因，您仍然可以使用console.log，但是对于持久的日志，可以使用loglevel或winston这样的库。另外，您可以使用ESLint警告控制台语句。这样你就可以轻松地在全球范围内寻找控制台…并删除这些语句。

遵循这些准则确实帮助我保持代码库的干净和可伸缩性。有什么特别有用的建议吗在评论中让我们知道你将在你的编码工作流程中包括什么，并且请分享你使用的任何其他技巧来帮助代码结构！

原文地址：https://blog.logrocket.com/12-tips-for-writing-clean-and-scalable-javascript-3ffe30abfe20/

Um die Lesbarkeit zu gewährleisten, verwendet dieser Artikel eine freie Übersetzung anstelle einer wörtlichen Übersetzung.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt von12 Tipps zum Schreiben von sauberem und skalierbarem JavaScript-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!