깔끔하고 확장 가능한 JavaScript 코드 작성을 위한 12가지 팁

JavaScript는 웹 초기부터 시작되었습니다. 이는 스크립팅 언어로 시작하여 이제는 서버측 실행을 지원하는 완전한 프로그래밍 언어로 발전했습니다.

현대 웹 애플리케이션은 JavaScript, 특히 SPA(단일 페이지 애플리케이션)에 크게 의존합니다. React, AngularJS 및 Vue.js와 같은 새로운 프레임워크를 통해 웹 애플리케이션은 대부분 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.`)
}

이 이유는 다음과 같습니다. 함수 선언의 첫 번째 줄을 보면 함수에 전달해야 할 내용을 정확히 알 수 있습니다.

함수 크기는 제한되어야 하지만(한 가지 작업만 수행) 함수 크기가 더 커질 수 있습니다. 함수 본문(객체에 중첩됨)에 전달되어야 하는 변수를 찾는 데 더 많은 시간이 걸립니다. 때로는 전체 개체를 사용하여 함수에 전달하는 것이 더 쉬워 보이지만 응용 프로그램을 확장하려면 이 설정이 확실히 도움이 될 것입니다.

어떤 시점에서는 특정 매개변수를 선언하는 것이 의미가 없게 됩니다. 나에게는 4~5개 이상의 함수 매개변수가 필요합니다. 함수가 그렇게 커지면 개체 매개변수를 사용해야 합니다.

여기서 주된 이유는 매개변수가 특정 순서로 전달되어야 하기 때문입니다. 선택적 매개변수가 있는 경우 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/

이 기사는 가독성을 보장하기 위해 직역이 아닌 무료 번역을 사용합니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 깔끔하고 확장 가능한 JavaScript 코드 작성을 위한 12가지 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!