Coding in Object Oriented Javascript

Object Javascript Class

Image by Eric Peters

A warning to everyone, this is a more geeky post than normal. It is going to be about how to do [tooltip content=”A programming paradigm using “objects” data structures” url=”http://en.wikipedia.org/wiki/Object-oriented_programming” ]object oriented programming[/tooltip] in JavaScript. I have spent the last couple days working on a [tooltip content=”A JavaScript Library that is designed to make coding more efficient” url=”http://jquery.com/” ]jQuery[/tooltip] plugin, and a WordPress plugin to make a sideshow carousel of the most recent post for a blog. I will post both for free, once I have all the bugs worked out. It is the one that is running on the site.

Creating Objects

I wanted to create a [tooltip content=”A construct that is used as a blueprint to create instances of itself” url=”http://en.wikipedia.org/wiki/Class_(computer_programming)” ]class[/tooltip] to define objects of each slide. Then store the slide objects in an array. I can then store information about that particular slide, and keep all the functions that modify the slide objects in the same code base. Basically the definition of object-oriented programming. Here is how you do it.

function SlideClass(){
    this.image = null;
    this.title = null;
    this.link = null;
    this.init = function(item, options){
        this.image = jQuery(item.image).addClass("wonderImage");
        this.link = item.link;
        ...programing
    }
}
var slide = new SlideClass();
slide.init();

With this you can use make objects like normal object-oriented programming. This defines the methods internally. By using the keyword prototype, you can define methods of an object, outside the class definition.

function SlideClass(){
    this.image = null;
    this.title = null;
    this.link = null;
}
SlideClass.prototype.init = function() {
    this.init = function(item, options){
    this.image = jQuery(item.image).addClass("wonderImage");
    this.link = item.link;
    ...
}
var slide = new SlideClass();
slide.init();

Creating a Singleton

I wanted to use the function setinterval() to make the slide transition happen every so many seconds. The problem is that setinterval() calls a given function and that is it. I wanted to keep variables active throughout the entire program. For this I needed a [tooltip content=”When only one instance of a class can exist” url=”http://www.oodesign.com/singleton-pattern.html” ]singleton[/tooltip]. Unlike other languages, singletons in JavaScript are very easy.

var slideObj = {
    slideArr : null,
    imageLayer: null,
    descLayer: null,
    buttonLayer: null,
    fade : function(){
    ...
}
init : function(options){
    ...
    setInterval("wonderObj.fade()", 5000);
    ...
}


This uses JSON style syntax to create an object that will keep a state throughout the program execution. It will call fade(), and will be able to keep track of itself internally.

Conclusion

JavaScript is a great language that can be extended to do most of the things most programmers are used to. It does not mean everything in JavaScript has to be an object, that would take away several cool features of the language. However, there are times that an object oriented style of programing is exactly what is needed by the program.

No Comments

Leave a Comment

Please be polite. We appreciate that.
Your email address will not be published and required fields are marked