jQuery/JS for different pages - best way of doing this?

Question

Apologies if this is a silly question, and I'm not even sure of the best way of wording it...

At the moment I have a site with maybe 20+ different uses of jQuery, all varying from page to page. I'm just wondering what the best way is to store this code?

• Everything in one big jquery.myfunctions.js file? And check if the element exists for each statement?
• Embed script tags into each individual page?
• Use PHP to deliver different content into script tags kinda like the above?
• Separate .js files per page? ims I don't like the sound of this at all

To be honest, I'm not even sure if jQuery does this for you, so it's okay to have multiple $('#whatever').function() loaded onto each page without any noticeable performance issues?

Any advice on this would be fantastic, probably a silly question but I want to do things the 'proper' way you know?

Thanks :-)

Answer 1

Personnally I like to have one file with all the things needed in it. It's better because once loaded, the browser can cache it and you don't care anymore.

As for coding, I may write pieces of code in different files, which I build as a single file for production.

This way, all your code is accessible anytime.

Nevertheless, you may include tags in your views/templates, so that you can trigger certain functions only on particular views/pages.

For example :

myObject = { 
    myFunctionForArticles : function(){ $('.article').each(...); },
    myFunctionForCategories : function(){ ... }
};

And within the Article view :

<script type="text/javascript">
    myObject.myFunctionForArticles();
</script>

Make sure your included javascript keeps very thin and general though. More than one liners calling a general function can lead to trouble. In theory it is not something you might call a best-practise. Choose what you feel is the right balance between tidyness and easiness to maintain (if you have few views, maybe you can make, along with the one big file containing all the heavy stuff, some short and specific js files, which are called only by the right view to trigger the right functions at load time ; if you have a lot of views, maybe including one-liner inline js tags will save you the burden to maintain a lot of short files).

Answer 2

I've recently grappled with this problem when re-starting development of a very involved web app. I decided on several patterns:

do not put inline javascript on pages in general - it prevents caching and defeats the point of separating functionality from presentation

create your own namespace - I like the DOD approach to it (http://www.dustindiaz.com/namespace-your-javascript/) So, my namespace is DG, thus all of my code is part of a single global variable called DG - which is an object, containing all of the subclasses

Create a class prototype structure, where if you're doing common things with a bit of difference between implementations

• for example, logging into different sites - you're doing logins, but, some may do it differently than others - so, create a prototype class than handles generic functionality, and then implement site-specific login functionality in classes that inherit from the prototype)

Use the Yahoo Module pattern for singletons, but don't fall in love with it - it's not useful if you have more than one instance per page of a class (http://www.yuiblog.com/blog/2007/06/12/module-pattern/)

use a require/import function to do dynamic imports of javascript

this one is an optional but great. I really like doing dependencies for javascript, so I don't have to include a ton of script tags in my code, and, it really does help with performance, as most require/import frameworks load JS on demand, not at first.