Существует ли хороший шаблон jQuery для руководящей инициализации?

В основном я хочу сделать что-то вроде этого:

$(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. Это решение определенно не изящно, так как я еще должен добавить другого ', если' оператор каждый раз, когда я добавляю новые страницы. Я мог использовать:

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

Но оценка является злой, и я не знаю последствий производительности с помощью этого метода.

6
задан SystemR 19 February 2010 в 23:26
поделиться

4 ответа

Вместо использования eval почему бы не использовать другой способ вызова объектов javascript []?

Предполагая, что все ваши объекты глобальны по своему охвату, почему бы не попробовать:

$(document).ready(function() {  
    window[$(body).attr("class")].init();
});
4
ответ дан 17 December 2019 в 00:08
поделиться

Почему бы вам не поместить код домашней страницы в файл домашней страницы, а код для страницы about в файл страницы about? Другими словами, почему вы хотите поместить весь свой код javascript в один и тот же файл? Я не вижу для этого никаких причин.

1
ответ дан 17 December 2019 в 00:08
поделиться

Вот шаблон, который я использую в некоторых проектах:

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 --> 
2
ответ дан 17 December 2019 в 00:08
поделиться

Вы можете сделать что-то вроде ..

(function() {

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

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

})();

Конечно, вам придется добавить код для учета нескольких экземпляров имени класса и тому подобное.

0
ответ дан 17 December 2019 в 00:08
поделиться
Другие вопросы по тегам:

Похожие вопросы: