1.提煉函數(shù)
好處：
- 避免出現(xiàn)超大函數(shù)
- 獨立出來的函數(shù)有助于代碼復用
- 獨立出來的函數(shù)更容易被覆寫
- 獨立出來的函數(shù)如果擁有一個良好的命名转质，它本身就起到了注釋的作用
// 提煉前
var getUserInfo = () => {
ajax('http://xxx.com', (data) => {
console.log(data.name)
console.log(data.pwd)
console.log(data.address)
})
}
// 提煉后
var getUserInfo = () => {
ajax('http://xxx.com', (data) => {
printDetail(data)
})
}
var printDetail = (data) => {
console.log(data.name)
console.log(data.pwd)
console.log(data.address)
}
2.合并重復的條件片段
// 合并前
var paging = (curPage) => {
if(curPage <= 0) {
curPage = 0
jump(curPage) // 跳轉
} else if(curPage >= totalPage) {
curPage = totalPage
jump(curPage) // 跳轉
} else {
jump(curPage) // 跳轉
}
}
// 合并后
var paging = (curPage) => {
if(curPage <= 0) {
curPage = 0
} else if(curPage >= totalPage) {
curPage = totalPage
}
jump(curPage) // 跳轉函數(shù)獨立出來
}
3.把條件分支語句提煉成函數(shù)
// 提煉前
var getPrice = (price) => {
var date = new Date()
if(date.getMonth() >= 6 && date.getMonth <= 9) {
return price * 0.8
}
return price
}
// 提煉后（起到了注釋作用）
var isSummer = () => {
var date = new Date()
return date.getMonth() >= 6 && date.getMonth <= 9
}
var getPrice = (price) => {
var date = new Date()
if(isSummer()) {
return price * 0.8
}
return price
}
4.合理使用循環(huán)
// 未使用循環(huán)
var createXHR = () => {
var xhr
try {
xhr = new ActiveXObject('MSXML2.XMLHttp.6.0')
} catch(e) {
try {
xhr = new ActiveXObject('MSXML2.XMLHttp.3.0')
} catch(e) {
xhr = new ActiveXObject('MSXML2.XMLHttp')
}
}
}
// 使用循環(huán)
var createXHR = () => {
var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp']
for(var i = 0, version; version = versions[i++]) {
try {
return new ActiveXObject(version)
}catch(e) {
}
}
}
5.提前讓函數(shù)退出代替嵌套條件分支
// 未提前退出函數(shù)導致嵌套嚴重
var del = (obj) => {
var ret
if(!obj.isReadOnly) { // 不為只讀的才能被刪除
if(obj.isFolder) { // 如果是文件夾
ret = delFolder(obj)
} else if(obj.isFile) {
ret = delFile(obj)
}
}
return ret
}
// 提前退出使代碼邏輯清晰
var del = (obj) => {
var ret
if(obj.isReadOnly) {
return
}
if(obj.isFolder) {
ret = delFolder(obj)
} else if(obj.isFile) {
ret = delFile(obj)
}
return ret
}
6.傳遞對象參數(shù)代替過長的參數(shù)列表
// 過長的參數(shù)列表導致維護困難
var setUserInfo = function( id, name, address, sex, mobile, qq ){
// do something
}
// 使用對象代替
var setUserInfo = function( userInfo ){
// do something
}
7.盡量減少參數(shù)數(shù)量
8.少用三目運算符
如果條件分支邏輯簡單且清晰陷谱，這無礙我們使用三目運算符：
var global = typeof window !== "undefined" ? window : this;
但如果條件分支邏輯非常復雜，那我們最好的選擇還是按部就班地編寫if-else琼懊。
if-else 語句的好處很多涌韩，一是閱讀相對容易熏版，二是修改的時候比修改三目運算符周圍的代碼更加方便纷责。
9.合理使用鏈式調用
鏈式調用帶來的壞處就是在調試的時候非常不方便，如果我們知道一條鏈中有錯誤出現(xiàn)纳决，必須得先把這條鏈拆開才能加上一些調試log或者增加斷點碰逸，這樣才能定位錯誤出現(xiàn)的地方。
10.分解大型類
如果某個類實現(xiàn)實在是太龐大阔加，那么它就完全有必要作用一個單獨的類存在饵史。
11.用return退出多重循環(huán)
// 假設在函數(shù)體內有一個兩重循環(huán)語句，我們需要在內層循環(huán)中判斷，當達到某個臨界條件時 退出外層的循環(huán)胳喷。我們大多數(shù)時候會引入一個控制標記變量
var func = () => {
var flag = false
for(var i = 0; i < 10; i++) {
for(var j = 0; j < 10; j++) {
if(i * j > 30) {
flag = true
break
}
}
if(flag == true) {
break
}
}
}
// 更簡單的做法是在需要中止循環(huán)的時候直接退出整個方法
var func = () => {
for(var i = 0; i < 10; i++) {
for(var j = 0; j < 10; j++) {
if(i * j > 30) {
return
}
}
}
}
// 但是提前return可能會導致后面的代碼沒有被執(zhí)行到湃番，因此可以把循環(huán)后面的代碼放到return后面
var print = (i) => {
console.log(i)
}
var func = () => {
for(var i = 0; i < 10; i++) {
for(var j = 0; j < 10; j++) {
if(i * j > 30) {
return print(i)
}
}
}
}
func()
