JQuery And Object-oriented JavaScript - Howto?

I've read this and this (thanks google) But it doesn't help enough. I'd like to know, if, straight out of the box, without any plugin addons, it's possible to do something like it'

Solution 1:

JQuery never had the purpose of being a class framework. It's about page manipulation and tools (like AJAX). You can pound a nail with a fork, but why not use a hammer?

Using native JavaScript to create a class-based inheritance system is asking for trouble unless you're a highly skilled JavaScript programmer. Douglas Crockford will tell you it's possible, but he has a deep understanding if the intricacies of closure etc etc. Also, using native inheritance features becomes unsustainable very quickly if your system grows large.

I highly recommend James Coglan's JS.Class framework. The class definitions will look almost identical to your example. It's not native JS but it works fine with JQuery.

Solution 2:

If you want a near object oriented solution using javascript with jquery you can define an object in javascript that will set up your event controllers.

The second half of this post http://www.codescream.com/?p=18 covers that. but i'll write here a resume on how to make an object in javascript that you can use in a near object oriented structure.

It would look something like this:

function myObject(constructorParam1, constructorParam2, anotherOne, blabla){

  var text = "";
  // this event will be set everyTime you run myObject
  $(".foo").click(function(){
    text = $(this).text(); // copies the text inside the elements ".foo" to a local variable
    doSomething();
  });

  function aPrivateFunction1(){


  }

  function aPrivateFunction2(){

  }

  function internalAdd(a,b){
    return a+b;
  }

  var size = 1; // privateVaribale
  var name = blabla;


  if(name===undefined){
     name="No name";
  }

  aPrivateFunction1(); // run "aPrivateFunction1()

  // you can consider all code above as being part of the constructor.
  // The variables declared above are private, and the functions are private as well

  // bellow are public functions  that you can access in an OOP manner
  return {
    getSize: function(){
        return size;
    },

    setSize: function(newSize){
        size = newSize;
    },

    getName: function(){
        return name;
    },

    setName: function(newName){ 
        name = newname;
    },

    addAndTurnPositive: function(n1,n2){
        var val = internalAdd(n1,n2);
        if(val<0){
            return val*-1;
        }
        return val;
    }
  }
}

// then you can run it like
var anInstance = myObject("aaa",1234,"asdak",123);
anInstance.setSize(1234);
var t = anInstance.addAndTurnPositive(-5,2);

Solution 3:

In a word, no. jQuery doesn't offer any class and inheritance functionality. You'd need to include another library, such as klass (although there is a jQuery plugin which ties it in more closely with jQuery)