Object Oriented with jQuery , javascript

javascript is a scripting programming language that also supports Object Oriented Programming by its Prototypical Inheritance nature which is build in to the language.

most of the programmers in the world are used to Classical Object Oriented paradigm, and when they first start to do OO with javascript they will have a hard time.
Today what we except from Object Oriented are “Encapsulation”, “Inheritance”,”Polymorphism”,”Modularity” . all these features are supported in Javscript Through prototypical Inheritance.

John Resig the creator of jquery has posted a nice article about javascript inheritance that is based ba Classical Object Oriented Pattern.

Today I’m introducing a new pattern that models Classical Object Oriented in javascript which is based on jQuery .

with this new architect we can easily encapsulate our code into reusable objects which are also inheritable.

Let’s Get Started

  1. Include jQuery Library in your head tag ( our code is based on jQuery ).
  2. Create Our Class or Blueprint
  3. make a new instance of your Object through $.makeclass plugin.

How to Code our Class or Blueprint
the blueprint or class structure is Modeled by a Object Literal in javascript.
if we consider few things that I will go more in detail that would help you easily understand how it works.

  • List of all reserved keywords : “Initialize”, “Public”, “Private”, “Extend”,“Static”
  • Initialize : basically once you create a new instance of your object this method is invoked . we didn’t chose to use “constructor” cause it was a reservedword in javascript.
  • Public: all public functions and variables in your class goes inside of this Public Object.
  • Private: all private functions and variables in your class goes inside of this Private Object.
  • Static: all Static functions and variables that is only access by the Class name it also goes in the Static Object
  • For Accessing Private variables and functions through Public functions just consider private as a first argument in your function then your welcome to do any changes.

Here is a sample on how we Implement our Blueprint or Class.

 
   var Employee = {

        Initialize: function( private, name, salary ){
          private.name = name;
          private.salary = salary;
        },
        Private:{
            name: null,
            salary: null
        },
        Public:{
            getSalary: function(private){
                return private.salary;
            },
            getName: function(private){
                return private.name;
            },
            raiseSalary: function(private, byPercent){
                var raise = private.salary * byPercent / 100;
                private.salary += raise;
            }
        }

    };

here is a sample class that shows how you can access to public and private and static fields

 
 var SampleClass = {
        Initialize: function( private ){

        },
        Private:{
            getPrivateVar: function(){
                return this.privateVar;
            },
            privateVar: "private var "
        },
        Static:{
            staticVar: "staticVariable"
        },
        Public:{

            getPublicVar: function(){

                return this.publicVar;
            },
            publicVar: "test Public Var ",

            getPrivateFunc: function(private){
                return private.getPrivateVar();
            }

        }

    };

So What About Inheritance

so in this case we have to consider the following three tips

  1. use the keyword Extends for extending your parent class
  2. passing private as a first variable in the Initialize function.
  3. if you want to have access to the super class and trigger some functions in it basically you can use “this.parent” object in any function

Here is a sample on how we implement Our Inheritance

    var Manager = {
        Extends: Employee,
        Initialize: function( private, name, salary){
          this.parent.Initialize( name, salary );
          private.bonus = 0;
        },
        Private:{
            bonus: null
        },
        Public:{
            getSalary: function( private ){
              var baseSalary = this.parent.getSalary();
              return baseSalary + private.bonus;
            },
            setBonus: function( private, bonus ){
                private.bonus =  bonus;
            }
        }
    };

How we Instantiate it ?

Basically we have 2 steps

  • Step1: $.makeclass does all the magic for you
  • Step2: pass the CLASS definition as a first parameter and if you have some fields to be sent to the constructor just pass them after the class definition as an input

Here is a sample

 
$.makeclass(Employee ,"Bob miller", 50000 );

To get jQuery MakeClass Plugin :

I have also shared this project in JS Fiddle and below you can see a Demo of it :
Private:{ bonus: null }, Public:{ getSalary: function( private ){ var baseSalary = this.parent.getSalary(); return baseSalary + private.bonus; }, setBonus: function( private, bonus ){ private.bonus = bonus; } } }; var employees = []; employees[0] = $.makeclass(Employee ,”Bob miller”, 50000 ); employees[1] = $.makeclass(Employee ,”Tom johnson”, 30000 ); employees[2] = $.makeclass(Employee ,”Marry Cracker”, 40000 ); employees[4] = $.makeclass(Manager ,”Mike Austin”, 80000 ); employees[4].setBonus(5000); for( i in employees){ console.log(“name: ” + employees[i].getName() + ” , salary = ” + employees[i].getSalary() ); } });

Advertisements
By Rz Rasel Posted in jQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s