OOP and JavaScript

Question

I have a background in OOP. I started working a lot with JavaScript. As the project grows, it becomes increasingly difficult to maintain it. In Java, I apply OOP principles to keep things under control. What should I do with JavaScript, what should I learn to keep the JavaScript application in check?

Answer 1

You can apply OOP principles to JavaScript development. Javascript uses prototype inheritance, but this is implementation detail. The concepts are the same. Most of the concepts you are familiar with have direct analogies in javascript.

Other proven methods also apply:

1) Stay dry - do not repeat yourself. Duplicate code is always evil. 2) Separate problems . Use MVC or MVVM templates to save code and do just 1 thing.
3) Test . When I hear “Hard to Support,” my brain translates this due to a lack of tests. You can, of course, write unit tests for javascript projects.
4) Code review . A code review can be a good way to reject duplicate code, code that is not created correctly, not formatted, etc.

Answer 2

This is how you define objects and methods in javascript.

function SomeObj() { this.someMethod = function() { alert('boo'); } } var o_obj = new SomeObj(); o_obj.someMethod(); //alerts "boo" 

Hope this helps.

You can also use a prototype to create static functions.

 this.prototype.someMethod = function() { alert('boo'); } 

Answer 3

When I was in the same situation, I began to look at "how another did it." He ended up getting http://dojotoolkit.org/ and http://jquery.com and I watched them implement widgets / plugins so that others could expand the scope.

Answer 4

Another way to define simple objects and methods in javascript (without the need for new ).

 function creaeSomeObj() { var that = {}; that.someMethod = function() { alert('boo'); } return that; } var o_obj = createSomeObj(); o_obj.someMethod(); //alerts "boo" 

This template does not support inheritance, but it is many times.

Answer 5

Why cons? JavaScript supports object-oriented programming, but not in the traditional, class-based way you see, for example. Java

How JavaScript OOP works is commonly called "prototype inheritance", or more specifically, "delegated prototype inheritance." This can be reduced to "if you are looking for the" foo "property in the object and you cannot find it, then try looking for" foo "inside the prototype of the object." That is, the property search is passed to the prototype of the object (we say that the object inherits the properties from the prototype).

The use of prototype inheritance has several consequences. For instance:

• Objects in JavaScript are “dynamic” in the sense that they are just a bunch of name-value pairs. New properties can be added and removed at run time, so they are much less "static" than objects in the typical sense of a class.
• How delegated prototype inheritance works ("if you can't find a prototype here, then look here") means that it is much simpler than classic OOP. From a purely prototype point of view, for example, you do not need constructors. "Methods" are simply regular functions that attach to the prototype (which means that they are available as properties for all inherited objects).

There is pro and con with prototype and classic inheritance, but it is important to remember that they are different.

Now JavaScript in some ways is inspired by Java and other classic languages, so they decided to make the syntax "class-like" to make it easier for people accustomed to classes to get started. I will not dwell on this in detail; it is largely documented elsewhere.

Some interesting posts:

• hughfdjackson's introduction to JavaScript OOP is shorter and more specific,
• Sorella for longer Understanding Javascript OOP is a fairly detailed and very complete resource.

Answer 6

Pluralsight only has a course on this topic: Structuring JavaScript code that can give some insight. Two caveats: 1. I haven’t taken the course yet, but the content looks great, and I was impressed with the other Pluralsight courses I took, and 2. it’s not free (but it can cost a little $ if it saves you time on the b / c road , you have a better code structure). No, I do not work for Pluralsight.

In addition to the js frameworks mentioned in this thread, you can also look at Knockoutjs - great lessons here learnknockoutjs.com . Knockout focused on MVVM. Note that in stackoverflow, the Backbone to Knockout comparison has a good discussion, and Pluralsight also has a course on using Knockout, which I have observed and recommend.

Answer 7

In JavaScript, functions are objects; Mozilla Developer Network, McKoss, SitePoint, and the JavaScript Kit explain further.

JavaScript object example

 function myObj() { this.myMethod = function() { alert('hello'); } } var demo_obj = new myObj(); demo_obj.myMethod(); 

Templates to keep things in check

• The samples listed here are for JavaScript.
  • Use Script Loader .
  • Use the JS Framework .
  • Draw your JavaScript. - Tools are available to run on your desktop in Rhino or node.
  • Minimize JS.
• The samples listed here are typical of OOP languages ​​and are not particularly JavaScript.
  • DRY - do not repeat yourself.
  • Sample Observer (Pub / Sub).

Anti-Patterns that let things get out of hand

• Namespace pollution
• using eval ()
• Prototyping Object
• Inline Script Tags.
• Using document.write