20

After playing with a dozen different JavaScript Libraries such as Prototype, jQuery, YUI, just to name a few, I found every different library has a different way of simulating some sort of Class Hierarchy and provide some sort of Class Inheritance support. (Other than jQuery) Other than being very annoyed that when you create a new class, it has to be library dependent, unless you do the plain old way.

I'm wondering which library offers the best support for class inheritance in general and why.

I hope maybe one day JavaScript Library authors can agree on one style for Class creation and inheritance.

3
  • This question is about the same topic: stackoverflow.com/questions/7486825/javascript-inheritance Commented Feb 24, 2013 at 7:06
  • 4
    Will, you should stop closing questions like this. This question is quite constructive. You are being destructive by closing this question. Thanks for nothing. Commented Jul 17, 2013 at 23:54
  • ExtJS has an extremely comprehensive class system Commented Jul 14, 2016 at 8:22

9 Answers 9

8

I found out there is a Javascript Framework modeled after Ruby:

Js.Class

Another good one is:

Joose-js (modeled after moose (perl) )

I prefer Josse, because it seems to be more actively developed, and the syntax looks neat too!

Any thoughts??? (Maybe this should be another question??)

Sign up to request clarification or add additional context in comments.

2 Comments

Sorry, I shamelessly marked myself as the preferred answer!
Unmarked myself as the preferred answer. The truth is that this question has no correct answer.
7

I think Microsoft Ajax implements it just perfectly (with namespaces, inheritance & interfaces etc.)

Sample:

Type.registerNamespace("Demo");

Demo.Person = function(firstName, lastName, emailAddress) {
    this._firstName = firstName;
    this._lastName = lastName;
    this._emailAddress = emailAddress;
}

Demo.Person.prototype = {

    getFirstName: function() {
        return this._firstName;
    },

    getLastName: function() {
        return this._lastName;
    },

    getName: function() {
        return this._firstName + ' ' + this._lastName;
    },

    dispose: function() {
        alert('bye ' + this.getName());
    }
}
Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);

// Notify ScriptManager that this is the end of the script.
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

1 Comment

7

You should try Classy:

http://classy.pocoo.org/

It is simple and really small but has everything I need when constructing my classes.

Comments

5

Check out Prototype. Here's a sample:

// properties are directly passed to `create` method
var Person = Class.create({
  initialize: function(name) {
    this.name = name;
  },
  say: function(message) {
    return this.name + ': ' + message;
  }
});

// when subclassing, specify the class you want to inherit from
var Pirate = Class.create(Person, {
  // redefine the speak method
  say: function($super, message) {
    return $super(message) + ', yarr!';
  }
});

var john = new Pirate('Long John');
john.say('ahoy matey');
// -> "Long John: ahoy matey, yarr!"

Comments

5

Base2 has simple inheritance mechanism , See John Resig's post on this (comments in the post are also interesting).

Something to also keep in mind is that trying to do simulate classic OO in Javascript has been getting lot of flak lately (although it was explored very enthusiastically in the initial days of great JS library revolution).

5 Comments

any reference on the second paragraph? Thanks!
javascript.crockford.com/inheritance.html , conclusion in the article seems interesting ..cannot find Crockford's presentation on this subject.
While I agree with Crockford that Javascript prototyping is more powerful then static inheritance (or at least as useful) his "proof" is that he invented new terms ("privileged methods", "parasitic inheritance", etc') and then shows what you can do with a lot of framework that pertains to be syntactic sugar. Which is no proof to me, just another inheritance framework which doesn't work all that great.
+1: if you want a library independent method, learn to do this w/o the abstraction of the various libraries. It's not particularly difficult once you walk through it a few times, and you get a finer level of control. But Crockford's point is larger than that: after a while, you start to find that a class hierarchy isn't always the most convenient way to model your problem domain.
Javascript Patterns By Stoyan Stefanov offers a higer level view on prototypal/closure constructs and may provide insight as to how jQuery, YUI and friends implement them. I recommend reading it after The Good Parts (and before High Performance Javascript). It's similar in size and O'Reilly sells it for peanuts in the Android Market.
2

You might also be interested in qooxdoo, a framework for creating rich internet applications (RIAs). It includes a comprehensive OO layer, which aims at being powerful, elegant and fast:

See the following section in the manual, which has all the details: http://qooxdoo.org/documentation/0.8#object_orientation

Comments

1

I find mootools to be everything I need for inheritence. It uses the basic motif of Extends and Implements of many other OO languages.

One of the developers goes over it in detail in his comparison to jquery:

http://jqueryvsmootools.com

You don't need the whole library either. You can just download their Class model and ignore the rest (animation, dom manipulation, etc).

Comments

1

Just pick whichever one "tastes" best to you. In the end, they all use prototypal inheritance behind the scenes, so they all have roughly the same level of functionality.

If you want a high-powered traditional class system, use GWT and program in pure Java.

Personally I prefer Ext's component system, but that's because Ext components actually have a full lifecycle (initialization, rendering, state persistence and destruction), which in turn allows component plugins that don't break with minor updates to the library.

1 Comment

Yes. Ext was nice, and my company used it in a project used in FIFA 2010 actually. We ended up build a framework on top of Ext, it was pretty exciting. However, I prefer joose-js as it has far more features than Ext's class system. :)
0

Well, first you should ask if you want a library that tries to emulate classical inheritance or one that goes more for JS's native prototypal inheritance.

DUI (the Digg User Interface library) is a jQuery addon that takes Prototype's old model and extends it in a much more intuitive way, allowing for nested static and dynamic classes, namespaces, support for the dontEnum bit and more. Documentation is available on Digg's GitHub. I think you'll find it pretty robust.

Disclosure: I work for Digg and wrote DUI ;)

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.