javascript - 代码优化疑惑
ringa_lee
ringa_lee 2017-04-11 12:54:40
[JavaScript讨论组]

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

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, 貌似影响性能, 求教怎么优化自己的代码, 怎么解耦, 有什么好的书推荐吗.
可能我描述的问题不是太清楚, 总之就是代码之间高耦合, 如何让代码低耦合

ringa_lee
ringa_lee

ringa_lee

全部回复(6)
迷茫

其实这个时候用闭包,来封闭你的所谓认为 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才是你应该去看!

伊谢尔伦

这就难说了。。

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

大家讲道理
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();
    .
    .
    .
    ...逻辑代码
}
迷茫

之前写过一个赋值的例子,不太确定能不能帮到你,可以参考一下:
直接遍历某个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();
            }
        });
怪我咯

jQuery 可以这样:

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号