クリーンでスケーラブルな JavaScript コードを記述するための 12 のヒント

JavaScript はインターネットの初期に誕生しました。スクリプト言語として始まり、現在ではサーバーサイドの実行をサポートする本格的なプログラミング言語に進化しました。

最新の Web アプリケーション、特にシングルページ アプリケーション (SPA) は JavaScript に大きく依存しています。 React、AngularJS、Vue.js などの新しいフレームワークでは、Web アプリケーションは主に JavaScript を使用して構築されます。

これらのアプリケーション (フロントエンドはバックエンドと同等) のスケーリングは、非常に難しい場合があります。平凡なセットアップでは、限界にぶつかり、混乱の海の中で迷ってしまうことになります。効率的な方法できれいなコードを書くのに役立つヒントをいくつか共有したいと思います。

この記事は、あらゆるスキル レベルの JavaScript 開発者に適しています。ただし、JavaScript について中級以上の知識を持つ開発者が、これらのヒントから最も恩恵を受けるでしょう。

1. コードを分離する

コードベースをクリーンで読みやすい状態に保つために提案できる最も重要なことは、特定のロジックをトピック ブロックごとに分離することです。 (通常は関数)。関数を作成する場合は、デフォルトで目的が 1 つだけになるようにし、複数の操作を同時に実行しないでください。

また、副作用の発生も避けるべきです。つまり、ほとんどの場合、関数の外で宣言されたものは変更すべきではありません。パラメーターを使用してデータを関数に受け取ります。他のものにはアクセスしないでください。関数から何かを取得したい場合は、新しい値を返します。

2. モジュール性

もちろん、同じような方法で使用されたり、同じようなことを実行したりする場合は、複数の関数を組み合わせてモジュールにグループ化することができます。 (および/または必要に応じてクラス)。たとえば、実行するさまざまな計算がある場合、それらを連鎖可能な独立したステップ (関数) に分割できます。

ただし、これらの関数はファイル(モジュール)内で宣言することができます。以下は 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))

フロントエンド JavaScript を作成している場合は、最も重要なプロジェクトにはデフォルトのエクスポートを使用し、重要性の低いプロジェクトには名前付きエクスポートを使用してください。

3. 単一のオブジェクト パラメータよりも複数のパラメータを優先する

関数を宣言するときは、「パラメータではない」ではなく、常に複数のパラメータを優先する必要があります。これにはオブジェクトが必要です:

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

この理由は、関数宣言の最初の行を見ると、関数に何を渡す必要があるかが正確にわかるためです。

関数のサイズは制限される必要があります (ジョブを 1 つだけ実行する) が、関数のサイズは大きくなる可能性があります。関数本体 (オブジェクト内にネストされている) で渡す必要がある変数を見つけるにはさらに時間がかかります。オブジェクト全体を使用して関数に渡す方が簡単に思える場合もありますが、アプリケーションを拡張するには、この設定が間違いなく役立ちます。

ある時点で、特定のパラメーターを宣言することが無意味になることがあります。私にとって、それは 4 つまたは 5 つの関数パラメータ以上のものです。関数がそれほど大きくなる場合は、オブジェクト パラメーターを使用する必要があります。

ここでの主な理由は、パラメーターを特定の順序で渡す必要があることです。オプションのパラメータがある場合は、unknown または null を渡す必要があります。オブジェクトパラメータを使用すると、順序や未定義の値が問題にならないオブジェクト全体を単純に渡すことができます。

4. 構造化

構造化は、ES6 で導入された優れたツールです。これにより、オブジェクトから特定のフィールドを取得し、それを変数にすぐに割り当てることができます。あらゆるタイプのオブジェクトまたはモジュールで使用できます。

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

モジュール全体ではなく、ファイル内で使用する必要がある関数のみをインポートし、そこから特定の関数にアクセスするのが合理的です。同様に、関数の引数としてオブジェクトが本当に必要であることが確実な場合にも、Destructuring を使用できます。これにより、関数内で必要なものの概要が得られます:

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、デフォルト値を使用

構造化されたデフォルト値あるいは、基本的な Function パラメータさえも非常に便利です。まず、関数に渡すことができる値の例を示し、次に、どの値が必要でどの値がそうでないかを示します。前の例を使用すると、関数の完全な設定は次のようになります。

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

明らかに、デフォルト値を使用せず、値が渡されない場合にエラーをスローしたくない場合があります。ただし、これは多くの場合便利なトリックです。

6. データ不足

これまでのヒントから、不要なデータを渡さないという結論に達しました。ここでも、これは関数を設定する際に多くの作業を意味するかもしれませんが、長期的には間違いなくより読みやすいコードベースを提供します。特定の場所でどの値が使用されたかを正確に知ることは非常に価値があります。

7. 行とインデントの制限

大きなファイル、つまり非常に大きなファイルを見たことがあります。実際、コードは 3,000 行以上あります。これらのファイル内で論理ブロックを見つけるのは困難です。

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

読みやすさを確保するため、この記事では直訳ではなく意訳を使用しています。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がクリーンでスケーラブルな JavaScript コードを記述するための 12 のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。