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

我认为您所需要的只是应用程序的命名空间。命名空间是一个简单的 JSON 对象，如下所示：

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

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

1. MyApp 将包含 myApp = { } 对象，可能包含一些有用的实用程序，例如 object.create 或您拥有的其他实用程序。
2. Homepage.js 将包含 myApp.homepage = { ... } 以及主页页面的所有方法。
3. 该列表与其余页面一起不断延伸。

将其视为包。您不需要使用 $ 作为主要对象。

 <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>