JavaScript代码分组技术

我有很多功能和事件处理程序分割在多个 JavaScript文件,包括在我的网站的不同的页面.

出于性能原因,我想将所有这些文件合并到整个网站全球的1个文件中.

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

这是一个典型的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中声明事件处理程序,但不包含它自己的函数呢？

任何关于最佳做法的建议将是非常好的,谢谢！

解决方法

我认为你所需要的就是你的应用程序的命名空间.命名空间是一个简单的JSON对象,可以如下所示：

var myApp = {
    homepage : {
      showHeader : function(){},hideHeader : function(){},animationDelay : 3400,start : function(){} // the function that start the entire homepage logic
    },about : {
    .... 
    }
}

您可以将其拆分为更多文件：

> MyApp将包含myApp = {}对象,也许有一些有用的实用程序,如object.create或者你有什么.
> Homepage.js将包含myApp.homepage = {…}与您的首页页面的所有方法.
>列表继续与其余的页面.

把它当成包装.你不需要使用$作为主要对象.

<script src="myapp.js"></script>
 <script src="homepage.js"></script>
 <-....->
 <script>
   myApp.homepage.start();
 </script>

将是我使用主页对象的方式.

当使用YUI进行压缩时,您应该具有：

<script src="scripts.min.js"></script>
<script>
    myApp.homepage.start();
 </script>