最新啟用碼來了 （支持所有版本，非破解）
提取地址：
https://www.ajihuo.com
👇SpringBoot+Vue完整源碼免費分享👇
（源碼+搭建教程+可商用）
源碼
👆源碼會持續更新，加油哦！👆
最近進行程式碼 review，發現團隊中部份新人寫的程式碼比較亂，有一個新人竟然寫出了下面的程式碼：
真是令人哭笑不得，我說你這是在放大招嗎？
這裏節選了團隊中六則糟糕程式碼的案例進行分析：
案例一
變量、內容和函式名應該使用小駝峰式命名法，並且名稱是可描述的. 應該避免使用單字元變量和不通用的縮寫。
某前端同學的 angular 程式碼：
export class PageComponent implements OnChanges {
@Input() pageObj
@Input() currentPage ? = 0
goPage
cg: any = false
goToPage() {
if (!this.goPage) {
return
}
this.currentPage = +this.goPage
this.pageChange.emit(this.goPage)
}
}
該同學定義了一個變量叫
cg
，不符合
變量名可描述
的規則，除了本人之外團隊其他成員看不懂其含義。
goToPage
和
goPage
容易混淆，語意也不明確。
案例二
盡量使用 es6 語法簡化程式碼邏輯
某後端同學的 js 程式碼：
let startDay = 0
let endDay = 1
switch (query.birth) {
case 0~1 : //當天過生日
startDay = 0
endDay = 1
break
case 1~8 : //1~8天過生日
startDay = 1
endDay = 8
break
case 8~16 : //8~16天過生日
startDay = 8
endDay = 16
break
case 16~31 : //16~31天過生日
startDay = 16
endDay = 31
break
case 31~999 : //31天以後天過生日
startDay = 31
endDay = 999
break
}
寫了20多行，其實就是一句話能搞定的事情，基本功太差：
let [startDay, endDay] = query.birth.split( ~ ).map(it => +it)
案例三
使用
/** ... */
作為多行註釋。包含描述、指定所有參數和返回值的型別和值。
/**
* 函式說明
* @關鍵字
*/
使用
//
作為單行註釋。在評論物件上面另起一行使用單行註釋。在註釋前插入空行。
某前端同學的 angular 程式碼：
/**處理右上角btn操作**/
handleWithBtn(btn) {
switch (btn) {
case export : { // 批次認證
Debug.log( 匯出 )
break
}
}
}
上面的註釋既不規範，也是多余的，當起了一個好的名字之後，程式碼就已經非常明確了。
案例四
邏輯互斥的 if 語句一定要配合 else 或 return 使用，把機率高的寫在前面。
某後端同學的 js 程式碼：
if (product class === Card && action === BUYCARD) {
seneca.sendSms(smsData, params)
}
if (product class === Card && action === TURNCARD) {
seneca.patchStatus(productId)
}
if (product class === Card && action === REPLACE) {
seneca.changeStatus( crm , Card )
}
if (product class === Lesson ) {
seneca.changeStatus( course , Lesson )
}
...
上面每個判斷都要執行一次，完全沒有必要，這種情況下要麽使用 switch 要麽 if 配合 else 或 return 使用。
案例五
保持函式簡短，一個好的函式適合展現在一個投影片(slide)上，這樣如果在一個比較大房間中，也便於最後一排的人閱讀。每一個函式的程式碼應該限制在 15 行左右，另外為了避免 if 語句過度巢狀, 應該提前將函式值返回.
某前端同學為了去除 params 物件中的 value 為 null， ，undefined 的 key 寫的程式碼：
getUrlParam(sUrl, sKey) {
const param = sUrl.split( # )[0].split( ? )[1]
if (param) {
if (sKey) { // 指定參數名稱
const strs = param.split( & )
const arrs = newArray() // 如果存在多個同名參數，則返回陣列
for (let i = 0, len = strs.length; i < len; i++) {
const tmp = strs[i].split( = )
if (tmp[0] === sKey) {
arrs.push(tmp[1])
}
}
if (arrs.length === 1) {// 返回該參數的值或者空字串
return arrs[0]
} elseif (arrs.length === 0) {
return
} else {
return arrs
}
} else {// 不指定參數名稱，返回全部的參數物件 或者 {}
if (param === undefined || param === ) {
return {}
} else {
const strs = param.split( & )
const arrObj = newObject()
for (let i = 0, len = strs.length; i < len; i++) {
const tmp = strs[i].split( = )
if (!(tmp[0] in arrObj)) {
arrObj[tmp[0]] = []
}
arrObj[tmp[0]].push(tmp[1])
}
return arrObj
}
}
} else {
return
}
}
這種函式可維護性極差，自己寫的過個星期也讀不懂什麽意思了，出現錯誤很難定位。下面是改造後的：
functionfilterParams(obj) {
const keys = Object.keys(obj)
keys.forEach(key => {
const value = obj[key]
if (isObject(value)) filterParams(value)
if (isEmpty(value)) delete obj[key]
})
return obj
}
functionisEmpty(input) {
return [, undefined, null].includes(input)
}
functionisObject(input) {
return input !== null && (!Array.isArray(input)) && typeof input === object
}
明顯清晰很多，可讀性很強，邏輯也很健壯。如果你覺得一個 15 行以內的函式搞不定某個事情，就把它拆分成多個小於 15 行的函式。
案例六
配置要寫在配置檔裏面統一管理，常量也要定義在單獨的檔裏面，常量名全部大寫。
某後端同學寫的 js 程式碼：
let client = new TopClient({
appkey : 12345678 ,
appsecret : asdfasdfasdfasdfasdfasdf ,
REST_URL : http://gw.api.taobao.com/router/rest
})
let sign = handler.sign(data, qwerqwerqwerqwerqwer )
...
金鑰這種配置資訊寫在程式碼裏面，既不方便測試，又不利於拓展
源自：https://juejin.cn/post/6906366633741287437
聲明：文章著作權歸作者所有，如有侵權，請聯系小編刪除。
感謝 · 轉發 歡迎大家留言
