Question

为了保持井井有条，我想将我网站的所有javascript保存在一个文件中：

scripts.js

但是，我的一些脚本仅用于某些页面，其他脚本仅用于其他页面。

在我的文档就绪函数中，它看起来像这样：

function home_page() {
  // image rotator with "global" variables I only need on the home page
}

$('#form')... // jQuery form validation on another page

问题在于，我正在获取javascript以在甚至不需要的页面上执行。我知道有更好的方法来组织这个但我不知道从哪里开始...

Answer 1

您可以做的一件事是使用<html>或<body>标记上的类来确定每个页面的类型。然后，在决定应用行为组之前，JavaScript代码可以使用相当便宜的.is()测试。

if ($('body').is('.catalog-page')) {
  // ... apply behaviors needed only by "catalog" pages ...
}

即使在IE6和7中，即使是这样的几十个测试也不会导致性能问题。

Answer 2

我通常有一个init()函数，如下所示：

function init() {

    if($('#someElement').length>1) {
         runSomeInitFunction()
    }
    ... more of the same for other elements ...

}

基本上只是检查页面上是否存在元素，如果存在，则运行自己的初始化函数，如果没有，则跳过它。

在第一页加载之后，浏览器会缓存整个JS代码，因此将JS文件分解为特定于页面的部分是没有意义的。这只会让它成为维护的噩梦。

Answer 3

您可以使用每个页面对象文字来获得不同的范围。

var home = {

    other: function() {

    },

    init: function() {

    }
};

var about = {

    sendButton: function(e) {

    },        

    other: function() {

    },

    init: function() {

    }
}

var pagesToLoad = [home, about];
pagesToLoad.foreach(function(page) {
   page.init();
});

Answer 4

我通常做这样的事情，或者一些变化（下面的一些伪代码）：

var site = {
    home: {
       init: function() {
           var self=this; //for some reference later, used quite often
           $('somebutton').on('click', do_some_other_function);
           var externalFile=self.myAjax('http://google.com');
       },
       myAjax: function(url) {
           return $.getJSON(url);
       }
    },
    about: {
       init: function() {
           var self=this;
           $('aboutElement').fadeIn(300, function() {
               self.popup('This is all about me!');
           });
       },
       popup: function(msg) {
           alert(msg);
       }
    }
};
$(function() {
    switch($('body').attr('class')) {
       case 'home':
          site.home.init(); 
       break;
       case 'about':
          site.about.init();
       break;
       default: 
          site.error.init(); //or just home etc. depends on the site
    }
});

为多个网页组织javascript / jQuery

4 个答案: