Mohamed

Beyond the borders of sanity

OOP in Javascript using MooTools

Why?

I'm not an expert JS coder/frontend engineer, but I'd love to be one someday. Maybe for some smaller programs, modular programs with split apart functions might work. But alas, this may not be the case in larger scale programs. I noticed this while working on my senior project.

Things may be nice and good on the small scale, but as they get larger, it gets less nice. It doesn't get nice at all. The problem is that sometimes one writes functions that have nothing to do with the overall program, but act like "helper" functions to other functions ... or "metafunctions". It is at cases like these that one could make use of encapsulation provided by object-oriented programs. This and other reasons might be inspirations to adapting OO JS.

OOP in pure Javascript

If we assume that OO programming is in essence, classes and inheritance, then Javascript does not directly support them. One can simulate these using what they call prototypal inheritance. I don't know much about the subject, but I've done some reading.

After reading parts of chapter 8 of Eloquent Javascript, (awesome book, by the way), I started thinking: "Why can't someone just create and object called "class" so that one can write something like :

var Person = new Class({

....//methods and attributes


});

But I was right, some Javascript frameworks do support this by default.MooTools is one of them.  So if you're looking for a quick and dirty way to write object-oriented programs in Javascript , mootools is the way to go. Much talking, time for some juice ;)

Classes in Mootools

The official Mootools documentation provides a great introduction to the Class object in their framework. This post is more like a repitition, while stressing on why we need OO JS.

Before digging in, lets take a look at what we need out of OOP. Personally, what I need is a simple way to define classes, support for constructors and overloading, and inheritance. I skipped out association and aggregation because it seems by default, since one of the members of the Class could be another object .. which is sufficient to achieve the two. We will now take a look at the above features in MooTools

Defining a class

One can define a new class as follows

var Person = new Class ({

//rest of class


});

//creating an object


var p1 = new Person();

Adding default constructor

As follows:

var Person = new Class ({

  //constructor


  initialize: function(name, age) {

  this.name = name;

  this.age = age;

  }

});

Constructor overloading

Overloading is a JS thing, not mootools:

var Person = new Class ({
//constructor

initialize: function(name, age) {

if (name) //if not null


   this.name = name;

else

   this.name = "Ahmed"; //default value


if (age)

   this.age = age;

else

   this.age = 19;
}

});

I can't think of a cleaner way of doing this, so if someone can, please inform me.

Inheritance

Let's say we want to inherit the class person by another Class, Student. We use the keyword Extends, which "should be the first property in a class definition."

var Student = new Class({

Extends: Person,

initialize: function(name,age,gpa)

   this.parent(name,age); //call parent constructor


   this.gpa = gpa;

});

Adding other functions

Adding other methods (functions to the class) is rather simple:

var Student = new Class({

Extends: Person,

initialize: function(name,age,gpa) {

this.parent(name,age); //call parent constructor


this.gpa = gpa;
},
//********** addtogpa method

addToGpa: function(v) {
   this.gpa += v;
  }
});

More details

For more details, consult their official documentation. If you have any comments about the tutorials, please say them bellow.  Happy coding !

← Back


The people have spoken


comments powered by Disqus