如何编写干净且可扩展的JavaScript代码

这篇文章将为大家详细讲解有关如何编写干净且可扩展的JavaScript代码，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联公司是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发，网站制作，网站设计，网站模板，微信公众号开发，软件开发，微信小程序，十载建站对餐厅设计等多个行业，拥有丰富建站经验。

JavaScript起源于早期的网络。 它最初是一种脚本语言，现在已经发展成为支持服务器端执行的完全成熟的编程语言。

现代Web应用程序严重依赖JavaScript，尤其是单页应用程序（SPA）。 借助React，AngularJS和Vue.js等新兴框架，Web应用程序主要使用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警告控制台语句。这样你就可以轻松地在全球范围内寻找控制台…并删除这些语句。

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

关于如何编写干净且可扩展的JavaScript代码就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。