Javascript and jQuery file structure_问答_开发者

开发者 https://www.devze.com 2023-02-14 15:23 出处：网络

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 开发者_如何学JAVAcode 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.

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>

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.

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();
});

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