Menu
I typically put all the JavaScript scripts into one file e.g. scripts.js (the less HTTP request, the better). So, as expected, some scripts are needed for some pages, some aren't.
To target a specific page, I use something like:
if ($("body#share").length > 0) { // Place the logic pertaining to the page with ID 'share' here... } // The file / script continues... Other or better suggestions? Thanks!
Clarification: I was not looking for the pros / cons between consolidating multiple JS files into one big file and keeping multiple separate JS files. The answer for this is surely 'depends on the situation' (we know that). My question is, assuming all my JS logic is placed into one big file, how do I make a particular (chunk of) script runs only when the corresponding page is loaded? One way I used to do is using if ($('#id-of-target-element')) { /* run the script */}; is there a better way?
762
Put the code for each page in a function If you really want to keep a single page, put the code that's specific to each page in functions for those pages, and then have code in the main part of the file call the appropriate function based on location.
In case all html pages use separate javascript files, its better to keep them separate. Based on users action they will be cached on browser end.
It is generally accepted, that you should concat your scripts into one file to minimize requests and speedup pageload. Something most people don't know about, is that this rule was established before 2006 and browsers changed and improved a lot since than.
It is best to keep separate files or include all files in one file Javascript? To avoid multiple server requests, it is better to group all your JavaScript files into only one. If you're using C#.Net + ASP.Net, you can bundle your files — it is a very good way to compress your scripts.
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.
50
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.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
