编写当代 JavaScript 代码

2024年5月21日 238次阅读 来源: 离独逸

原文作者：Sébastien Castiel

原文链接：Writing modern JavaScript code

说点什么：这是一篇很质朴的文章，讲的原理都懂，但实际上，在事情中碰到相似的情况却未必云云，编写可保护，可浏览，更平安的代码是我们应有的义务。

是不是是还以为 JavaScript 是一门用于在光标悬浮时转变页面元素的言语？这些日子已不复存在，每一种言语都在跟着时间推移而生长，我们运用言语的体式格局一样也在生长。看一下你一两年前写的代码：会以为惭愧吗？假如是的话，这篇文章应当很合适你。

这里会列出一些所谓的最好实践，目标是让你的 JavaScript 代码更轻易编写，浏览和保护。

运用可格式化代码的 linter

第一个发起是运用 linter 东西，能够协助你搜检在差别文件是不是恪守一致的划定规矩，尤其是当差别开辟人员在同一个项目上事情：缩进，括号中的空格，替代 == 为 === …

但更主要的是，尽量运用 linter 东西自动修复代码。ESLint 就做得很好（带有 --fix 选项），而且与一切主流 IDE 圆满集成，能够在保留时自动修复文件。

还能够运用 Prettier，不过这款东西更注重格式化而不是静态搜检，但处置惩罚后的效果基础雷同。

下一步将引见与 linter 东西一同运用的划定规矩：

为你的 linter 定制现代化的划定规矩

假如不知道你的代码须要什么样的划定规矩，能够参考：StandardJS。这是一个异常严厉的 linter，没法修正设置，但内里的每一条划定规矩已越来越多地被社区回收。比方：

  • 运用 2 个空格缩进（我曾运用 4 个空格，但实际运用起来 2 个空格很不错）

  • 不运用分号（一开始能够会以为新鲜，但几天后就再也回不去了）

  • 在关键字（如 if）和花括号运用空格，在括号不运用空格

  • 等等。

StandardJS 是一个自力的 Node 模块，能够举行 lint 和修复代码，但假如要在现有的大型项目中运用，而且想要停用一些划定规矩（由于有些处所能够须要作大批修正），还能够运用 ESLint 预定设置。比方，我就停用了划定规矩 no-mixed-operators 和 import / no-webpack-loader-syntax。

运用 ES2015+ 的新特征

假如你在运用 JavaScript 开辟，基础没办法不据说 ES2015 +（或 ES6，ES7 …）的特征。有的已是我离不开的：

  • 箭头函数：关于函数式编程，比方写 x => x * 2 如许的函数异常有效（见下一点）

  • 类：停止运用原型函数，运用类更酷炫（但不要滥用，JavaScript 比任何面向对象的言语好多了）

  • 对数组和对象的操纵：

function doSomething() {
  const a = doSomethingElse()
  const b = doSomethingWithA(a)
  const otherResults = { c: '?', d: '?' }
  return { a, b, ...otherResults } // equivalent to { a: a, b: b }
}
const { a, c, ...rest } = doSomething() // Also works with arrays!
// `rest` looks like { b: ..., d: '?' }

  • 运用 async/await 编写更简朴的异步处置惩罚：

// Please try to write the same code with classic promises ;)
async function doSomething() {
  const a = await getValueForA()
  const b = await getValueForBFromA(a)
  const [c, d] = await Promise.all([
    // parallel execution
    getValueForC(), getValueForDFromB(b)
  ])
  const total = await calculateTotal(a, b, c, d)
  return total / 1000
}

想知道怎样运用这些特征呢？我的另一篇文章能给一些发起。（趁便说一下，运用最新版本的 Node.js，能够不再须要 Babel 就可以运用这些新特征）

运用函数式编程

函数式编程近来很热点，获得不少造诣，而且不仅仅是在 JavaScript 中。为何呢？函数式编程能使代码更具可展望性，确定性，更平安，一旦习气这类体式格局，代码会更轻易保护。这里有一些简朴的发起：

起首，停止运用 for 轮回，在大多数（多是一切？）情况下基础不须要。比方：

const arr = [{ name: 'first', value: 13 }, { name: 'second', value: 7 }]

// Instead of:
const res = {}
for (let i = 0; i < arr.length; i++) {
  const calculatedValue = arr[i].value * 10
  if (calculatedValue > 100) {
    res[arr[i].name] = calculatedValue
  }
}

// Prefer:
const res = arr
  .map(elem => ({ name: elem.name, calculatedValue: elem.value * 10 }))
  .filter(elem => elem.calculatedValue > 100)
  .reduce((acc, elem) => ({
    [elem.name]: elem.calculatedValue,
    ...acc
  }), {})

好吧，这实际上是一个异常极度的例子，关于不习气函数式编程的人而言，能够看起来越发庞杂。但我们能够轻微简化一下：

const enrichElementWithCalculatedValue =
  elem => ({ name: elem.name, calculatedValue: elem.value * 10 })
const filterElementsByValue = value =>
  elem => elem.calculatedValue > value
const aggregateElementInObject = (acc, elem) => ({
  [elem.name]: elem.calculatedValue,
  ...acc
})
const res = arr
  .map(enrichElementWithCalculatedValue)
  .filter(filterElementsByValue(100))
  .reduce(aggregateElementInObject, {})

在这里，我们定义了三个函数，其功用基础上与其名字一致。第二个发起：建立部分函数（即使是在已存在的函数中）来讲明代码的功用，不须要运用解释。

注重，三个部分函数不修正它们的实行上下文。没有外部变量被修正，没有其他效劳被挪用…在函数式编程中，它们被称为纯函数。纯函数具有很大的上风：

  • 很轻易测试，由于从给定参数只要一个能够的效果，不论被挪用了多少次;

  • 不管运用状况怎样，都能保证雷同的效果;

  • 运用状况在函数挪用之前和以后坚持稳定。

所以我的第三个发起是：尽量地运用纯函数。

其他的一些发起

  • 习气于运用异步代码，并多运用 promise，看看 RxJS 的 observales（有一个很棒的教程关于从函数式编程到相应式编程）

  • 写测试！这应当是很明显的，然则据我所知许多项目都有未经测试的代码，只管测试 JavaScript（前端或后端）并不难题。

  • 运用最新的言语特征：比方不要再写 arr.indexOf(elem) !== -1，而应当写成 arr.includes(elem)。

  • 大批浏览技术文章：JavaScript subreddit 是相识现在社区最酷做法的一个很好的泉源。

总而言之，最好的发起就是：老是重构你的代码。比方革新你一年前写过的模块？借此机会，用 const 庖代 var，运用箭头函数或 async/await 简化代码……和你喜好的代码事情一件很愉悦的事。

    原文作者：离独逸
    原文地址: https://segmentfault.com/a/1190000009638906
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞