JQuery and object oriented JavaScript - howto?

Question

I read this and this (thanks to Google) But this does not help. I would like to know if, right out of the box, without any plugins, it is possible to do something like a prototype, for example:

MyClass = Class.create(Table, { cookieName: 'w_myclass', prefix: 'myclass', ...blabla... // function initStr: function() { ...blabla... }, // another function getIndice: function(param) { ...blabla... return 0; } }); 

Any idea / suggestions are welcome.

Answer 1

If you want to use an object-oriented solution using javascript with jquery, you can define an object in javascript that will configure your event controllers.

The second half of this post http://www.codescream.com/?p=18 describes this. but I will write here a summary on how to make an object in javascript that can be used in an object-oriented structure.

It will 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); 

Answer 2

JQuery never intended to be a class structure. This is about manipulating pages and tools (e.g. AJAX). You can hammer a nail with a fork, but why not use a hammer?

Using native JavaScript to create a class-based inheritance system is a nuisance if you are not a highly skilled JavaScript programmer. Douglas Crockford will tell you that this is possible , but he has a deep understanding if the subtleties of closing, etc. In addition, using your own inheritance functions becomes unstable very quickly if your system grows.

I highly recommend James Coglan JS.Class . Class definitions will look almost identical to your example. This is not native JS, but it works great with jQuery.

Answer 3

In a word, no. jQuery does not offer any class and inheritance functions. You will need to add another library, for example klass (although there is a jQuery plugin that links it more closely with jQuery)