您的位置是:网站首页>Javascript编程Javascript编程

12个编写干净且可扩展的JavaScript代码的小技巧

少儿编程网2021-11-24 13:40:01Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介JavaScript起源于早期的网络。它最初是一种脚本语言,现在已经发展成为支持服务器端执行的完全成熟的编程语言。现代Web应用程序严重依赖JavaScript,尤其是单页应用程序(SPA)。借助React,AngularJS和Vue.js等新兴框架,Web应用程序主要使用JavaScript构建。

IAS少儿编程网-https://www.pxcodes.com

JavaScript起源于早期的网络。 它**初是一种脚本语言,现在已经发展成为支持服务器端执行的完全成熟的编程语言。IAS少儿编程网-https://www.pxcodes.com

现代Web应用程序严重依赖JavaScript,尤其是单页应用程序(SPA)。 借助React,AngularJS和Vue.js等新兴框架,Web应用程序主要使用JavaScript构建。IAS少儿编程网-https://www.pxcodes.com

扩展这些应用程序(前端相当于后端)可能相当棘手。使用一个平庸的设置,您**终将遇到限制并迷失在混乱的海洋中。我想分享一些小技巧,帮助你以一种有效的方式编写干净的代码。IAS少儿编程网-https://www.pxcodes.com

本文适用于任何技能水平的JavaScript开发人员。 但是,至少具有JavaScript中级知识的开发人员将从这些技巧中受益**大。IAS少儿编程网-https://www.pxcodes.com

1、隔离代码

我可以建议保持代码库整洁和可读的**重要的事情是按主题分开特定的逻辑块(通常是函数)。 如果编写函数,则该函数应默认为仅具有一个用途,并且不应一次执行多项操作。IAS少儿编程网-https://www.pxcodes.com

另外,应该避免引起副作用,这意味着在大多数情况下,不应该更改在函数外部声明的任何内容。将数据接收到带有参数的函数中;不应访问其他所有内容。如果希望从函数中获取某些内容,请返回新值。IAS少儿编程网-https://www.pxcodes.com

2、模块化

当然,如果这些函数以类似的方式使用或做类似的事情,您可以将多个函数分组到一个模块(和/或类,如果您愿意)中。例如,如果您有许多不同的计算要做,那么可以将它们分割成可以链接的独立步骤(函数)。IAS少儿编程网-https://www.pxcodes.com

但是,这些函数都可以在一个文件(模块)中声明。下面是JavaScript的例子:IAS少儿编程网-https://www.pxcodes.com

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,则一定要对**重要的项目使用默认导出,对次要项目使用命名的导出。IAS少儿编程网-https://www.pxcodes.com

3、与单个对象参数相比,更喜欢多个参数

声明函数时,应始终**多个参数,而不是一个需要对象的参数:IAS少儿编程网-https://www.pxcodes.com

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

这背后的原因是,当您查看函数声明的第一行时,您确切地知道需要传递给函数的内容。IAS少儿编程网-https://www.pxcodes.com

尽管函数的大小应该是有限的(只做一项工作),但是函数的大小可能会变大。在函数体中寻找需要传递的变量(嵌套在对象中)将花费更多的时间。有时似乎更容易使用整个对象并将其传递给函数,但要扩展应用程序,这种设置肯定会有所帮助。IAS少儿编程网-https://www.pxcodes.com

在某种程度上,声明特定的参数是没有意义的。对我来说,它超过了四五个函数参数。如果你的函数变得那么大,你应该使用对象参数。IAS少儿编程网-https://www.pxcodes.com

这里的主要原因是参数需要以特定的顺序传递。如果有可选参数,则需要传递undefinednull。使用对象参数,您可以简单地传递整个对象,其中顺序和未定义的值并不重要。IAS少儿编程网-https://www.pxcodes.com

4、Destructuring

Destructuring是ES6引入的一个很好的工具。它允许您从对象中获取特定字段并立即将其分配给变量。您可以将其用于任何类型的对象或模块。IAS少儿编程网-https://www.pxcodes.com

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

只导入需要在文件中使用的函数,而不是整个模块,然后从中访问特定的函数,这是有意义的。类似地,当您确定您确实需要一个对象作为函数参数时,也可以使用Destructuring。这仍将为您提供函数内部所需内容的概述:IAS少儿编程网-https://www.pxcodes.com

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、使用默认值

解构的默认值甚至基本函数参数都非常有用。首先,他们给你一个例子,说明你可以传递给函数的值其次,您可以指出哪些值是必需的,哪些不是必需的。使用前面的示例,函数的完整设置可能如下所示:IAS少儿编程网-https://www.pxcodes.com

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

显然,有时您可能不想使用默认值,而是在不传递值时抛出错误。然而,这往往是一个方便的技巧。IAS少儿编程网-https://www.pxcodes.com

6、数据稀缺

前面的提示让我们得出一个结论:不要传递不需要的数据。在这里,同样,这可能意味着在设置函数时需要做更多的工作不过,从长远来看,它肯定会给你一个更可读的代码库。准确地知道在一个特定的地点使用了哪些值是非常有价值的。IAS少儿编程网-https://www.pxcodes.com

7、线和缩进极限

我看过大文件—非常大的文件。 实际上,有超过3,000行代码。 在这些文件中很难找到逻辑块。IAS少儿编程网-https://www.pxcodes.com

因此,您应该将文件大小限制为一定数量的行。我倾向于将文件保存在100行代码以下有时,很难分解文件,它们将增长到200-300行,在极少数情况下,**多可达400行。IAS少儿编程网-https://www.pxcodes.com

超过此阈值,文件将变得混乱且难以维护。随意创建新的模块和文件夹。您的项目应该看起来像一个森林,由树(模块部分)和分支(模块和模块文件的组)组成。IAS少儿编程网-https://www.pxcodes.com

相比之下,您的实际文件应该看起来像shire,到处都有一些小山(小凹痕),但所有文件都相对平坦。尽量使缩进水平保持在4以下。IAS少儿编程网-https://www.pxcodes.com

8、使用更漂亮

在团队中工作需要清晰的样式指南和格式。ESLint提供了一个巨大的规则集,您可以根据需要进行自定义还有eslint--fix,它纠正了一些错误,但不是全部。IAS少儿编程网-https://www.pxcodes.com

相反,我建议使用Prettier来格式化代码。这样,开发人员就不必担心代码格式化,而只需编写高质量的代码。外观将是一致的,格式自动。IAS少儿编程网-https://www.pxcodes.com

9、使用有意义的变量名

理想情况下,应该根据变量的内容为其命名。下面是一些指导原则,可以帮助您声明有意义的变量名。IAS少儿编程网-https://www.pxcodes.com

功能IAS少儿编程网-https://www.pxcodes.com

函数通常执行某种操作。为了解释这一点,人类使用动词——例如转换或显示。**好在函数名的开头使用动词,例如convertCurrencydisplayUserNameIAS少儿编程网-https://www.pxcodes.com

数组IAS少儿编程网-https://www.pxcodes.com

它们通常包含一个项目列表;因此,在变量名后面加上s。例如:IAS少儿编程网-https://www.pxcodes.com

const students = ['Eddie', 'Julia', 'Nathan', 'Theresa']

布尔值IAS少儿编程网-https://www.pxcodes.com

简单地从“是”或“必须”接近自然语言开始。你可以这样问,“那个人是老师吗?”→“是”或“不是”。“类似:IAS少儿编程网-https://www.pxcodes.com

const isTeacher = true // OR false

数组函数IAS少儿编程网-https://www.pxcodes.com

forEachmapreducefilter等都是很好的原生JavaScript函数,可以处理数组并执行一些操作。我看到很多人只是将elelement作为参数传递给回调函数。虽然这既简单又快捷,但是您也应该根据它们的值来命名它们。例如:IAS少儿编程网-https://www.pxcodes.com

const cities = ['Berlin', 'San Francisco', 'Tel Aviv', 'Seoul']
cities.forEach(function(city) {
...
})

idIAS少儿编程网-https://www.pxcodes.com

通常,您必须跟踪特定数据集和对象的id。当id被嵌套时,简单地将它保留为id。在这里,我喜欢在将对象返回到前端之前将MongoDB _id映射为简单的id。当从对象中提取id时,在前面加上对象的类型。例如: IAS少儿编程网-https://www.pxcodes.com

const studentId = student.id
// OR
const { id: studentId } = student // destructuring with renaming

该规则的一个例外是模型中的MongoDB引用。在这里,只需在引用模型之后命名该字段。这将在填充引用文档时保持清晰:IAS少儿编程网-https://www.pxcodes.com

const StudentSchema = new Schema({
    teacher: {
        type: Schema.Types.ObjectId,
        ref: 'Teacher',
        required: true,
    },
    name: String,
    ...
})

10、尽可能使用异步/等待

在可读性方面,回调是**糟糕的,尤其是在嵌套时承诺是一个很好的改进,但在我看来,async/await具有**好的可读性即使对于初学者,或者来自其他语言的人,这也会有很大帮助。但是,要确保你理解它背后的概念,不要漫不经心地到处使用它。IAS少儿编程网-https://www.pxcodes.com

11、模块导入顺序

正如我们在技巧1和2中看到的,保持逻辑在正确的位置是可维护性的关键同样,如何导入不同的模块可以减少文件中的混乱。导入不同模块时,我遵循一个简单的结构:IAS少儿编程网-https://www.pxcodes.com

// 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组件作为示例,因为有更多类型的导入。你应该能够适应你的特定用例。IAS少儿编程网-https://www.pxcodes.com

12、摆脱控制台

console.log是调试 - 的一种很好的方法,非常简单、快速,而且可以完成任务显然,有更复杂的工具,但我认为每个开发人员仍然在使用它。如果你忘了清理日志,你的主机**终会变得一团糟。然后有一些日志实际上要保存在代码库中;例如,警告和错误。IAS少儿编程网-https://www.pxcodes.com

为了解决这个问题,出于调试的原因,您仍然可以使用console.log,但是对于持久的日志,可以使用loglevelwinston这样的库。另外,您可以使用ESLint警告控制台语句。这样你就可以轻松地在全球范围内寻找控制台…并删除这些语句。IAS少儿编程网-https://www.pxcodes.com

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

原文地址:https://blog.logrocket.com/12-tips-for-writing-clean-and-scalable-javascript-3ffe30abfe20/IAS少儿编程网-https://www.pxcodes.com

为了保证的可读性,本文采用意译而非直译。IAS少儿编程网-https://www.pxcodes.com

更多编程相关知识,请访问:编程入门!!

以上就是12个编写干净且可扩展的JavaScript代码的小技巧的详细内容,更多请关注少儿编程网其它相关文章!IAS少儿编程网-https://www.pxcodes.com

来源:php中文网IAS少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

12个编写干净且可扩展的JavaScript代码的小技巧

      匿名评论
    • 评论
    人参与,条评论
    12个编写干净且可扩展的JavaScript代码的小技巧

微信公众号

免费视频教程

先知道