javascript - 我怎样才能合并我的 JavaScript 文件并仍然让我的回调等待就绪状态？

Question

我有很多函数和事件处理程序，它们分布在多个 javascript 文件中，这些文件包含在我网站的不同页面上。

出于性能原因，我想将所有这些文件合并为一个跨站点全局文件。

问题是我将在不一定存在的元素和相同的函数名称上调用事件处理程序。

这是一个典型的 javascript 文件的例子...

$(document).ready(function(){
    $('#blah').keypress(function(e){
        if (e.which == 13) {
            checkMap();
            return false;
        }
    });
});

function checkMap() {
    // code
}

function loadMap() {
    // code
}

我需要将此代码分离到一个在该特定页面上调用的对象中。

我的想法是我可以这样重写它:

(function($) {
    $.homepage = {
        checkMap: function(){
            // code
        },
        loadMap: function(){
            //code  
        }
    };
})(jQuery);

然后在需要它的页面上我可以调用 $.homepage.checkMap() 等

但是我该如何声明像 document.ready 这样的事件处理程序而不将它包含在它自己的函数中呢？

Answer 1

首先:根据您拥有的代码量，您应该考虑在一个文件中提供所有代码是否真的是个好主意。保存 http-requests 没问题，但是如果你加载一大块代码，你在单个页面上使用 5%，你可能最好将这些 js 文件分开(尤其是在移动环境中!)。请记住，您可以让浏览器缓存这些文件。根据代码更改的频率以及源更改的数量，您可能希望将代码分成稳定的核心功能和用于特殊目的的附加 .js 包。这样您在流量和维护方面可能会更好。

将您的函数封装到不同的对象中是防止不必要的函数提升和全局命名空间污染的好主意。

最后，您可以通过以下任一方式防止调用不必要的事件处理程序:

引入某种页面类型，帮助您决定只调用必要的函数。

或

像这样检查某些元素是否存在 if( $("specialelement").length > 0 ){ callhandlers}

要加速您的 JS，您可以使用 Google Closure Compiler。它可以缩小和优化您的代码。