Question

基本上我想做这样的事情：

$(document).ready(function() {  
    if ($(body).attr("class") === "HomePage") {  
        HomePage.init(); //bind events for home page (Crockford's module pattern)
    } else if ($(body).attr("class") === "AboutPage") {  
        AboutPage.init(); //bind events for about page  
    }  
});

原因是我可以将所有内容缩小为一个js文件，从而减少了http请求的数量。这个解决方案绝对不优雅，因为每当我添加新页面时我都需要添加另一个'else if'语句。我可以用：

$(document).ready(function() {  
    eval($(body).attr("class") + ".init();");
});

但是eval是邪恶的，我不知道使用这种方法对性能的影响。

Answer 1

而不是使用eval为什么不使用其他方式来调用javascript对象[]？

假设您的所有对象都是全局范围的，为什么不尝试：

$(document).ready(function() {  
    window[$(body).attr("class")].init();
});

Answer 2

这是我在某些项目中使用的模式：

var views = {
    'home': function() {
        // do stuff on homePage
    },
    'about': function() {
        // some about action
    }
}

var c = document.body.className.split(" ");
for (var i=0; c[i]; i++) {
    if (c[i] in views) {
        views[c[i]].call(this);
    }
}

<body class="home"> <!-- home method will be called -->
<body class="home about"> <!-- home and about methods will be called -->

Answer 3

为什么不将主页的代码放在主页文件中，以及about页面文件中about页面的代码？换句话说，为什么要将所有的javascript代码放在同一个文件中？我认为没有任何理由。

Answer 4

你可以做点像......

(function() {

    var container = {
        'homePage': function() {
              // homepage stuff
        },
        'aboutPage': function() {
        }
    },
    page = $('body').attr('class');

    if ( page.length && page in container ) container[page]()

})();

当然，您必须添加代码来考虑多个类名实例，以及类似的内容。

是否有一个很好的jQuery模式来管理初始化？

4 个答案: