Organization javascript / jquery code

Question

I would like to get some tips on structuring javascript and jquery code. I like to use jQuery to handle dom and ajax events, etc. I wrote what seems like unsuccessful code in the past, where my entire js file consists of a bunch of anonymous jQuery functions.

I am wondering - what does a "well-structured" javascript file look like when combined with jQuery? Will there be many standard javascript functions, and then some jQuery $() functions, if necessary? Is it good to process code in a purely procedural way, or would it be better to use some OOP concepts? I always had a bunch of functions that hierarchically called each other auxiliary functions here and there, and also without objects (except for those that were used when using any random third-party library).

I'm not a javascript programmer (mostly Java), so any advice from experienced js developers would be great.

Answer 1

Honestly, I'm trying to apply MVC concepts to jQuery. As soon as you overcome about 500 lines, not doing this just makes it difficult to work with things.

Model

• Any locally cached data
• Cookies
• Read / Write to Server (AJAX)

View

• Basically all your DHTML stuff (HTML generation / manipulation, CSS changes, animations / effects, etc.)

controller

• Event handling (both user events and user events)

There are even some projects out there for this.

Answer 2

I propose an object-oriented structure, not only because the concept is modern, but for the overview, you must encapsulate functions that belong to each other.

if you have a large js file (you should have only one, for performance reasons), you will not find anything in a few weeks if you do not structure your code by functionality.

Answer 3

If you get into bed with jQuery, then my suggestion would be to get to bed completely. This means that when necessary, you need to write your own jQuery plugin code, which will be every time you want to write a function that takes a jQuery object as a parameter.

Since the nature of Javascript code for web pages is such that essentially everything happens in event loops, most procedures are pretty small. Probably the biggest piece of work is the code that initializes all the handlers. When you build an app website with many pages, you have a choice:

• Let each page be its own special snowflake with its own Javascript for its own behavior.

or

• Gather and standardize the behavior of all your pages in a single global mechanism.

I survived both, and the second method is definitely better, but it has its problems. You must stay on top of things and ensure that special cases do not cause code to appear in your HTML (or JSP) sources. Someone has to deal with performance issues of script site code trying to apply itself to every page. And, of course, you begin to grow a monstrous initialization function.

What saves me from posting services on something like this is the build step, which combines the individual script files (one per page "function", more or less, plus jQuery custom plugins) into one monolithic script to actually deploy to the server. I did this with FreeMarker, but there are many other ways to do this. A good byproduct of this step is that it is a good time to launch YUICompressor.

Answer 4

I have Peter Bailey's second answer, in which it is best to keep your MV and C separate. I found a better style for GUI widgets to create a function that initializes the widget (by creating HTML, adding a style, or adding animation events) and then adding custom event handlers for different places where it is used.

Custom events are key to multiple widgets. This makes the code less fragile for DOM changes in your GUI widgets and makes your code more readable.

For example, let's say you have a custom button that dynamically creates an HTML structure as follows:

 <div class="MyButton"><div class="button-helpful-wrapper"><img src="/blah.png"/></div></div> 

Say your initialization code adds some attenuation or something else using click events. It does not matter.

An interesting bit is when you want to use this button; to which div do you attach the 'click' event to? instead of knowing the structure of your GUI widget, it would be better to just create a new event type for the widget. For example:

 $('#MyButton_Instance1').bind('myclick', function () {...} ); 

And completely agnostic about the structure of the widget.

To make this work, all you have to do is add some bundles / triggers that proxy the actual event for your custom event. The best place to do this can be found in the widget initialization code:

 $('.MyButton').myButton(); 

Where

 myButton = function () { $(this).find('.button-helpful-wrapper').bind('click', function (event) { $(this).trigger('myclick', event); }); } 

This makes your widgets very reusable, because you are not attached to specific events of DOM objects, but rather to the general event of the widget. Give it a try.

Answer 5

First, you can use the object style approach, methods over functions

Example

 var User = { loggedin : false, name : "Robert PItt", id : 45 } 

And you can create a system element in a js file like

 if(typeof System == undefined) { System = new Object(); } System.Globals = { //Some Global Settings,uri etc in here } System.Gui = { Init : function() { if(User.loggedin == true) { this.RemoveItem("#userlogin"); } }, RemoveItem: function(form) { $(form).remove(); } } System.Gui.init(); //Within head maybe/ 

As you can see, you can create several “containers” for storing your methods inside, containers can be useful for organizing your code and sharing it at the same time, you can create things like Ajax, Tools, Security, callbacks along with the GUI etc.