Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript OOP best practices? [closed]

Tags:

javascript

oop

I'm sick of seeing dozens of different ways of doing object oriented programming in Javascript. Can anyone just tell me which technique I should use considering I want to work on a large scale project and I want my code to be future proof?

like image 606
Olivier Lalonde Avatar asked Sep 20 '10 09:09

Olivier Lalonde


People also ask

Is JavaScript good for OOP?

JavaScript leverages its prototype nature to welcome OOP developers to its ecosystem. It also provides easy ways to creating prototypes and organize related data. True OOP languages do not perform prototyping in the background - just take note of that.

When should you not use OOPS?

These include: design patterns, abstraction, encapsulation, modularity, polymorphism, and inheritance. When not to use OOP: Putting square pegs in round holes: Don't wrap everything in classes when they don't need to be. Sometimes there is no need and the extra overhead just makes your code slower and more complex.

Is OOP an Antipattern?

The object-oriented-programming antipattern is the excessive / unnecessary use of object-oriented-programming (OOP) and OOP techniques when simple procedural functions would have sufficed, with less overhead, fewer files to navigate around, fewer indirections to follow while debugging, etc.

What are OOP practices?

Object-oriented programming aims to implement real-world entities like inheritance, abstraction, polymorphism, and encapsulation in programming. The main aim of OOP is to bind together the data and the functions that operate on them so that no other part of the code can access this data except that function.


1 Answers

These are just a few quick guidelines I've come up with, if anyone else has anything meaningful to add, I've set this answer as a community wiki so it should be easy enough for you to edit.

  1. Namespace your objects to ensure they will never conflict with third party JavaScript libraries.
    window['Andrew']['JS'] = {
        addEvent: function(el,evName) {/*Stuff*/},
        Rectangle: function(width,height) {/*Stuff*/}
    };
    So then you would create a rectangle object by using:
    var myRect = new Andrew.JS.Rectangle(14,11);
    And then your code will never interfere with, or be interfered by anybody else's Rectangle.

  2. Use a consistent naming strategy, specifically:
    • Object names should be capitalized, everything else (variables, functions) should begin with a lower case character i.e.
      var myRect = new Andrew.JS.Rectangle(14,11);
      document.write(myRect.getArea());
    • Ensure everything is meaningful, i.e. verbs for methods, nouns + adjectives for parameters.

  3. Make sure all methods and parameters are relevant to the object they belong to. e.g. In this example, the area of the rectangle can be converted to square feet using the method inSquareFeet().

    myRect.getAreaObject().inSquareFeet();
    Make sure inSquareFeet is a method of the object returned by getAreaObject() and not a method of Andrew.JS.Rectangle

  4. Use constructors, or more specifically, try as hard as possible to make sure that an object doesn't need any further initialization to be used once it has been constructed, so instead of:
    var Person = function()
    {
        this.name = "";
        this.sayHello = function ()
        {
            alert(this.name + " says 'Hello!'");
            return this;
        }
    }
    
    var bob = new Person();
    bob.name = "Bob Poulton";
    bob.sayHello();
    try:
    var Person = function(name)
    {
        this.name = name;
        this.sayHello = function ()
        {
            alert(this.name + " says 'Hello!'");
            return this;
        }
    }
    
    var bob = new Person("Bob Poulton");
    bob.sayHello();
like image 72
2 revs Avatar answered Sep 23 '22 05:09

2 revs