В основном я хочу сделать что-то вроде этого:
$(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();");
});
Но оценка является злой, и я не знаю последствий производительности с помощью этого метода.
Вместо использования eval
почему бы не использовать другой способ вызова объектов javascript []
?
Предполагая, что все ваши объекты глобальны по своему охвату, почему бы не попробовать:
$(document).ready(function() {
window[$(body).attr("class")].init();
});
Почему бы вам не поместить код домашней страницы в файл домашней страницы, а код для страницы about в файл страницы about? Другими словами, почему вы хотите поместить весь свой код javascript в один и тот же файл? Я не вижу для этого никаких причин.
Вот шаблон, который я использую в некоторых проектах:
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 -->
Вы можете сделать что-то вроде ..
(function() {
var container = {
'homePage': function() {
// homepage stuff
},
'aboutPage': function() {
}
},
page = $('body').attr('class');
if ( page.length && page in container ) container[page]()
})();
Конечно, вам придется добавить код для учета нескольких экземпляров имени класса и тому подобное.