是否有用于管理初始化的良好 jQuery 模式？答案

【问题标题】：Is there a good jQuery pattern for managing initialization?是否有用于管理初始化的良好 jQuery 模式？
【发布时间】：2010-02-20 07:39:31
【问题描述】：

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

$(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 是邪恶的，我不知道使用这种方法对性能的影响。

【问题讨论】：

我也一直在尝试解决这个问题。我问了一个可能对您有帮助的相关问题：stackoverflow.com/questions/2135654/…

标签： jquery design-patterns

【解决方案1】：

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

假设你所有的对象都是全局的，为什么不试试：

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

【讨论】：

【解决方案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 -->

【讨论】：

【解决方案3】：

为什么不把首页的代码放在首页文件里，把关于页面的代码放在about页面文件里呢？换句话说，为什么要将所有的 javascript 代码放在同一个文件中？我看不出有什么理由。

【讨论】：

"原因是我可以将所有内容压缩到一个js文件中，从而减少http请求的数量。"
无论如何都必须发送页面本身，因此它不会生成额外的 http 请求，因为 javascript 代码将与 HTML 代码一起发送。以google.com首页的来源为例

【解决方案4】：

你可以这样做......

(function() {

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

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

})();

当然，您必须添加代码来解释多个类名实例，诸如此类。

【讨论】：