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

本文摘自PHP中文网，作者青灯夜游，侵删。

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

现代Web应用程序严重依赖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引入的一个很好的工具。它允许您从对象中获取特定字段并立即将其分配给变量。您可以将其用于任何类型的对象或模块。

1 2	`// 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',
})