Javascript OOP Programming - Right

Question

I am interested in improving javascript code to be OOP correct .... Currently, I usually do something like this:

jQuery(document).ready(function () { Page.form = (function () { return { //generate a new PDF generatePDF: function () { }, //Update the list of PDFs available for download updatePDFDownloads: function () { }, /* * Field specific functionality */ field: (function () { return { //show the edit prompt edit: function (id, name) { }, //refresh the value of a field with the latest from the database refresh: function (id) { } }; }()) }; }()); }); 

After all, these are just the basic functions that I assume ... what a good resource, where can I learn to program javascript in the OOP manner, or what suggestions would you like to improve for my current programming style?

It seems I should make some kind of prototype model and inherit my form object from this prototype.

(I use jQuery instead of $ because of conflicts with prototypeJS)

Answer 1

Your question is quite wide, so I do not think that a complete answer is possible here. But here are a few points.

Regarding the code you provided. You jump on a couple of extra hoops.

• If you are not accessing the DOM in any way, there is no need to wrap the code in jQuery(document).ready()
• There is no need to return an object from a standalone anonymous function unless you close some private functions or data

The object you created can be created more simply (this is good), like this

 var Page = { form: { //generate a new PDF generatePDF: function () { }, //Update the list of PDFs available for download updatePDFDownloads: function () { }, /* * Field specific functionality */ field: { //show the edit prompt edit: function (id, name) { }, //refresh the value of a field with the latest from the database refresh: function (id) { } } } }; 

It’s easier to read and confuse, just do what buys you. see cargo cult planning

Here is an example of using an anonymous self-starting function to create private members

 var Obj = (function() { privateFunction( param ) { // do something with param } var privateVar = 10; return { // publicMethod has access to privateFunction and privateVar publicMethod: function() { return privateFunction( privateVar ); } } })(); 

The structure you used, object literals are very good, as you say, when grouping a set of functions (methods) and properties. This is a kind of namespace. This is also a way to create a Singleton . You can also create many objects of the same class.
JavaScript does not have classes, such as the traditional OO languages ​​(I will get to this), but at the simplest level it’s very simple to create a “template” for creating objects of a certain type. These "patterns" are normal functions called constructors.

 // a constructor // it creates a drink with a particular thirst quenchingness function Drink( quenchingness ) { this.quenchingness = quenchingness; } // all drinks created with the Drink constructor get the chill method // which works on their own particular quenchingness Drink.prototype.chill = function() { this.quenchingness *= 2; //twice as thirst quenching } var orange = new Drink( 10 ); var beer = new Drink( 125 ); var i_will_have = ( orange.quenchingness > beer.quenchingness ) ? orange : beer; //beer var beer2 = new Drink( 125 ); beer2.chill(); var i_will_have = ( beer2.quenchingness > beer.quenchingness ) ? beer2 : beer; //beer2 - it been chilled! 

There is a lot to know about designers. You will have to search around. There are many examples on SO.
Inheritance, the foundation of OO, is not intuitive in js because it is a prototype. I will not go into this because you most likely will not directly use your own prototype inheritance paradigm. This is because there are libraries that very effectively mimic classical inheritance, Prototype (inheritance) or mootools (class) . There are others there .

Many say that inheritance is overestimated in OO and that you should support composition , and this leads me to what I initially decided to recommend when I started this incoherent answer.

JavaScript design patterns are just as useful as any OO language, and you should familiarize yourself with them.

I recommend that you read JavaScript design patterns . There that he

Answer 2

Some good sources for object oriented JavaScript and JavaScript in general ...

Online Articles

• How to and quot; create custom object in javascript?
• https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript
• http://mckoss.com/jscript/object.htm
• http://ejohn.org/blog/simple-javascript-inheritance/
• JavaScript: how to get private, privileged, public and static members (properties and methods)

Books

• JavaScript: Good Details - Douglas Crockford
• Object Oriented JavaScript - Stoyan Stefanov

Hope this helps. Christo

Answer 3

There is more than one right way ... Some people use the framework to define their object, I like just extending the prototype directly. Anyway, I wanted to say that Oran Loney has good positions in the mechanics of OO in JS:

http://oranlooney.com/classes-and-objects-javascript/

Also worth a look at his other articles:

http://oranlooney.com/deep-copy-javascript/ http://oranlooney.com/functional-javascript/

Answer 4

Top 3 I suggest reading

• JavaScript and Object Oriented Programming (OOP)

• Classic JavaScript Inheritance

• JavaScript prototype inheritance

Good reading!

Answer 5

The code we use follows this basic structure:

 //Create and define Global NameSpace Object ( function(GlobalObject, $, undefined) { GlobalObject.Method = function() { ///<summary></summary> } }) (GlobalObject = GlobalObject || {}, jQuery); //New object for specific functionality ( function(Functionality.Events, $, undefined) { //Member Variables var Variable; // (Used for) , (type) // Initialize GlobalObject.Functionality.Events.Init = function() { ///<summary></summary> } // public method this.PublicMethod = function(oParam) { ///<summary></summary> ///<param type=""></param> } // protected method (typically define in global object, but can be made available from here) GlobalObject.Functionality.ProtectedMethod = function() { ///<summary></summary> } // internal method (typically define in global object, but can be made available from here) GlobalObject.InternalMethod = function() { ///<summary></summary> } // private method var privateMethod = function() { ///<summary></summary> } }) (GlobalObject.Funcitonality.Events = GlobalObject.Funcitonality.Events || {}, jQuery ) 

The strong point is that it automatically initializes the Global object, allows you to maintain the integrity of your code and organizes each functionality in a specific group according to your definition. This structure is solid, representing all the basic syntax things you would expect from OOP without keywords. Even configuring intelisense is possible with javascript, and then defining each fragment and referencing them makes the javascript record cleaner and more manageable. Hope this layout helps!

Answer 6

I don’t think it’s important which language you use, a good OOP is a good OOP. I like to share my problems as much as possible with the help of MVC architecture. Because JavaScript is very event driven, I also use an observer design pattern.

Heres a tutorial that you can read about MVC using jQuery.