Simple example of Javascript good programming style?

Question

I am struggling with Javascript. Most of my problems do not arise from lack of understanding of the language (well, that as well, but bear with me). Instead, the main issue is to understand what is good programming/code organization style.

For example, I need to have different entities (forms, text areas, tables, etc.) around in a page, and have them modified according to events, either user triggered or Ajax.

My first idea was to define one class for each entity, define methods on the prototype of these classes, then instantiate the classes binding them to specific HTML ids (either implicitly or when instantiated with new), and register handlers between events and method calls. In other words, kind of "QT-style". I soon realized that it's not trivial. You cannot register object methods directly as callbacks, you have to wrap them in a closure, etc...

Another idea I had was to declare just a bunch of callback functions, no objects, and each callback operates on global variables and on the DOM. Quick and dirty, no fuss. It's like your page is just a big object whose events are handled internally.

Every solution I could think of left me with the sensation that I was drastically misusing the tool. In the end, I don't feel comfortable because I saw very few javascript code in my programming experience, and it's very different from all the languages I have experience with. Peeking into the first stuff I download it's guaranteed to be a waste of time, as it is compressed and/or obfuscated and/or not "up to date" with the current "good javascript practices", so I am asking you a simple, powerful and clean web page plus its associated javascript code to get quickly into a proper programming/code layout style.

(I'm using jQuery, but my question is independent from that. Nevertheless, an example using jQuery would be preferred).

Answer 1

I have an example of how I make JavaScript Apps in this question. The summary is:

• Create one file for each singleton object. In your code, store ajax middle layer and ui interface in separate files
• Create a global singleton object for the 3 layers usually in the project; GUI, Backend and App
• Never use pure ajax from anywhere outside the Backend object. Store the URL to the serverside page in the Backend object and create one function that uses that URL to contact the server.
• Have a JSON class on the server that can report errors and exceptions to the client. In the Backend object, check if the returned JSON object contains an error, and call the serverError function in the GUI class to present the error to the user (or developer).

Answer 2

I learned to write JavaScript from reading Douglas Crockford's JavaScript: The Good Parts. He also has a lot of stuff online you can check out.

My basic style is to drop JavaScript's mechanisms for class creation and treat it more like Scheme by creating "objects" with closures and object literal notation. (Not sure if you have any background with Scheme; if not, this approach may feel less natural to you.) For a better explanation of how to do this, Crockford has a short essay here. Here's a short example:

var pezDispenser = (function () {
    var amount = 20;
    return {
        dispense: function () {
            if (amount > 0) }
                amount -= 1;
                alert('delicious pez!');
            } else {
                alert('no more pez!');
            }
        }
    };
}());

pezDispenser.dispense();

I've found this to be a pretty powerful and flexible approach.

Crockford also has a general style guide for the language here and here.

Hope this helps.