前端開發者務必知道的JavaScript技巧，這裡有 10 個我總結的JavaScript 技巧，可以幫助你避免編寫我曾經做過的那種垃圾程式碼。

Promise 回撥地獄

Promise 提供了一種優雅的方式來處理 JavaScript 中的非同步操作。這也是避免“回撥地獄”的解決方案之一。但是我並沒有真正理解它的含義，所以我寫了這個程式碼片段。

我做了這些事情：

首先獲取使用者的基本資訊。
按使用者資訊獲取所有文章的簡要摘要。
透過文章簡要獲取文章詳細資訊。

// ❌
getUserInfo()
  .then((userInfo) => {
    getArticles(userInfo)
      .then((articles) => {
        Promise.all(articles.map((article) => getArticleDetail(article)))
          .then((articleDetails) => {
            console.log(articleDetails)
          })
      })
  })

我根本沒有在這裡利用 Promise，我們應該像下面的程式碼片段一樣處理它：

// ✅
getUserInfo()
  .then((getArticles)
  .then((articles) => {
    return Promise.all(articles.map((article) => getArticleDetail(article)))
  })
  .then((articleDetails) => {
    console.log(articleDetails)
  })

2.不處理錯誤資訊

我經常只寫成功請求的程式碼邏輯，而忽略請求失敗。

// ❌
const getUserInfo = async () => {
  try {
    const userInfo = await fetch('/api/getUserInfo')
  } catch (err) {
  }
}

這是沒有經驗的，我們應該給出一個使用者友好的提示，而不是什麼都不做。

// ✅
const getUserInfo = async () => {
  try {
    const userInfo = await fetch('/api/getUserInfo')
  } catch (err) {
    Toast(err.message)
  }
}

給一個函式設定太多引數

當一個函式的引數太多時，它的可讀性就會降低，甚至，讓我們想知道如何正確傳遞引數。

例子

我們想要獲取使用者的一些基本資訊，比如姓名、性別、年齡等。

// ❌
const getUserInfo = (name, age, weight, gender, mobile , nationality, hobby, address) => {
  // ...
}
getUserInfo('fatfish', 100, 2000, ...)

那太糟了，如果你的同事這樣寫程式碼，你會揍他嗎？

事實上，當函式引數過多時，應該使用物件來傳遞需要的資訊，這樣它的可讀性和可擴充套件性都會得到提高。

// ✅
const getUserInfo = (options) => {
  const { name, gender, age, mobile, weight, nationality, hobby, address } = options
  // ...
}
getUserInfo({
  name: 'fatfish',
  age: 100,
  weight: 2000
  // ...
})

Magic number

朋友們，你們寫過這樣的程式碼嗎？在很多地方使用數字進行邏輯判斷似乎很正常。是的，它讓我感到困惑 1、2、3 到底是什麼意思。

❌
// component1.js
if (status === 1 || status === 2) {
  // ...
} else if (status === 3) {
  // ...
}
// component2.js
if (status === 1 || status === 2) {
  // ...
}

我們最好將這些數字定義為常數。

// ✅
// constants.js
export const STATUS = {
  // It is an adult and has real-name authentication
  adultRealName: 1,
  // It is a minor and has real-name authentication
  minorRealName: 2,
  // Not real-name authentication
  notRealName: 3,
  // ...
}
// component1.js
import { STATUS } from './constants.js'
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
  // ...
} else if (status === STATUS.notRealName) {
  // ...
}
// component2.js
import { STATUS } from './constants.js'
// component2.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
  // ...
}

使用.length判斷字串的長度

大多數情況下，我們使用 .length 來判斷字串的長度是安全的，但在表單輸入的情況下要小心。

當我們輸入時，nameLen 的值為 2——這不是很奇怪嗎？

// ❌
<input type="text" id="name">
<script>
  const $name = document.getElementById('name')
  $name.addEventListener('blur', () => {
    const name = $name.value
    const nameLen = name.length
    // input: fatfish => nameLen: 7
    // input:    => nameLen: 2
    console.log(`name: ${name}, nameLen: ${nameLen}`)
  }, false)
</script>

是的，這是有原因的，你猜怎麼著？

// ✅
<input type="text" id="name">
<script>
  const $name = document.getElementById('name')
  $name.addEventListener('blur', () => {
    const name = $name.value
    const nameLen = name.length
    const spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g
    const nameRealLen = name.replace(spRegexp, '_').length
    // input: fatfish => nameLen: 7, nameRealLen: 7
    // input:    => nameLen: 2, nameRealLen: 1
    console.log(`name: ${name}, nameLen: ${nameLen}, nameRealLen: ${nameRealLen}`)
  }, false)
</script>

永遠不要寫程式碼註釋

我們經常向別人抱怨，“你為什麼不寫程式碼註釋？” 但實際上，我自己也從來沒有寫過註釋！

// ❌
const fn = (dpr) => {
  if (dpr >= 2) {
    // ...
  } else {
  }
}

天哪，你知道'dpr'是什麼意思嗎？我從沒想過它的意思是視窗裝置PixelRatio。

// ✅
// dpr: Please enter a value for window.devicePixelRatio
const fn = (dpr) => {
  if (dpr >= 2) {
    // ...
  } else {
  }
}

無意義的程式碼註釋

與其不寫程式碼註釋，也不要寫無意義的程式碼註釋，因為這會浪費你的時間。

你不妨解釋一下“a”的含義或使用有意義的變數名！

// ❌
let a = 1 // Set the value of "a" to 1

隨機命名

過去，我曾經編寫過隨機命名變數的笨拙程式碼片段。

// ❌
const mw = 375

朋友，請不要向我學習，你應該給變數一個適當且有意義的名稱。

✅
const maxWidth = 375

不要刪除不推薦使用的程式碼

很多時候，我們的網站會不斷的調整功能，有新的和棄用的功能，但我總是擔心我以後會用到，所以我只是評論它們，而不是刪除它們。其實，這種擔心是完全沒有必要的，因為以後用的可能性很小。就算以後會用到，也可以透過‘git’來追溯。

超過一千行的元件程式碼

我在一個元件中編寫了超過一千行程式碼。這太糟糕了，我們應該將元件的功能進一步拆分為更小的元件。

前端開發者務必知道的JavaScript技巧

相關文章