Minimalistic prototype (js framework)

Question

I want to use the prototype javascript framework for its "class" and inheritance capabilities. For everything else I will be using jQuery. Is there a minimalist version of prototype that will give me just this functionality? I don't want the additional overhead of the entire library if I won't be using it all.

To be specific I want the class and inheritence capabilities that allow me to define classes as follows (examples from wikipedia):

var FirstClass = Class.create( {
  // The initialize method serves as a constructor
  initialize: function () {
   this.data = "Hello World";
  }
});

and to extend another class:

MyNewClass = Class.create( FirstClass, { 
  //Override the initialize method
  initialize: function() { 
    //..
  }, 
  // ...more methods add ... 
});

Plus I don't want conflicts between the frameworks (i.e. $ should only be used by jQuery..I only want prototype (or any other suggestion would be fine) for class creation / inheritance).

Mmm, what class and inheritance capabilities are those exactly? Can you make an example? Because usually, there is a jQuery for anything under the sun.... You are not mixing this up with the JS native prototype keyword? — Pekka
– Pekka, Commented Jan 26, 2011 at 19:07
If you want a nice object oriented framework I would take a look at mootools. — Adrian
– Adrian, Commented Jan 26, 2011 at 19:12
like I mentioned. I want to be using jQuery for most functionality. But jQuery doesn't allow me to nicely define classes (with constructors) which automatically get assigned to a prototype (with the option of extending classes etc.). I could write my own functionality for this but it seems like it might make more sense to use something well established like the prototype framework — lan
– lan, Commented Jan 26, 2011 at 19:16
Ian, personally I think that jQuery is not the best choice fora JS frameworks. Prototype is syntactically better than jQuery and provides the same functionality as jQuery. — M.W. Felker
– M.W. Felker, Commented Jan 26, 2011 at 22:07
@Max The main reason I would suggest mootools over prototype is that is much closer in performance to jquery and you get that object oriented goodness. Prototype is pretty slow. — Adrian
– Adrian, Commented Jan 27, 2011 at 0:33

Uwe Heim · Accepted Answer · 2014-09-12 09:20:15Z

5

Inheritance.js was the model that the guys developing the Prototype library have been inspired from and I think it is what you where asking for.

Note: $super seems to be this.parent as stated in the comments below.

edited Sep 12, 2014 at 9:20

Uwe Heim

2103 silver badges12 bronze badges

answered Jan 26, 2011 at 22:01

mhitza

5,7152 gold badges32 silver badges52 bronze badges

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

5 Comments

Jerinaw Over a year ago

Wish i could just swap prototype for inheritance.js but it looks like they don't have $super like prototype does.

Uwe Heim Over a year ago

not useful, since no $super and reduced functionality.

mhitza Over a year ago

@UweHeim from a quick glance it seems it has this.parent which to me seems the same as $super in Prototype

Uwe Heim Over a year ago

Yeah, I didn't check it out, but if you say so, than it should be similar.

Jerinaw Over a year ago

Yes they use this.parent instead of $super. But you can't just swap Prototype.js for Inheritance.js because of that.

Christoph · Accepted Answer · 2011-01-27 10:43:57Z

If you're looking for something minimalistic:

function clone(obj)  {
    if(typeof obj !== 'undefined') {
        clone.prototype = obj;
        return new clone;
    }
}

function copy(dest, src) {
    for(var name in src) {
        if(src.hasOwnProperty(name))
            dest[name] = src[name];
    }
}

function classof(constructor) {
    return {
        extend : function(base) {
            constructor.prototype = clone(base.prototype);
            return this;
        },

        mixin : function(members) {
            copy(constructor.prototype, members);
            return this;
        }
    };
}

Example usage:

// base class:
function Foo(value) {
    this.value = value;
}

classof(Foo).mixin({
    inc : function() { ++this.value; }
});

// derived class:
function Bar() {
    Foo.apply(this, arguments);
}

classof(Bar).extend(Foo).mixin({
    dec : function() { --this.value; }
});

var bar = new Bar(42);
bar.inc();
bar.dec();

erlando · Accepted Answer · 2011-01-28 09:53:52Z

2

Don't mix Prototype and jQuery. My experience says they don't play nice together. My personal preference would be to use Prototype due to the superior syntactical sugar.

There's no way to disable Prototype's $-function. You can disable jQuery's use of $ via jQuery.noConflict() - but it's not perfect.

As @mhtiza said, use Interitance.js for the class-sugar if you decide to stick to jQuery.

answered Jan 28, 2011 at 9:53

erlando

6,7664 gold badges26 silver badges29 bronze badges

1 Comment

clockworkgeek Over a year ago

Ditto for sticking with Prototype. If you only have a need for jQuery then stick with that, but as soon as the larger Prototype is involved then jQuery is outclassed (IMO) and becomes redundant.

Jerinaw · Accepted Answer · 2014-02-17 03:56:20Z

1

For version 1.7.1 I deleted everything below line 1625 in the prototype.js file and I no longer have conflicts with bootstrap and jquery. And the Class.create function still works. The class.create is the only method I wanted as well.

answered Feb 17, 2014 at 3:56

Jerinaw

5,6197 gold badges46 silver badges56 bronze badges

1 Comment

Uwe Heim Over a year ago

I did not test everything, but at the first glance, it works like a charm. All of you jquery users, which just are looking for a better class-like support, this could be a viable option.

Collectives™ on Stack Overflow

Minimalistic prototype (js framework)

4 Answers 4

5 Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related