Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
87 views

Jquery - Object Oriented Programming

jQuery supports object-oriented programming through class-like structures, allowing developers to organize their code. [1] Classes can contain attributes and methods. [2] While jQuery classes do not support true encapsulation, they allow for organization which is important in complex applications with many DOM elements and interactions. [3] Developers can extend jQuery objects with additional methods to group common functionality together for readability and reuse.

Uploaded by

sudhirbmali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
87 views

Jquery - Object Oriented Programming

jQuery supports object-oriented programming through class-like structures, allowing developers to organize their code. [1] Classes can contain attributes and methods. [2] While jQuery classes do not support true encapsulation, they allow for organization which is important in complex applications with many DOM elements and interactions. [3] Developers can extend jQuery objects with additional methods to group common functionality together for readability and reuse.

Uploaded by

sudhirbmali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

PROGRAMMING

jQuery – Object Oriented Programming

OOPS!! Am not screaming. I mean Object oriented programming.

OOPS here , OOPS there and OOPS everywhere. Does jQuery support object oriented programming?

The answer is a big YES*.

I put a * next to YES. Did you see that. It means Conditions Apply. We will talk about the conditions apply later.

Class Declaration

Let us create a simple class.

var simpleClass = { };

Thats it?. A ributes? Methods ?. Where are they?. Lets see how can we fit those in inside this empty class.

Attributes and Behaviours


var simpleClass = {

testAttribute : 'test', // atttribute

testMethod : function() //method


{ return testAttribute; }

};

Now we instantiate this Object.

var simpleClassObj = new simpleClass();

Perfect!!!!.

Conditions Apply

Private Variable

There aint any private variables here. To access the testA ribute, just use

simpleClassObj.testAttriute;
Enough!!

Dynamic Attribute Insertion

Suppose, i use the statement

simpleClassObj.testAttribute2 = 'test2';

Do you think, it will work. compilation error??. Duh!. It will still work. Our exceptional system will modify the source class for us ( Amazing huh!!).

You can clearly see, jQuery has sold the encapsulation feature for duck typing. Only god knows, the actual state of an object here.

Why OOPS in jQuery

Now, the question. If not for encapsulation, why do we need to go for OOPS approach in jQuery. The answer is Organization.

Consider a simple example HTML;

<input type="text" name="test-name" id="test-id" class="test-class" style="test-style"/>

If you want to manipulate this dom object in jQuery , you go to do this


$('#test-id').val() // get value
$('#test-id').attr('name') // get name
$('test-id').html() //get inner HTML

Can you see, these three simple statements have absolutely no similarity (except the object part). Imagine a similar style of code , in a page which
has plenty of dom objects and widgets. Do you think its easy to understand??.

Now lets convert this to a simple object

Lets create a simple abstract class ( Dont search for the abstract keyword. We dont have one. if you want an abstract class, be er YOU dont
instantiate it)
var syndrome = {

doHide : function(){
this.hide('slow');
},

doShow : function(){
this.show( 'slow' );
},

doDisable : function(){
this.attr('disabled', 'disabled');
},

toggle : function(){
this.toggle();
},

getStyle : function(){
return this.attr('style');
},

setForeground : function(color){
var style = 'color:'+color+';';
this.attr('style', style+this.getStyle());
},

setBackground : function(color){
var style = 'background-color:'+color+';';
this.attr('style', style+this.getStyle());
},

getName : function(){
return this.attr('name');
},

getValue : function(){
return this.attr('value');
},

getClass : function() {
return this.attr('class');
},

getContent : function(){
return this.html();
}
};

Its easily readable, you can see what am doing. Just put some common methods. Now , lets see how can we use this in our above example.

var testObj = $('#test-id'); //get the dom object

$.Extend( testObj, syndrome ); //extending the abstract class. So , the method should be available here.
testObjtestObj.getValue(); // Get value
testObj.getName(); // Get Name
testObj.getContent(); // Get content

Now this looks neat and clean. Now Imagine the same scenario, a lot of components and widgets. What will you have . Just a list of $.Extend
statements with pure object interaction.

Clean!. Try it!. you will love it.

You might also like