12個編寫乾淨且可擴展的JavaScript程式碼的小技巧

JavaScript起源於早期的網路。它最初是一種腳本語言，現在已經發展成為支援伺服器端執行的完全成熟的程式語言。

現代網路應用程式嚴重依賴JavaScript，尤其是單頁應用程式（SPA）。借助React，AngularJS和Vue.js等新興框架，Web應用程式主要使用JavaScript建構。

擴展這些應用程式(前端相當於後端)可能相當棘手。使用一個平庸的設置，您最終將遇到限制並迷失在混亂的海洋中。我想分享一些小技巧，幫助你以一種有效的方式編寫乾淨的程式碼。

本文適用於任何技能等級的JavaScript開發人員。但是，至少具有JavaScript中級知識的開發人員將從這些技巧中受益最大。

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

這背後的原因是，當您查看函數宣告的第一行時，您確切地知道需要傳遞給函數的內容。

儘管函數的大小應該是有限的(只做一項工作)，但是函數的大小可能會變大。在函數體中尋找需要傳遞的變數(嵌套在物件中)將花費更多的時間。有時似乎更容易使用整個物件並將其傳遞給函數，但要擴展應用程序，這種設定肯定會有所幫助。

在某種程度上，宣告特定的參數是沒有意義的。對我來說，它超過了四到五個函數參數。如果你的函數變得那麼大，你應該使用物件參數。

這裡的主要原因是參數需要以特定的順序傳遞。如果有可選參數，則需要傳遞undefined或null。使用對象參數，您可以簡單地傳遞整個對象，其中順序和未定義的值並不重要。

4、Destructuring

Destructuring是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 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/

為了保證的可讀性，本文採用意譯而非直譯。

更多程式相關知識，請造訪：程式設計入門！ ！

以上是12個編寫乾淨且可擴展的JavaScript程式碼的小技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！