Where to put JavaScript configuration functions?

Question

What is the general developer opinion on including javascript code on the file instead of including it on the script tag.

So we all agree that jquery needs to be included with a script file, like below:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
         type="text/javascript"></script>

My question is, in order to get functions on a page that is not on all pages of a site. Do we include the functions like below in the same page or in a global include file like above called mysite.js.

$(document).ready(function(){
$(".clickme").click(function(event){
  alert("Thanks for visiting!");
 });
});

ok. So the question is: if the code above is going to be called in every class="clickme" on a specific pages, and you have the ability to call it either from an include separate file called mysite.js or in the content of the page. Which way will you go?

---

Arguments are:

• If you include it on the page you will only call it from those specific pages that the js functionality is needed.

• Or you include it as a file, which the browser cached, but then jquery will have to spend x ms to know that that function is not trigger on a page without "clickme" class in it.

---

EDIT 1: Ok. One point that I want to make sure people address is what is the effect of having the document.ready function called things that does not exist in the page, will that trigger any type of delay on the browser? Is that a significant impact?

Answer 1

First of all - $("#clickme") will find the id="clickme" not class="clickme". You'd want $(".clickme") if you were looking for classes.

I (try to) never put any actual JavaScript code inside my XHTML documents, unless I'm working on testing something on a page quickly. I always link to an external JS file to load the functionality I want. Browsers without JS (like web crawlers) will not load these files, and it makes your code look much cleaner to the "view source".

If I need a bit of functionality only on one page - it sometimes gets its own include file. It all depends on how much functionality / slow selectors it uses. Just because you put your JS in an external JS file doesn't mean you need to include it on every page.

The main reason I use this practice - if I need to change some JavaScript code, it will all be in the same place, and change site wide.

As far as the question about performance goes- Some selectors take a lot of time, but most of them (especially those that deal with ID) are very quick. Searching for a selector that doesn't exist is a waste of time, but when you put that up against the wasted time of a second script HTTP request (which blocks the DOM from being ready btw), searching for an empty selector will generally win as being the lesser of the two evils. jQuery 1.3 Performace Notes and SlickSpeed will hopefully help you decide on how many MS you really are losing to searching for a class.

Answer 2

I tend to use an external file so if a change is needed it is done in one place for all pages, rather than x changes on x pages.

Also if you leave the project and someone else has to take over, it can be a massive pain to dig around the project trying to find some inline js.

Answer 3

My personal preference is

• completely global functions, plugins and utilities - in a separate JavaScript file and referenced in each page (much like the jQuery file)

• specific page functionality - in a separate JavaScript file and only referenced in the page it is needed for

Remember that you can also minify and gzip the files too.

I'm a firm believer of Unobtrusive JavaScript and therefore try to avoid having any JavaScript code in with the markup, even if the JavaScript is in it's own script block.

Answer 4

I agreed to never have code in your HTML page. In ASP.net I programmatically have added a check for each page to see if it has a same name javascript file.

Eg. MyPage.aspx will look for a MyPage.aspx.js

For my MVC master page I have this code to add a javascript link:

        // Add Each page's javascript file
        if (Page.ViewContext.View is WebFormView)
        {
            WebFormView view = Page.ViewContext.View as WebFormView;
            string shortUrl = view.ViewPath + ".js";
            if (File.Exists(Server.MapPath(shortUrl)))
            {
                _clientScriptIncludes["PageJavascript"] = Page.ResolveUrl(shortUrl);
            }
        }

This works well because:

• It is automagically included in my files
• The .js file lives alongside the page itself

Sorry if this doesn't apply to your language/coding style.