Javascript and jQuery file structure

Question

I have created a sizable application javascript and jQuery. However my file structure is getting a bit messy!

At the moment I have one large JS file with a if ($('#myDiv').length > 0) { test at the top to only execute the code on the correct page, is this good practice?

There is also a mixture of plain JS functions and jQuery extensions in the same file e.g $.fn.myFunction = function(e) {.

I also have a few bits of code that look like this:

function Product() {
  this.sku = '';
  this.name = '';
  this.price = '';
}
var myProduct = new Product;

Basket = new Object;

My question is for pointers on good practice regarding javascript and jQuery projects.

Simeon · Accepted Answer · 2011-03-04 10:28:32Z

4

The code if ($('#myDiv').length > 0) { is not good practice. Instead, make your page specific JS as functions and execute them in the corresponding page . Like this:

var T01 = function(){
  // JS specific to Template 01
};
var T02 = function(){
  // JS specific to Template 02
};

HTML head of Template 01:

<script type="text/javascript"> $(T01); </script>

answered Mar 4, 2011 at 10:28

Simeon

5,5793 gold badges31 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alan Whitelaw Over a year ago

Thanks, I will use the function container in the future

Martin Jespersen · Accepted Answer · 2011-03-04 10:31:49Z

2

Consistency is the golden rule.

You can discuss design patterns back and forth, but if you want to have easily maintainable code where new people can come in and get an overview fairly quickly, the most important part, whatever design patterns you chose, is to have a consistent code base.

It is also the hardest thing to do - keeping your codebase clean and consistent is probably the hardest thing you can do as a programmer, and especially as a team.

answered Mar 4, 2011 at 10:31

Martin Jespersen

26.3k8 gold badges60 silver badges69 bronze badges

Comments

Andrea · Accepted Answer · 2011-03-04 10:43:07Z

Of course the first tip I can give you is to separate the jQuery extensions in their own source files. You can always serve everything together with a minification tool, so you should not worry about performance.

About the code youo mention, it could be simplified to

var Product = {
    sku: '',
    name: '',
    price: ''
}

var myProduct = objectCopy(Product);
var Basket = {};

provided you write a simple objectCopy function which loops through the object own properties and just copies them to a new object (you can make a shallow or a deep copy, according to your needs).

Finally, if you think your code is starting to get messy, you may want to learn some patterns to organize JS code, like the module pattern. Alternatively, if you are familiar with doing this on the backend, you may want to organize your application following the MVC pattern. personal advertisement - I have written myself a tiny library which helps organize your code in this fashion. There are also many other libraries for the same task, often adding other functionality as well.

If you follow the MVC pattern, your page will actually correspond to some action in some controller, and you could just start it with a call like

<script>someController.someAction()</script>

in the head of your document, hence removing the need for the manual check for #myDiv. If you use my library MCV, it will be enough to declare your body like

<body class="mcv:controller/action">

and start the application with

$(document).ready(function() {
    mcv.autostart();
});

cusimar9 · Accepted Answer · 2011-03-04 10:28:34Z

1

Yes it's good practice to put as much of your code into a seperate JS file as this could then be compressed before transmission and hence speed up download time. However no you should not have code that looks like

if ($('#myDiv').length > 0) {

on every page. Split your JS code up into manageable functions and call those as-and-when you need to.

I don't see a problem with mixing JS and jQuery functions up in the same file.

answered Mar 4, 2011 at 10:28

cusimar9

5,2876 gold badges26 silver badges31 bronze badges

2 Comments

Jamison Dance Over a year ago

Splitting your code into multiple files is better for organization, but worse for download time. Each additional javascript file is an additional HTTP request that has to happen, so this will actually increase download times. The benefits of cleaner code probably outweigh the slowdown though, and you can always find a way to combine the files in production if it becomes a problem. Also, I don't think code in multiple files can be minified any more than code in one file.

cusimar9 Over a year ago

Naturally you should combine the js files on the server, there's plenty of examples available for that

Collectives™ on Stack Overflow

Javascript and jQuery file structure

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related