From reading many articles, such as How do I include a JavaScript file in another JavaScript file? – it is apparently not possible to include one script into another.
So here’s my question – I’m concerned about JS bloat. or having too much unused code loading with pages that don’t use/need it. However, occasionally, I’ll need the same functions on multiple pages, but not all pages.
If we look at making logical sections of an online application into objects, such as ‘customers’ or ‘items’ – we may have a bunch of code that is specific to each of these ‘objects’.
As an example, I could have a ‘profile’ group of code that allows me to manage my profile, it may have multiple div-pop-ups that make use of Ajax, and for the sake of the example, lets say I’ve got a couple functions that control my “shipping address”, they control the div-pop-up, they handle the Ajax specific to that information. – lets say I have 4 functions for that purpose. But that is only part of a much larger ‘profile.js’ file that handles ALL of my ‘profile’ crud…
Now I’ve got another section of the application – such as a shopping cart – where I need to allow the user access to the “shipping address” div-pop-up and all the Ajax functionality.
I think I’d like to re-use just those functions from the profile.js – because It seems like ‘bad form’ to ‘re-write’ code that does the same thing – because then I’d have long term code maintenance issues – if I made a change – I have to remember everywhere I used that code.
So if I’m left to deduce a ‘best practice’ – given the limitations of how these technologies work – I can’t ‘nest’ and re-use js like I do server side includes OR CSS.
My code is going to have to be broken into separate files, and (theoretically) lots of smaller .js files will be used
So my <head> will look like this
<head>
<script src='smallfile_1.js'...>
<script src='smallfile_2.js'...>
...
<script src='smallfile_10.js'...>
<head>
and “IF” I need a section in another page
<head>
<script src='that_other_object_/smallfile_3.js'...>
</head>
…doesn’t the repeated TTP calls to these smaller files become overhead? In a heavy traffic application – it seems like the network and server overhead might start to become a concern, or am just making a mountain out of a mole hill?
Does 100k requests for 10 5k files, REALLY equal – 100k requests for 1 50k file?
Now that I write it out – and think about it – every image on a page IS a separate call to the server too – so maybe I’m making an issue out of something that isn’t an issue.
Can I get some feedback as to what other people are doing about JS code reuse across modules – without making a “huge” file shared across modules.
The answer to this is simple – you create a library, or a framework that contains all of the utility function you have, then you load that library on all your pages. Because of browser caching, the only time the client will have to retrieve that file is on the initial load, so even if the file is fairly large, the client will only need to load it once.
This means that some sites, such as Stack Overflow, uses only a single master JavaScript file that contains most of the code needed for all of the pages on the site to function. Even though only a few of the functions may be needed on every single page, browser caching means that this method will be more efficient.
The other way to prevent this from happening is the create a small server-side file that will combine the multiple JavaScript on the server dynamically, and serve them when the client requests for them, for example:
However, this method is not recommended because it defeats browser caching. Therefore, the best practice is usually to maintain a large master JavaScript file that contains all of the code needed for the site to function, which is cached on the initial page load.