分享 10 個前端開發(fā)者需要知道的 JS 技巧
英文 | https://javascript.plainenglish.io/as-a-front-end-engineer-10-javascript-tricks-and-tips-you-should-know-about-6f4df0082407
前言
過去，我寫了很多垃圾代碼，現(xiàn)在看起來很糟糕。
當(dāng)我再次看到那些代碼片段時，我什至懷疑自己是否適合做程序員。
所以，這里有 10 個我總結(jié)的JavaScript 技巧，可以幫助你避免編寫我曾經(jīng)做過的那種垃圾代碼。
1. Promise 回調(diào)地獄
Promise 提供了一種優(yōu)雅的方式來處理 JavaScript 中的異步操作。這也是避免“回調(diào)地獄”的解決方案之一。但是我并沒有真正理解它的含義，所以我寫了這個代碼片段。
我做了這些事情：
首先獲取用戶的基本信息。
按用戶信息獲取所有文章的簡要摘要。
通過文章簡要獲取文章詳細(xì)信息。
// ?getUserInfo().then((userInfo) => {getArticles(userInfo).then((articles) => {Promise.all(articles.map((article) => getArticleDetail(article))).then((articleDetails) => {console.log(articleDetails)})})})
我根本沒有在這里利用 Promise，我們應(yīng)該像下面的代碼片段一樣處理它：
// ?getUserInfo().then((getArticles).then((articles) => {return Promise.all(articles.map((article) => getArticleDetail(article)))}).then((articleDetails) => {console.log(articleDetails)})
2.不處理錯誤信息
我經(jīng)常只寫成功請求的代碼邏輯，而忽略請求失敗。
// ?const getUserInfo = async () => {try {const userInfo = await fetch('/api/getUserInfo')} catch (err) {}}
這是沒有經(jīng)驗(yàn)的，我們應(yīng)該給出一個用戶友好的提示，而不是什么都不做。
// ?const getUserInfo = async () => {try {const userInfo = await fetch('/api/getUserInfo')} catch (err) {Toast(err.message)}}
3. 給一個函數(shù)設(shè)置太多參數(shù)
當(dāng)一個函數(shù)的參數(shù)太多時，它的可讀性就會降低，甚至，讓我們想知道如何正確傳遞參數(shù)。
例子
我們想要獲取用戶的一些基本信息，比如姓名、性別、年齡等。
// ?const getUserInfo = (name, age, weight, gender, mobile , nationality, hobby, address) => {// ...}getUserInfo('fatfish', 100, 2000, ...)
那太糟了，如果你的同事這樣寫代碼，你會揍他嗎？
事實(shí)上，當(dāng)函數(shù)參數(shù)過多時，應(yīng)該使用對象來傳遞需要的信息，這樣它的可讀性和可擴(kuò)展性都會得到提高。
// ?const getUserInfo = (options) => {const { name, gender, age, mobile, weight, nationality, hobby, address } = options// ...}getUserInfo({name: 'fatfish',age: 100,weight: 2000// ...})
4.Magic number
朋友們，你們寫過這樣的代碼嗎？在很多地方使用數(shù)字進(jìn)行邏輯判斷似乎很正常。是的，它讓我感到困惑 1、2、3 到底是什么意思。
?// component1.jsif (status === 1 || status === 2) {// ...} else if (status === 3) {// ...}// component2.jsif (status === 1 || status === 2) {// ...}
我們最好將這些數(shù)字定義為常數(shù)。
// ?// constants.jsexport const STATUS = {// It is an adult and has real-name authenticationadultRealName: 1,// It is a minor and has real-name authenticationminorRealName: 2,// Not real-name authenticationnotRealName: 3,// ...}// component1.jsimport { STATUS } from './constants.js'if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {// ...} else if (status === STATUS.notRealName) {// ...}// component2.jsimport { STATUS } from './constants.js'// component2.jsif ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {// ...}
5.使用.length判斷字符串的長度
大多數(shù)情況下，我們使用 .length 來判斷字符串的長度是安全的，但在表單輸入的情況下要小心。
當(dāng)我們輸入 ?? 時，nameLen 的值為 2——這不是很奇怪嗎？
// ?<input type="text" id="name"><script>const $name = document.getElementById('name')$name.addEventListener('blur', () => {const name = $name.valueconst nameLen = name.length// input: fatfish => nameLen: 7// input: ?? => nameLen: 2console.log(`name: ${name}, nameLen: ${nameLen}`)}, false)</script>
是的，這是有原因的，你猜怎么著？
// ?<input type="text" id="name"><script>const $name = document.getElementById('name')$name.addEventListener('blur', () => {const name = $name.valueconst nameLen = name.lengthconst spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/gconst nameRealLen = name.replace(spRegexp, '_').length// input: fatfish => nameLen: 7, nameRealLen: 7// input: ?? => nameLen: 2, nameRealLen: 1console.log(`name: ${name}, nameLen: ${nameLen}, nameRealLen: ${nameRealLen}`)}, false)</script>
6.永遠(yuǎn)不要寫代碼注釋
我們經(jīng)常向別人抱怨，“你為什么不寫代碼注釋？” 但實(shí)際上，我自己也從來沒有寫過注釋！
// ?const fn = (dpr) => {if (dpr >= 2) {// ...} else {}}
天哪，你知道'dpr'是什么意思嗎？我從沒想過它的意思是窗口設(shè)備PixelRatio。
// ?// dpr: Please enter a value for window.devicePixelRatioconst fn = (dpr) => {if (dpr >= 2) {// ...} else {}}
7. 無意義的代碼注釋
與其不寫代碼注釋，也不要寫無意義的代碼注釋，因?yàn)檫@會浪費(fèi)你的時間。
你不妨解釋一下“a”的含義或使用有意義的變量名！
// ?let a = 1 // Set the value of "a" to 1
8.隨機(jī)命名
過去，我曾經(jīng)編寫過隨機(jī)命名變量的笨拙代碼片段。
// ?const mw = 375
?const maxWidth = 375
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號
