代码优化疑惑

Question

一句话概括就是代码高耦合了, 需求稍微有点变化, 就会牵涉到改很多代码, 维护起来感觉好困难, 虽然效果什么的实现了, 但是代码特别差, 求大神指导.
举个例子:
我目前写的代码是这样的:

function start() {
    var data = null
    $.get('/s/api..', function(res) {
        data = res
    })
    ...一堆逻辑后用two方法
    two(data)    
}
function two(data) {
    逻辑....然后用到了thr方法
    thr(data.a, data.b)
}
function thr(a, b) {
    var thrA = null
    ...一对逻辑后for(a, b, thrA)
}
function for(a, b, thrA) {
    ...逻辑代码
}

这样编写的代码之间高耦合, 需求变化什么的都很难维护.
假如thr想直接用start中的属性c,我想到就是传给two再传给thr,因为start不需要用到thr方法, 但需求修改后发现thr又需要用到start请求的数据; 如果用全局的话就会有很多var, 貌似影响性能, 求教怎么优化自己的代码, 怎么解耦, 有什么好的书推荐吗.
可能我描述的问题不是太清楚, 总之就是代码之间高耦合, 如何让代码低耦合

Answer 1

其实这个时候用闭包，来封闭你的所谓认为 var 会影响性能，是最好不够。

例如：

(function() {
    var c;
    function start() {
        var data = null
        $.get('/s/api..', function(res) {
            data = res
        })
        ...一堆逻辑后用two方法
        two(data)    
        // using c
    }
    function two(data) {
        逻辑....然后用到了thr方法
        thr(data.a, data.b)
        // using c
    }
    function thr(a, b) {
        var thrA = null
        ...一对逻辑后for(a, b, thrA)
        // using c
    }
    function for(a, b, thrA) {
        ...逻辑代码
        // using c
    }
})();

但，有时会你又希望这个闭包，可能有些东西是需要被外部使用的。那么，可以改装成类：

var Bus = function(options) {
    var c;
    function start() {
        var data = null
        $.get('/s/api..', function(res) {
            data = res
        })
        ...一堆逻辑后用two方法
        two(data)    
    }
    function two(data) {
        逻辑....然后用到了thr方法
        thr(data.a, data.b)
    }
    function thr(a, b) {
        var thrA = null
        ...一对逻辑后for(a, b, thrA)
    }
    function for(a, b, thrA) {
        ...逻辑代码
    }
    
    return {
        start: start,
        getC: function() {
            return c;
        }
    };
}

// using
var bus = new Bus();
bus.start();
console.log(bus.getC());

或许ES6才是你应该去看！

Answer 2

这就难说了。。

多个函数的公共部分应该提出来，或者return返回让其他函数可以使用
还有如果要在一个函数最后调用其他函数，那么就叫尾调，可以看看尾调优化。
另外多参数的复杂函数，可以通过【currying——柯林化或者叫柯里化】，简化为只能传入一个参数就完成所有逻辑，以方便函数交叉调用。。可以自己百度一下currying。

Answer 3

function start() {
    var data = null
    $.get('/s/api..', function(res) {
        data = res
    })
    ...一堆逻辑后用two方法
    return data    
}
function two(data) {
    逻辑....然后用到了thr方法
    return data.a, data.b
}
function thr(a, b) {
    var thrA = null
    ...一对逻辑后
    return a, b, thrA
}
function for(a, b, thrA) {
    var data = start();
    .
    .
    .
    ...逻辑代码
}

Answer 4

之前写过一个赋值的例子，不太确定能不能帮到你，可以参考一下：
直接遍历某个form中的input属性，然后根据后台的传值在前台进行赋值，需要注意前台的id要和后台的属性名一一对应。
JS部分代码：

    $.ajax({
            type: "POST",
            dataType: "json",
            url: "xxxurl",
            data: {"paramName":paramValue},
            success: function (data) {
                $('#formName').find('input').each(function(){
                    var id = this.id;
                    $(this).attr("readonly","readonly"); //变更一些样式
                    $(this).val(data[id]);    //取值(属性名需要一致)
                    }
                })
            },
            error: function(data) {
                xxxFunc();
            }
        });

Answer 5

jQuery 可以这样：

function start() {
    $.get('/s/api')
    .done(function(res) {
        thr(res.a, res.b);
    });
}
function thr(a, b) {
    //...
}

Answer 6

每个函数里面只做该做的事情