編寫現代 JavaScript 代碼

shery 發布于2019-08-20 16:59 / 2130人閱讀

摘要：為什么呢函數式編程能使代碼更具可預測性，確定性，更安全，一旦習慣這種方式，代碼會更容易維護。第二個建議創建局部函數即使是在已經存在的函數中來說明代碼的功能，不需要使用注釋。注意，三個局部函數不修改它們的執行上下文。

原文作者：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 簡化代碼......和你喜歡的代碼工作一件很愉悅的事。

云服務器 GPU云服務器編寫javascript javascript編寫 javascript編寫教程 javascript編寫游戲

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83300.html

悄悄掀起 WebAssembly 的神秘面紗

摘要：在拿到這塊內存后，是擁有完全操作的權利的。后面定義了一個函數，并導出為函數。首先，使用在棧內壓入一個位整型常數，然后使用在棧內壓入一個位整型常數，之后調用指令，這個指前端開發人員想必對現代瀏覽器都已經非常熟悉了吧？HTML5，CSS4，JavaScript ES6，這些已經在現代瀏覽器中慢慢普及的技術為前端開發帶來了極大的便利。得益于 JIT（Just-in-time）技術，Java...

qc1iu 2019-08-23 12:01 評論0 收藏0
前端每周清單第 44 期: 2017 JS 調查報告、REST 接口實時化、ESM 的過去與未來

摘要：巔峰人生年老兵思路上的轉變，遠比單純提升技術更有價值本文節選自趙成教授在極客時間開設的趙成的運維體系管理課，是其對自己十年技術生涯的回顧與總結。趙成教授來自美麗聯合集團，集團旗下兩大主力產品是蘑菇街和美麗說，目前負責管理集團的技術服務團隊。 showImg(https://segmentfault.com/img/remote/1460000012476504?w=1240&h=826...

MASAILA 2019-08-22 11:21 評論0 收藏0
前端每周清單半年盤點之 JavaScript 篇

摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。背后的故事本文是對于年之間世界發生的大事件的詳細介紹，闡述了從提出到角力到流產的前世今生。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎...

Vixb 2019-08-21 12:04 評論0 收藏0
React文檔翻譯系列（一）安裝

摘要：文檔翻譯系列一安裝原文地址原文本系列是針對文檔進行的翻譯，因為自己在學習的時候，最開始通過看博客或者論壇等中文資料，有些內容是零零散散的接收，并沒有給自己帶來很好的效果，所以后來決定把文檔的原文從頭到尾看一遍。 React文檔翻譯系列（一）安裝原文地址：原文本系列是針對React文檔進行的翻譯，因為自己在學習react的時候，最開始通過看博客或者論壇等中文資料，有些內容是零零散散的...

Fourierr 2019-08-20 15:28 評論0 收藏0
前端每周清單第 45 期: Safari 支持 Service Worker, Parcel 完整教

摘要：的另一個核心特性，蘋果表示也正在開發中，按開發進度可能幾個月后就能與我們見面。是基于的本地化數據庫，支持以及瀏覽器環境。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID: frontshow），及時獲取前端每周清單。本期是 2017 年的最后一...

趙春朋 2019-08-21 18:24 評論0 收藏0