Why ExtendJS?
JavaScript is a great language for websites and small projects but its dynamic nature, can be unsuited, for large projects where collaboration and code-reuse is important.
ExtendJS solves this by providing a simple, yet powerful, class abstraction for JavaScript.
Easy to use.
If you are familiar with any class based programming languages such as Java, C#, ActionScript 3 or similar. you will feel right at home using ExtendJS.
Click here to get started!
Fully Open.
ExtendJS is Open Source, released under the MIT License, allowing anyone to include, build upon, fork and even sell it. In short, you can use ExtendJS pretty much as you wish without ever worrying about licenses.
You can download and host ExtendJS yourself or get started quickly by including the latest version from the cdn.
Getting started
<head> <script src="http://cdn.extendjs.org/0.2.3/extend.min.js"></script> ... </head>
To create your first class, simply call .extend on the Class object.
Creating your first class
//Create MyClass by extending Class.
var MyClass = Class.extend(function(){
//Classes can have constructors
this.constructor = function(){
//...
};
});
console.log(new MyClass() instanceof MyClass); //=> "true"
ExtendJS supports both public and private variables.
Public variables are accessible as properties on class instances.
Private variables can only be accessed inside each class instance.
Working with variables
var MyClass = Class.extend(function(){
//This is a private variable.
var privateVariable = "private variable";
//this is a public variable.
this.publicVariable = "public variable";
this.constructor = function(){
//Private variables can only be accessed inside the class instances.
console.log(privateVariable); //=> "private variable";
};
});
//Public variables can be accessed as properties on class instances.
var instance = new MyClass();
console.log(instance.publicVariable); //=> "public variable"
ExtendJS supports both public and private methods.
Public methods are accessible as properties on class instances.
Private methods can only be accessed inside each class instance.
Working with methods
var MyClass = Class.extend(function(){
//This is a private method.
function privateMethod(){
console.log("Private method executed");
}
//this is a public method.
this.publicMethod = function(){
console.log("Public method executed");
};
this.constructor = function(){
//Private methods accessed inside the class instances.
privateMethod();
};
});
//Public variables can be accessed as properties on class instances.
var instance = new MyClass();
instance.publicMethod();
//Outputs
//=> "Private method executed";
//=> "Public method executed";
To extend your own classes, simply call the extend method, exactly as you would if you where extending Class.
Public variables and methods declared on classes you extend, are automatically available on your extended class instances.
Extending your own classes
//Define MyClass
var MyClass = Class.extend(function(){
//Declare public variable
this.variable = "public variable";
});
//MyOtherClass extends MyClass
var MyOtherClass = MyClass.extend(function(){
});
var instance = new MyOtherClass();
console.log(instance.variable); //=> "public variable"
You can execute the constructor of an extended class by calling this.super.
Notice that the class scope is correctly maintained.
The super constructor
//Define MyClass
var MyClass = Class.extend(function(){
this.constructor = function(){
//Output from original class constructor
console.log("MyClass constructor");
};
});
//MyOtherClass extends MyClass
var MyOtherClass = MyClass.extend(function(){
this.constructor = function(){
//Execute the constructor of the class we extended.
this.super();
//Output from extending class
console.log("MyOtherClass constructor");
};
});
//Create instance of MyOtherClass
var instance1 = new MyOtherClass();
//Outputs
//=> "MyClass constructor"
//=> "MyOtherClass constructor"
Similarly to overloaded constructors, any method can be overloaded when extending a class.
To access an overloaded method, simply call this.super.method().
As with constructors, when an overloaded method is called via super, the scope class is correctly maintained.
Method overloading
//Define MyClass
var MyClass = Class.extend(function(){
//Decleare test method
this.testMethod = function(){
console.log("MyClass test method");
};
});
//MyOtherClass extends MyClass
var MyOtherClass = MyClass.extend(function(){
//Overload test method
this.testMethod = function(){
//Calling super instance of testMethod
this.super.testMethod();
console.log("MyOtherClass test method");
};
});
//Create instance of MyOtherClass
var instance = new MyOtherClass();
//Call test method.
instance.testMethod();
//Outputs
//=> "MyClass test method"
//=> "MyOtherClass test method"
To allow for easy event handling and timers, member methods retain their class scope, regardless of execution scope.
Advanced: Scope guarantee
//Define MyClass
var MyClass = Class.extend(function(){
//Decleare test method
this.testMethod = function(){
console.log(
"MyClass test method",
this instanceof MyClass
);
};
});
//Create instance of MyClass
var instance = new MyClass();
//Call method of class such that scope would normally be global.
setTimeout(instance.testMethod,100);
//Output after 100ms
//=> "MyClass test method", true
To enable development of projects that requires code to be executed at instance creation; ExtendJS implements the initializer method, which if defined, will be executed before the constructor.
This is helpful if you are writing complex libraries with ExtendJS.
Advanced: The initializer method
var MyClass = Class.extend(function(){
//initializer is executed before the constructor.
this.initializer = function(){
//...
};
});