It would certainly be better to run just the code you need. It's not that difficult; the only minor complexity is handling your /animals/all
case. If you want to keep all your code in one file, you could do it this way:
var animals = {
giraffe: function() {
console.log( "I'm a giraffe" );
},
elephant: function() {
console.log( "I'm an elephant" );
},
zebra: function() {
console.log( "I'm a zebra" );
}
};
$(function() {
var animal = location.pathname.split('/').pop();
if( animal == 'all' ) {
for( var animal in animals ) {
animals[animal]();
}
}
else if( animal in animals ) {
animals[animal]();
}
else {
console.log( "I'm a mystery animal" );
}
});
You can actually test this code by going to URLs like this right here on Stack Overflow, and then pasting that code into the JavaScript console:
https://stackoverflow.com/animal/giraffe
https://stackoverflow.com/animal/elephant
https://stackoverflow.com/animal/zebra
https://stackoverflow.com/animal/ocelot
https://stackoverflow.com/animal/all
Update: OK, so you explained in the comment that the actual situation is a bit more complicated. I'll leave this code here in case it's useful for anyone, but for your situation you may be closer to what you need with the code you already have.
WRT the question of what one of your animal functions will do when you're on a page it doesn't relate to, of course that depends on how it's coded. It may successfully do nothing, or it may have an error, right?
Since we're talking about jQuery code, here are a couple of examples. Suppose you have code that's looking for an element by ID and then assumes that the element exists:
var zebraElement = $('#zebra')[0];
console.log( zebraElement.value );
On a page where the #zebra
element exists, this code will log its value
attribute. (I'm assuming for discussion that it's an element that has a value, such as an input element.)
But if #zebra
is not present, then zebraElement
is undefined
, and attemping to access its value
will fail and land in the debugger.
OTOH, if you coded that like this:
var $zebra = $('#zebra');
console.log( $zebra.val() );
it wouldn't fail if #zebra
is missing, it would successfully print undefined
without causing an error.
Similarly, if you have code that uses $().each()
, it will typically run without failure when the element(s) are missing, because it simply won't execute the callback function:
$('.animal').each( function( i, e ) {
console.log( $(e).val() );
});
If there are no elements with class="animal"
, then the console.log()
call will never be reached. So there's no error, it just doesn't do anything.
Depending on what you're doing, this can be a perfectly reasonable way to fire up only the behavior you need—simply make sure your code handles the missing DOM elements by cleanly doing nothing.
Also be sure to read nick's answer for more insights.
And one more update… In the comment you mentioned keying off classnames on the body
element. A nice way to do that would be similar to the code example above. You don't need a conditional for each animal, just a loop and a single conditional:
var animals = {
giraffe: function() {
console.log( "I'm a giraffe" );
},
elephant: function() {
console.log( "I'm an elephant" );
},
zebra: function() {
console.log( "I'm a zebra" );
}
};
$(function() {
var $body = $('body');
for( var animal in animals ) {
if( $body.hasClass(animal) ) {
animals[animal]();
}
}
});
So, for example, if you have <body class="giraffe zebra">
it will call the animals.giraffe()
and animals.zebra()
functions.