6

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).

Improve this question

3 Answers 3

Reset to default
3

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).
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

That's nice, hence the +1, but I'm looking for a real, working example.
3

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.

Improve this answer

4 Comments

I don't get it. Why didn't you just put amount as a variable of the returned object, instead of having it in the external scope ?
This way 'amount' becomes effectively a private variable of the returned object. It's inaccessible to outsiders. Also, here I made the closure an anonymous function, but consider if I had made it a regular function. It would be a function that generates pez dispensers, each with its own private amount variable.
Opinion: I don't like the style of "private by technology". I am a python user and I follow the philosophy that a private variable is anything having a prefix underscore, and that's it. However (fact): this way you created a singleton. You cannot create another instance unless you do as you said.
Yes, this is a single, unique instance. But it doesn't have to be. You can just name the anonymous function and refrain from invoking it immediately, and you have what amounts to a constructor. As to your "private by technology" point, we'll have to agree to disagree. Personally, I like to reduce the surface area of interfaces as much as possible and hide implementation details.
0

This Question is pretty long ago.

But I liked this page: 42 Javascript best practices (Opera)

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.