Javascript is more than capable of being programmed in an object orientated manner, although there are several debates out there as to whether it is truly OO programming.

Object-Oriented Programming in Javascript

Typically when you're developing a website, you'll follow the Model-View-Controller (MVC) paradigm. In that, you can set up a view which loads your template, required CSS and Javascript. If you've got an interactive web-app or an application that'll automatically refresh and pull in recent information, you'll need to implement some front-end equivalent of your Model that can communicate and act as the middle man between the server and the client.

This is where Javascript classes come into play. We typically put together a class that mirrors the Models we're using to churn the data in our application.

Given this example:


class Status {
    private $text = '';
    private $time = 0;
    public function getText() {
        return $this->text;
    }
    public function getTime() {
        return $this->time;
    }
}
class StatusModel {
    private $data = array();
    public function getItems() {
        $this->data[] = new Status('Some text', time());    
    }
}

Now let's convert this over to Javascript that we can use to store the data we fetch. If we want to create a class called 'StatusModel', we can use:


var Status = new function() {
    this.text = '';
    this.time = 0;
    this.Status = function(text, time) {
        this.setText(text);
        this.setTime(time);
    };
    this.setText = function(text) {
        this.text = text;
    };
    this.setTime = function(time) {
        this.time = time;
    };
    this.getText = function() {
        return this.text;
    };
    this.getTime = function() {
        return this.time;
    };
};
var StatusModel = new function() {
    this.data = [];
    this.interval = 0;
    this.initialize = function(fetchInterval) {
        this.interval = fetchInterval;
    };
    this.getData = function() {
        return this.data;
    };
    this.updateData = function() {
        // Some function to fetch our data
        // .. return into a var data
        for(var i = 0; i < data.length; i++) {
            // Create a new instance of the 'Status' class
            this.data.push(
                new Status(data.text, data.time)
            );
        }
    };
}();

We've now got classes for both the PHP and Javascript. Though we've not tackled inheritance or polymorphism of objects, we're now able to create simple classes that we can instantiate and re-use.

An alternative is for us to define a default class that we can implement across all of our objects. Take this example:


var Class = function(methods) { 
    // Using var acts as a private call  
    var instance = function() {    
        this.initialize.apply(this, arguments);
    };  
    // Whatever we pass in, store as a method
    for(var property in methods) { 
            instance.prototype[property] = methods[property];
    }
    // By default, setup an initialise stub
    if(!instance.prototype.initialize) {
        instance.prototype.initialize = function(){};      
     }
        return instance;    
};
var StatusModel = Class({
    initialize: function(fetchInterval) {
                this.interval = fetchInterval;
    },
       getData: function() {
        return this.data;
    },
    updateData: function() {
        // Some function to fetch our data
        // .. return into a var data
        for(var i = 0; i < data.length; i++) {
            // Create a new instance of the 'Status' class
            this.data.push(
                new Status(data.text, data.time)
            );
        }
    }
});

Next time we'll look at how we can override and inherit other classes using our setups and the prototype methods.

18
Ignite your brand, utilise user-generated content no matter where you or your audience are ›