I've got about 8 js files that need to be loaded on every page of my site, plus a number of others that need to be loaded conditionally. I've got things working, I just want to ensure that I'm doing this as elegantly as possible (which I suspect I am not).
Here is the code I'm currently using:
yepnope({
load: {
'jquery': '/include/js/libraries/jquery-1.8rc1.js',
'ui': '/include/js/jquery-ui-1.8.16.custom.min.js',
'global': '/include/js/global.js',
'dbObject': '/include/js/dbObject.js',
'dbQuery': '/include/js/dbQuery.js',
'common': '/include/js/common.js',
'credit': '/include/js/credit.js',
'messages': '/include/js/messages.js',
'poller': '/include/js/poller.js',
'ajax_global': '/include/js/ajax_global.js'
},
complete: function (url, res, key) {
yepnope({
test: $('body').hasClass('project'),
yep: {
'project': '/include/js/project.js'
},
callback: function(url, res, key) {
}
});
}
});
Everything in that initial load
object must be loaded for every page on the site. Then in the complete
function I am testing to see if the body tag has the project
class and, if so, I'm loading other scripts I rely on for this page.
Couple of questions:
- Is this the best way to do this?
- How should I add other tests for other pages? Would I throw that nested yepnope call into an array and just add more test objects?
I appreciate any help I can get.