How/when/where to include external javascript

Question

I'm looking for some advice on the best way to hold my JavaScript (jQuery) functions.

I am developing in MVC/razor and therefore have a layout page. I include my jQuery library and an external JavaScript file in here so it's available in every single page.

This is working well, but I am now becoming very aware of the fact that I am adding almost 300 lines of JS to EVERY page, where maybe half of that is used in any one of these pages.

One function is not in the external file and instead sits inside the HTML because I need to use variables set in my razor code.

I have a couple of questions around this arrangement:

• Is placing JS inside the HTML generally acceptable when variables set using razor are used? There does not appear to be a clean way of passing a variable into an external js file
• Should I split my functions down in to individual JS files and just include what is needed for each page in the site?
• If I were to split them into multiple files, how would that work with jQuery's (document).ready ? Do I need to use that if all the JavaScript I am including is to be used?

I'm sure this will more a matter of opinion than a black and white answer, but I want to consider all my options before moving on. Even though it works fine as is, I can't help but feel there is a better/cleaner way.

Answer 1

Remember once a user lands on your homepage and loads the javascript file it will be cached in their browser so subsequent pages will not download the Javascript again.

I would definitely keep the js separate, you could have a snippet on each page that initialise the JS that that particurlar view needs. Put something like the below in the views that need to run JS

$(document).ready(function() {
    mysite.mypage();
});

Then the function mysite.mypage() can be defined in the external JS file. 300 lines isnt the end of the world, I would say its probably too early to be worryign about optimisation.

You could always look at minifying that JS file to decrease the size. A quick and easy way to do this is here:

http://www.minifyjavascript.com/

Answer 2

Have you ever heard of require.js? http://requirejs.org/ I find it really useful.

It's a module loader so you are able to split all of your JS code into individual files and load only the ones you need on each page.

I don't know about passing a variable to an external JS file, I don't think its possible / the 'right' way.

You can make each external JS file into a function that accepts and returns parameters. Then in the page you need to use it: - include the file dependancy - call the function

Thats what I do, seems like your 2nd suggestion.

for the $(document.ready) question its really up to you. You don't have to use it but its useful for some things , check out this overview: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()