代碼重構思路

1.提煉函數

好處:

  • 避免出現超大函數
  • 獨立出來的函數有助于代碼復用
  • 獨立出來的函數更容易被覆寫
  • 獨立出來的函數如果擁有一個良好的命名,它本身就起到了注釋的作用
// 提煉前
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) // 跳轉函數獨立出來
}

3.把條件分支語句提煉成函數

// 提煉前
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.合理使用循環

// 未使用循環
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')
        }
    }
}

// 使用循環
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.提前讓函數退出代替嵌套條件分支

// 未提前退出函數導致嵌套嚴重
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.傳遞對象參數代替過長的參數列表

// 過長的參數列表導致維護困難
var setUserInfo = function( id, name, address, sex, mobile, qq ){
    // do something
}

// 使用對象代替
var setUserInfo = function( userInfo ){
    // do something
}

7.盡量減少參數數量

8.少用三目運算符

如果條件分支邏輯簡單且清晰,這無礙我們使用三目運算符:

var global = typeof window !== "undefined" ? window : this;

但如果條件分支邏輯非常復雜,那我們最好的選擇還是按部就班地編寫if-else。

if-else 語句的好處很多,一是閱讀相對容易,二是修改的時候比修改三目運算符周圍的代碼更加方便。

9.合理使用鏈式調用

鏈式調用帶來的壞處就是在調試的時候非常不方便,如果我們知道一條鏈中有錯誤出現,必須得先把這條鏈拆開才能加上一些調試log或者增加斷點,這樣才能定位錯誤出現的地方。

10.分解大型類

如果某個類實現實在是太龐大,那么它就完全有必要作用一個單獨的類存在。

11.用return退出多重循環

// 假設在函數體內有一個兩重循環語句,我們需要在內層循環中判斷,當達到某個臨界條件時 退出外層的循環。我們大多數時候會引入一個控制標記變量
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
        }
    }
}

// 更簡單的做法是在需要中止循環的時候直接退出整個方法
var func = () => {
    for(var i = 0; i < 10; i++) {
        for(var j = 0; j < 10; j++) {
            if(i * j > 30) {
                return
            }
        }
    }
}

// 但是提前return可能會導致后面的代碼沒有被執行到,因此可以把循環后面的代碼放到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()
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。