小编yos*_*-fo的帖子

我的应用程序的JavaScript/jQuery包含在外部scripts.js文件中.它通常看起来像这样:

$('document').on('ready', function() {
    giraffe();
    elephant();
    zebra();
});

function giraffe() {
    // code
}

function elephant() {
    // code
}

function zebra() {
    // code
}

giraffe()仅用于可用的视图,/animal/giraffe
elephant()仅用于可用的视图,/animal/elephant
zebra()仅用于可用的视图/animal/zebra,

但是所有3个都应该在可用的视图上运行/animal/all.这是一个基本的例子,但这是将它们全部放在一个.js文件中的原因,除了将HTTP请求保持在最低限度之外.

我的问题是,这会影响JavaScript呈现吗？即使giraffe()没有使用(没有可用的元素)/animal/zebra,它仍然被调用.如果找不到任何操作,js/jQuery会忽略该函数吗？我确定整个脚本都被读了,这可能需要时间.那么,处理这个问题的最佳方法是什么？

一个解决方案

为了避免冲突,我在js文件的顶部创建了条件,只运行活动页面所需的函数:

$('document').on('ready', function() {
    var body = $('body');

    if( body.hasClass('giraffe') ) {
        giraffe();
    }

    if( body.hasClass('elephant') ) {
        elephant();
    }

    if( body.hasClass('zebra') ) {
        zebra();
    }
});

这比我想要的更冗长,但它成功地使这些功能模块化/冲突免费.我欢迎对此解决方案进行改进.