12个编写干净且可扩展的JavaScript代码的小技巧(2)-木庄网络博客

当前第2页返回上一页

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。例如:

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

布尔值

简单地从“是”或“必须”接近自然语言开始。你可以这样问，“那个人是老师吗?”→“是”或“不是”。“类似:

1	`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。在这里，我喜欢在将对象返回到前端之前将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'