A simple example of a good Javascript programming style?

Question

I am struggling with Javascript. Most of my problems do not arise due to a lack of understanding of the language (well, it is also, but carry me). Instead, the main problem is to understand what a good programming / code style is.

For example, I need to have different objects (forms, text areas, tables, etc.) on the page and change them according to events triggered by the user or Ajax.

My first idea was to define one class for each entity, define methods in the prototype of these classes, and then create classes that bind them to certain HTML identifiers (either implicitly or when creating instances with new ones), and registration handlers between events and method calls. In other words, this is a "QT style." I soon realized that this was not trivial. You cannot register object methods directly as callbacks, you must wrap them in closure, etc.

Another idea I had was to declare only a bunch of callback functions, no objects, and each callback works with global variables and the DOM. Fast and dirty, no fuss. It looks like your page is just a big object, whose events are handled internally.

Every decision I could think of left me with the feeling that I was resolutely abusing the instrument. In the end, I don’t feel comfortable because I have seen very little javascript code in my programming experience, and it is very different from all the languages ​​with which I have experience. Looking into the first material I download, it is guaranteed to be a waste of time, as it is compressed and / or tangled and / or not “updated” with the current “good javascript practices,” so I ask you for a simple, powerful and clean web page plus its associated javascript code to quickly fit into the correct code / code layout style.

(I use jQuery, but my question is not dependent on this. However, it is preferable to use the jQuery example).

Answer 1

I have an example of how I am making JavaScript applications in this matter . Summary:

• Create one file for each single object. In your code, save the middle ajax layer and the ui interface in separate files.
• Create a global singleton object for three levels, usually in a project; GUI, Backend and Application
• Never use pure ajax from anywhere outside the Backend object. Store the URL on the server page in the Backend object and create one function that uses this URL to communicate with the server.
• You have a JSON class on the server that can report errors and exceptions to the client. In the Backend object, verify that the returned JSON object contains an error and calls the serverError function in the GUI class to present the error to the user (or developer).

Answer 2

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

My basic style is to abandon JavaScript mechanisms for creating classes and treat it more like a circuit, creating "objects" with closure and object literature. (I'm not sure that you have any prerequisites for the Scheme, and if not, this approach may seem less natural to you.) For a better explanation of how to do this, Crockford has a short essay here . Here is a quick 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 found this to be a fairly powerful and flexible approach.

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

Hope this helps.

Answer 3

This question has been around for quite some time.

But I liked this page: 42 Best Practices Javascript (Opera)