This library is a way to "sugar" some object oriented functionality in Javascript. It's syntactically based on MooTools Class.
jsOOP builds are made using Browserify using Standalone builds. This means you can use the files contained in the dist
folder either by using script tags in HTML, using RequireJS and AMD Modules, or in NodeJS using CommonJS.
So to define a class with a function called foo you'd do the following:
var NewClass = new Class({
foo: function() { }
});
There are a few reserved keywords in this library which are:
- initialize
- Extends
- parent
Initialize is used to define a constructor within a function like so:
var NewClass = new Class({
initialize: function() {
console.log( 'I AM CONSTRUCTOR ** said with transformer voice **' );
},
foo: function() { }
});
Extends is used to define inheritance of objects. Let's continue with our example and create a new class that will inherit
from NewClass
and will be called NewNewClass
.
var NewClass = new Class({
initialize: function() {
console.log( 'I AM CONSTRUCTOR ** said with transformer voice **' );
},
foo: function() {
console.log( 'I am foo of base class' );
}
});
var NewNewClass = new Class({
initialize: function() {
console.log( 'I AM CONSTRUCTOR NEW NEW' );
},
Extends: NewClass,
foo: function() {
console.log( 'I am foo of sub class' );
}
});
As a note Extends is spelt with a capital "E" since in Javascript extends
is a reserved keyword for future purposes.
Extends will also work with other non jsOOP functions/classes. For instance you could even extend jQuery.
parent
is actually a funtion which will be added to each and every Class
. It is used to call super class functions.
To note if you're extending another class and parent
is already defined this function will not be added but you can still
have the same functionality via a utility function on Class (more on that below).
For instance in our example above we could call the super classes function foo
using the following syntax:
var NewClass = new Class({
initialize: function( msg ) {
console.log( msg );
},
foo: function() {
console.log( 'I am foo of base class' );
}
});
var NewNewClass = new Class({
initialize: function() {
console.log( 'I AM CONSTRUCTOR NEW NEW' );
this.parent( 'I AM CONSTRUCTOR ** said with transformer voice **' );
},
Extends: NewClass,
foo: function() {
console.log( 'I am foo of sub class' );
this.parent();
}
});
If for some reason a class you've extended already has a property or function named parent it wont be overwritten. However you you can still have this same functionality by using a utility function built onto Class.
Class.parent( this );
The only difference is that you have to explicetely define the scope of the function you'll be calling from.
Also note that this.parent();
or Class.parent( this );
will work for constructors, getters and setters also. Getters and setters?
Yep with this library you can quickly define getters and setters. This is how you'd define getters and setters:
var TiredOfTheAboveExample = new Class({
_myProp: 0,
_secondProp: 'I EXIST',
myProp: {
get: function() {
return this._prop;
},
set: function( value ) {
this._prop = value;
}
},
secondProp: {
get: function() {
return this._secondProp;
},
set: function( value ) {
this._secondProp = value;
}
}
});