Creating Classes in Prototype, MooTools

May 2, 2008 at 4:41 pm · Filed under AJAX, JavaScript, Uncategorized and tagged: AJAX, ASP.NET, Class, Internet, JavaScript, JavaScript framework, mootools, Object oriented, OOP, Prototype, Technology

I come from the object oriented world, as I’m sure many of you do. Creating a class is a great way to write portable code that is easy to understand, and easy for other developers to work with.

This is just a brief overview of how two of the more popular JavaScript frameworks implement classes. Prototype v.1.6.0.2 and MooTools v.1.11 is assumed. This is a class used in an application that is passing data back to server-side code via the ASP.NET ClientScript.RegisterClientScriptBlock functionality.

MooTools

Let’s create a new class, and add a method to the class that we’ll use later in a project.

var Filter = new Class({
initialize: function(type, value) {
this.type = type;
this.value = value;
}
});

Now let’s add our method for the class.

Filter.implement({
toReq: function() {
return this.type + ':' + this.value;
}
});

I’m using MooTools in the live application, and I’m very happy with the performance. Now let’s take a look at how to do the same thing in Prototype.

Prototype

With Prototype, we’ll create our class and it’s constructor as well as our method in the same block of code.

var Filter = Class.create({
initialize: function(type, value) {
this.type = type;
this.value = value;
},
toReq: function() {
return this.type + ':' + this.value;
}
});

The preference is entirely up to the programmer and their background, personal experience.

Comments