原副标题：10 个JavaScript 基本功，加速提高程式设计水准！
1. Promise反弹冥界
Promises 提供更多了一类典雅的形式来处置 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)
}
}
3. 为函数设置太多参数
当一个函数的参数过多时，它的可读性就会变差，甚至不知道如何正确传递参数。
// ❌
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
// …
})
4.神奇的数字
小伙伴们，你们写过这样的标识符吗？很多地方用数字来做逻辑判断似乎很正常。是的，这让我很困惑 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)) {
// …
}
5.使用.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>
6. 永远不要写标识符注释
他们经常向别人抱怨，“你为什么不写标识符注释？” 但实际上，他们自己也从来不写它！
// ❌
const fn = (dpr) => {
if (dpr >= 2) {
// …
} else {
}
}
我的天，你知道‘dpr’是什么原意吗？没想到是指window devicePixelRatio。
// ✅
// dpr: Please enter a value for window.devicePixelRatio
const fn = (dpr) => {
if (dpr >= 2) {
// …
} else {
}
}
7.无意义的标识符注释
与其不写标识符注释，也不要写无意义的标识符注释，因为它浪费了你的时间。
你不妨解释一下“a”的含义或使用有意义的变量名称！
// ❌
let a = 1 // Set the value of “a” to 1
8. 随机命名
过去，我常常编写随机命名变量的笨拙标识符短片。
// ❌
const mw = 375
因此，亲爱的朋友们，请你们不要学我，你如果给变量一个适当且有意义的名称。
✅
const maxWidth = 375
9. 删除不要弃用的标识符
很多时候，他们的网站会不断调整功能，有新功能也有过时的功能，但我总是担心以后会用到，因此他们总是注释掉，并没删除。
其实这种担心是完全没必要的，因为以后用到的可能性很小。即使以后要用到，也可以通过‘git’来追溯。
10. 上千行组件标识符
我已经在一个组件中编写了一千多行标识符。这太糟糕了，他们如果将组件的功能进一步拆分成更小的组件。
以上就是今天的
