Object Oriented Programming with Prototype.js
Object oriented programming has been around for quite some time and was made popular by C++ back in the day. Nowadays, even web scripting languages support the paradigm. JavaScript does not have true OO but allows you to use the design pattern in your code. Today, we will dive into using object oriented programming with the popular JavaScript framework Prototype.
Prototype makes it easy to declare your own objects by using the "Class.create()" method:
var sampleObject = Class.create();
Once you do that you can start writing your class specific methods and properties inside the "prototype" object:
sampleObject.prototype = {
}
To declare private properties you simply specify the name of the property followed by a colon and the value:
sampleObject.prototype = {
linkIDs: ['mainPageLink', 'cdmScreenLink', 'adminLink', 'helpLink'],
statusMessage: '',
currentLinkID: 'myLink'
}
The important thing to remember is that each property needs to be separated from the next by a comma. As shown above, property values can be a array, a number, a string but cannot be empty value. While:
currentLinkID: 'myLink',
is valid while
currentLinkID:,
is not.
Declaring your own functions is not any different. Before we look into functions however, there is one function that requires special attention: the "initialize" function:
initialize: function() {
}
The initialize function is what JavaScript calls automatically when you create an instance of your object. If you are familiar with OO, this function is the constructor of your object. Any setup and initial requirements for using your object should be done in here.
So to get back to regular functions, they are declared in the format functionName: function() {} as in:
doSomething: function() {
}
So far your object should like like this:
var sampleObject = Class.create();
sampleObject.prototype = {
linkIDs: ['mainPageLink', 'cdmScreenLink', 'adminLink', 'helpLink'],
statusMessage: '',
currentLinkID: 'myLink',
initialize: function() {
},
doSomething: function() {
}
}
Big deal right, including that in your html page and/or a separate JavaScript file does not do anything for you. The next step in making it of any use is to actually create an instance of the object like so:
var sampleObjectInstance = new sampleObject();
Creating an instance of the object automatically calls all your code inside the "initialize" function. Here, a good practice is to wrap the creation of your object inside the windows load or dom:loaded (Prototype v1.6) event like:
Event.observe(window, 'load', function() {
var sampleObjectInstance = new sampleObject();
});
Or
document.observe("dom:loaded", function() {
var sampleObjectInstance = new sampleObject();
});
To expand on using properties inside your object, whenever you want to access a property such as "currentLinkID", you have to prefix it with "this" as in:
this.statusMessage = 'Who Am I?';
That is because inside your object's function, without "this", the code does not know about the property. The same applies to using function so you cannot simply called the "doSomething" function with:
doSomething();
but instead if you have to use:
this.doSomething();
This can get a little more complicated when it comes to using event listeners inside your code. Let me elaborate. To tie an event observer that will call the "doSomething" function when a users clicks the link with ID 'myLink', you would usually do:
$(this.currentLinkID).observe('click', this.doSomething);
While that will work, if you try to access any class properties (such as "statusMessage") inside the "doSomething" function, you will get "undefined" for their values. That is because, again as pointed out above, the function is not aware that it belongs to an object so it does not know that the object has properties. The remedy is simple, simply append .bind(this) to the function when it is tied to the event as in:
$(this.currentLinkID).observe('click', this.doSomething.bind(this));
A similar approach needs to be applied when using the prototype built-in Ajax object. If you want to tie your custom functions to the "onFailure", "onComplete" or "onSuccess" functions, you need to use the "bindAsEventListener" function:
onSuccess: this.showContent.bindAsEventListener(this)
"Bind" also needs to be used whenever you employ the "each" construct as described in Gotcha with Prototype.Bind and Arrays
Below is the full class:
var sampleObject = Class.create();
sampleObject.prototype = {
linkIDs: ['mainPageLink', 'cdmScreenLink', 'adminLink', 'helpLink'],
statusMessage: '',
currentLinkID: 'myLink',
initialize: function() {
this.statusMessage = 'Who Am I?';
$(this.currentLinkID).observe('click', this.doSomething.bind(this));
},
doSomething: function() {
alert(this.statusMessage);
new Ajax.Request(
$(this.currentLinkID).href,
{
method: 'get',
onSuccess: this.processContent.bindAsEventListener(this),
evalScripts: true
}
);
},
processContent: function(request) {
}
}
Event.observe(window, 'load', function() {
var sampleObjectInstance = new sampleObject();
});
To call the functions of the sampleObject from outside you would simply do:
sampleObjectInstance.doSomething();
While you can access it's properties with the syntax:
alert(sampleObjectInstance.statusMessage);
That concludes the basic guide to using object oriented programming with Prototype. Did I miss anything to get you started?
| Share this post: |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
