12 conseils pour écrire du code JavaScript propre et évolutif

JavaScript est né des premiers jours du Web. Il a commencé comme un langage de script et a maintenant évolué pour devenir un langage de programmation à part entière prenant en charge l'exécution côté serveur.

Les applications Web modernes s'appuient fortement sur JavaScript, en particulier les applications à page unique (SPA). Avec les frameworks émergents comme React, AngularJS et Vue.js, les applications Web sont principalement créées à l'aide de JavaScript.

La mise à l'échelle de ces applications (le front-end est équivalent au back-end) peut être assez délicate. Avec une configuration médiocre, vous finirez par rencontrer des limites et vous perdrez dans un océan de confusion. Je souhaite partager quelques conseils pour vous aider à écrire du code propre de manière efficace.

Cet article convient aux développeurs JavaScript de tout niveau de compétence. Cependant, les développeurs ayant au moins une connaissance intermédiaire de JavaScript bénéficieront le plus de ces conseils.

1. Isoler le code

La chose la plus importante que je puisse suggérer pour garder votre base de code propre et lisible est de séparer la logique spécifique par thème Bloquer (généralement une fonction). Si vous écrivez une fonction, elle ne doit avoir par défaut qu'un seul objectif et ne doit pas effectuer plusieurs opérations à la fois.

De plus, il faut éviter de provoquer des effets secondaires, ce qui signifie que dans la plupart des cas, tout ce qui est déclaré en dehors d'une fonction ne doit pas être modifié. Recevez des données dans une fonction avec des paramètres ; tout le reste ne doit pas être accessible. Si vous souhaitez obtenir quelque chose de la fonction, renvoyez une nouvelle valeur.

2. Modularité

Bien sûr, vous pouvez combiner plusieurs fonctions si elles sont utilisées de manière similaire ou si elles font des choses similaires regroupées dans un module. (et/ou cours, si vous préférez). Par exemple, si vous avez de nombreux calculs différents à effectuer, vous pouvez les diviser en étapes (fonctions) indépendantes qui peuvent être enchaînées.

Cependant, ces fonctions peuvent être déclarées dans un fichier (module). Voici un exemple JavaScript :

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

Si vous écrivez du JavaScript frontal, veillez à utiliser les exportations par défaut pour vos projets les plus importants et les exportations nommées pour les projets moins importants.

3. Préférez plusieurs paramètres à un seul paramètre d'objet

Lors de la déclaration d'une fonction, plusieurs paramètres doivent toujours être préférés, alors qu'il ne s'agit pas d'un paramètre. qui nécessite un objet :

// 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.`)
}

La raison derrière cela est que lorsque vous regardez la première ligne de la déclaration de fonction, vous savez exactement ce qui doit être transmis à la fonction.

Bien que la taille de la fonction doive être limitée (ne faire qu'un seul travail), la taille de la fonction peut augmenter. Il faudra plus de temps pour trouver les variables qui doivent être transmises dans le corps de la fonction (imbriqué dans l'objet). Parfois, il semble plus facile d'utiliser l'objet entier et de le transmettre à la fonction, mais pour faire évoluer l'application, cette configuration sera certainement utile.

À un moment donné, cela n'a plus de sens de déclarer des paramètres spécifiques. Pour moi, c'est plus de quatre ou cinq paramètres de fonction. Si votre fonction devient aussi grande, vous devez utiliser des paramètres d'objet.

La raison principale ici est que les paramètres doivent être transmis dans un ordre spécifique. S'il y a des paramètres facultatifs, vous devez passer undefined ou null. En utilisant les paramètres d'objet, vous pouvez simplement transmettre l'objet entier, où l'ordre et les valeurs non définies n'ont pas d'importance.

4. Déstructuration

La déstructuration est un bon outil introduit dans ES6. Il vous permet d'obtenir un champ spécifique d'un objet et de l'attribuer immédiatement à une variable. Vous pouvez l'utiliser avec n'importe quel type d'objet ou de module.

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

Il est logique d'importer uniquement les fonctions que vous devez utiliser dans le fichier, plutôt que l'intégralité du module, puis d'accéder à des fonctions spécifiques à partir de là. De même, la déstructuration peut également être utilisée lorsque vous êtes sûr d'avoir réellement besoin d'un objet comme argument de fonction. Cela vous donnera toujours un aperçu de ce dont vous avez besoin à l'intérieur de la fonction :

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. Utilisez les valeurs par défaut

Valeurs par défaut détruites ou même fonction de base les paramètres sont très utiles. Premièrement, ils vous donnent un exemple des valeurs que vous pouvez transmettre à la fonction. Deuxièmement, vous indiquez quelles valeurs sont requises et lesquelles ne le sont pas. En utilisant l'exemple précédent, la configuration complète de la fonction pourrait ressembler à ceci :

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',
})

Évidemment, parfois vous ne souhaiterez peut-être pas utiliser une valeur par défaut et générerez plutôt une erreur lorsqu'aucune valeur n'est transmise. Cependant, il s’agit souvent d’une astuce pratique.

6. Rareté des données

Les conseils précédents nous permettent de tirer une conclusion : ne transmettez pas de données inutiles. Là encore, cela peut signifier plus de travail lors de la configuration des fonctions, mais cela vous donnera certainement une base de code plus lisible à long terme. Savoir exactement quelles valeurs ont été utilisées à un endroit particulier est extrêmement précieux.

7. Limites de ligne et d'indentation

J'ai vu des fichiers volumineux, des fichiers très volumineux. En fait, il existe plus de 3 000 lignes de code. Il est difficile de trouver des blocs logiques dans ces fichiers.

因此，您应该将文件大小限制为一定数量的行。我倾向于将文件保存在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/

Afin de garantir la lisibilité, cet article utilise une traduction libre plutôt qu'une traduction littérale.

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!