One JS File for Multiple Pages [closed]
I like Paul Irish's approach... you don't have to follow it exactly, but the general idea is a very solid one.
It might look something like this for your example
Html
<body id="share">Your page specific javascript
YourNamespace = { share : { init : function(){ // Place the logic pertaining to the page with ID 'share' here... } }}Paul Irish's Javascript that makes the magic happen
UTIL = { fire : function(func,funcname, args){ var namespace = YourNamespace; // indicate your obj literal namespace here funcname = (funcname === undefined) ? 'init' : funcname; if (func !== '' && namespace[func] && typeof namespace[func][funcname] == 'function'){ namespace[func][funcname](args); } }, loadEvents : function(){ var bodyId = document.body.id; // hit up common first. UTIL.fire('common'); // do all the classes too. $.each(document.body.className.split(/\s+/),function(i,classnm){ UTIL.fire(classnm); UTIL.fire(classnm,bodyId); }); UTIL.fire('common','finalize'); }};// kick it all off here $(document).ready(UTIL.loadEvents);So the line you see directly above will kick off the following
YourNamespace.common.init()YourNamespace.share.init()YourNamespace.common.finalize()Have a read of his blog post and a few of the variations linked from it.
Similar questions have been already asked and the correct answer was and always will be
It depends on the situation.
However, if your concern is about minimizing the round-trip time (RTT) then it is certain that
Combining external scripts into as few files as possible cuts down on RTTs and delays in downloading other resources.
It is good to keep it as few as possible, but you don't necessarily have to keep it into one file strictly.
Let's take a look at why it is so.
While partitioning code into modular software components is a good engineering practice, importing modules into an HTML page one at a time can drastically increase page load time. First, for clients with an empty cache, the browser must issue an HTTP request for each resource, and incur the associated round trip times. Secondly, most browsers prevent the rest of the page from from being loaded while a JavaScript file is being downloaded and parsed.
These images show it more clearly why combining a number of JavaScript files into fewer output files can dramatically reduce latency:
All files are downloaded serially, and take a total of 4.46 seconds to complete.
After collapsing the 13 js files into 2 files:
The same 729 kilobytes now take only 1.87 seconds to download
Edit after Clarification given by Siku-Siku.Com:Sorry! I totally misunderstood your question. I don't know of any better way for making a particular (chunk of) script run only when the corresponding page is loaded. I think your way is good enough.
Your suggestion seems OK. I would however use an HTML 5 data- attribute to tag every page like this:
<body data-title="my_page_title">You can then write conditional javascript code by checking this property (jQuery 1.4.3 onwards):
if ($("body").data("title") === "my_page_title") { // Place the logic pertaining to the page with title 'my_page_title' here...}This allows you to systematically group all code for a certain page in a sensible way