建站
咨詢
售后
建站咨詢
新聞中心
前言
過去，我寫了很多垃圾代碼，現(xiàn)在看起來很糟糕。
成都創(chuàng)新互聯(lián)主營吉州網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā),吉州h5小程序定制開發(fā)搭建,吉州網(wǎng)站營銷推廣歡迎吉州等地區(qū)企業(yè)咨詢
當我再次看到那些代碼片段時，我什至懷疑自己是否適合做程序員。
所以，這里有 10 個我總結(jié)的JavaScript 技巧，可以幫助你避免編寫我曾經(jīng)做過的那種垃圾代碼。
1. Promise 回調(diào)地獄
Promise 提供了一種優(yōu)雅的方式來處理 JavaScript 中的異步操作。這也是避免“回調(diào)地獄”的解決方案之一。但是我并沒有真正理解它的含義，所以我寫了這個代碼片段。
我做了這些事情：
- 首先獲取用戶的基本信息。
- 按用戶信息獲取所有文章的簡要摘要。
- 通過文章簡要獲取文章詳細信息。
// getUserInfo()(userInfo) => getArticles(userInfo)(articles) => Promise.all(articles.map((article) =>(articleDetails) => console.log(articleDetails) }) }) })
我根本沒有在這里利用 Promise，我們應(yīng)該像下面的代碼片段一樣處理它：
// getUserInfo() .then((getArticles)(articles) => return Promise.all(articles.map((article) => })(articleDetails) => console.log(articleDetails) })
2.不處理錯誤信息
我經(jīng)常只寫成功請求的代碼邏輯，而忽略請求失敗。
// const getUserInfo = async () => { try { const userInfo = await fetch('/api/getUserInfo') } catch (err) {
}}這是沒有經(jīng)驗的，我們應(yīng)該給出一個用戶友好的提示，而不是什么都不做。
// const getUserInfo = async () => { try { const userInfo = await fetch('/api/getUserInfo') } catch (err) { Toast(err.message) }}
3. 給一個函數(shù)設(shè)置太多參數(shù)
當一個函數(shù)的參數(shù)太多時，它的可讀性就會降低，甚至，讓我們想知道如何正確傳遞參數(shù)。
例子
我們想要獲取用戶的一些基本信息，比如姓名、性別、年齡等。
// const getUserInfo = (name, age, weight, gender, mobile , nationality, hobby, address) => // ...}getUserInfo('fatfish', 100, 2000, ...)那太糟了，如果你的同事這樣寫代碼，你會揍他嗎？
事實上，當函數(shù)參數(shù)過多時，應(yīng)該使用對象來傳遞需要的信息，這樣它的可讀性和可擴展性都會得到提高。
// const getUserInfo = (options) => const { name, gender, age, mobile, weight, nationality, hobby, address } = options // ...}getUserInfo({name: 'fatfish',age: 100,weight: 2000 // ...})
4.Magic number
朋友們，你們寫過這樣的代碼嗎？在很多地方使用數(shù)字進行邏輯判斷似乎很正常。是的，它讓我感到困惑 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 authentication adultRealName: 1, // It is a minor and has real-name authentication minorRealName: 2, // Not real-name authentication notRealName: 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 來判斷字符串的長度是安全的，但在表單輸入的情況下要小心。
當我們輸入 時，nameLen 的值為 2——這不是很奇怪嗎？
//
是的，這是有原因的，你猜怎么著？
//
6.永遠不要寫代碼注釋
我們經(jīng)常向別人抱怨，“你為什么不寫代碼注釋？” 但實際上，我自己也從來沒有寫過注釋！
// 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. 無意義的代碼注釋
與其不寫代碼注釋，也不要寫無意義的代碼注釋，因為這會浪費你的時間。
你不妨解釋一下“a”的含義或使用有意義的變量名！
// let a = 1 // Set the value of "a" to 1
8.隨機命名
過去，我曾經(jīng)編寫過隨機命名變量的笨拙代碼片段。
// const mw = 375
朋友，請不要向我學習，你應(yīng)該給變量一個適當且有意義的名稱。
const maxWidth = 375
9.不要刪除不推薦使用的代碼
很多時候，我們的網(wǎng)站會不斷的調(diào)整功能，有新的和棄用的功能，但我總是擔心我以后會用到，所以我只是評論它們，而不是刪除它們。
其實，這種擔心是完全沒有必要的，因為以后用的可能性很小。 就算以后會用到，也可以通過‘git’來追溯。
10. 超過一千行的組件代碼
我在一個組件中編寫了超過一千行代碼。 這太糟糕了，我們應(yīng)該將組件的功能進一步拆分為更小的組件。
寫在最后
這些都是我工作的一些經(jīng)驗總結(jié)，希望這篇文章內(nèi)容對你有所幫助。
本文題目：十個前端開發(fā)者務(wù)必知道的JavaScript技巧
文章鏈接：http://www.5511xx.com/article/djpiiec.html
