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.

Answer 1

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>