代码重构思路

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()
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容