OOP framework for js and jquery

Question

I am developing a web application. The application is becoming quite complex, to the extant I decided I've got to introduce some oop concepts.

The original js oop just isn't native enough for me (I am a .net developer), and its inheritance is awful. I came across http://moo4q.com/ which looks promising, but seems to be rather new. This is quite a risk for me.

What other oops frameworks are there, to enhance my jquery / js development?

EDIT 1

I am not looking for a framework to substitute jquery, I am looking for a framework to extend it.

thank you

JS *is* object-oriented. It just isn't class-oriented. Just because *you* can't think with objects without resorting to classes doesn't mean it's not (or less) OOP. Perhaps you should try learning prototype-based OOP. — , Jun 19 '11 at 09:20
I tried. Take inheritence for example, accessing the parent's properties and method is so twisted, it takes the fun out of development — vondip, Jun 19 '11 at 09:26
Try [John Resig's approach to inheritance](http://ejohn.org/blog/simple-javascript-inheritance/). He's the guy that wrote jQuery, so his code is good. I like his implementation for inheritance. — beatgammit, Jun 19 '11 at 10:12
Maybe if you understand the way JavaScript inherits and overrides it'll help:http://stackoverflow.com/a/16063711/1641941 a good framework doesn't guarantee good oop code but a good programmer does. As far as the complications that come with a large code base that may have to be developed by multiple developers you could have a look at closure tools. — HMR, Feb 22 '14 at 06:29

score 7 · Accepted Answer · edited Mar 26 '16 at 11:23

7

Backbone.js adds some conecpts of OOP to javascript that might help you. It is very complementary to jQuery and adds on its abilities.

edited Mar 26 '16 at 11:23

Community

1
1

answered Jun 19 '11 at 10:28

Variant

17,279
4
40
65

score 4 · Answer 2 · answered Feb 22 '14 at 05:38

check out this project:

https://github.com/pylover/joop

Cross-Browser
Javascript prototype
Inheritance hierarchy
Multiple inheritance & mixins
Singleton pattern
Static members

Example:

Namespace('bmw.Car');

Class('bmw.Car', {
    maxSpeed : 200,                         // Prototype member
    __init__ : function(color,cylindres) {  // Constructor
        this.speed = 0;                     // Instance Member 
        this.color = color;
        this.cylindres = cylindres == undefined ? 4 : cylindres; 
    },
    isRunning : function() {                // Method
        return this.speed > 0;
    },
    run : function(speed) {
        this.speed = speed;
    }
}).StaticMembers({
    doors: 4,                               // Static field
    createSuperClass: function(){           // Static method
        return new this('gold',12);
    }
});

score 4 · Answer 3 · answered Jun 19 '11 at 09:11

4

You might want to consider Knockout for simplifing your UI implementation with the MVVM design pattern.

answered Jun 19 '11 at 09:11

devdigital

34,151
9
98
120

score 3 · Answer 4 · answered Jul 17 '12 at 01:18

3

Check http://ejohn.org/blog/simple-javascript-inheritance/ OOP Approach form John Resig (creator of JQuery)

answered Jul 17 '12 at 01:18

Rodrigo

31
1

score 3 · Answer 5 · answered Apr 15 '13 at 01:10

The best OO framework at the moment as far as my research tells me is http://prototypejs.org. It has a lot in common with jQuery but goes beyond jQuery in that it is also a JavaScript object oriented framework.

I disagree with the above post about light weight OO in JavaScript. When you code a big object you don't want to get stuck with lots of low level technical OO details - you just want to write tons of classes and know that you are on rock solid ground and prototype will do that for you.

What does prototype give you? a clean OO framwork that supports inheritance, constructors, mixins, clean way to call superclass methods, special class members, adding methods on the fly and much more.

Prototype can be used on the same page as jQuery. This requires the correct order of importing the two libraries and not much more. It is very small (98K minified).

score 2 · Answer 6 · answered Sep 14 '11 at 14:15

Javascript has a very elegant way to work with objects. Be careful about using libraries to implement such basic OO features. In Javascript you can write object oriented code clean and nicely:

Just use literal objects
Forget the 'new' statement and 'prototype'
Write a function that builds an object and call it a 'class'

Here is an example micro-framework (70 lines) that illustrates this:

https://github.com/schuttelaar/Rococo2/wiki/Getting-started

Notice that while this framework offers some DOM integration, it actually does not provide OO sugar functionality, instead it offers a 'coding style'.

Here is my own page explaining featherlight OOP in JS:

http://www.gabordemooij.com/jsoop.html

OOP framework for js and jquery

6 Answers6