Fdream Note: The original text seems to be missing part, so I took my own initiative to add the following paragraph and BaseClass code.
In today's tutorial, we will mainly learn about the implementation and inheritance (extension) of classes in MooTools. Through implementation and inheritance, we can use the parent class's methods in subclasses without having to redeclare and implement the same methods again. The Class class in MooTools can help us do this easily. First, we define a base class.
Reference code:
var BaseClass = new Class({
// Define a method testFunction
// This method pops up a dialog box
testFunction : function(){
alert('This function is defined in BaseClass');
}
});
Now that we have a base class, we can implement it by creating a new class to use its full functionality. Note that in the example below, our new class does nothing, but implements the base class BaseClass.
Reference code:
// Create a class called ImplementingClass
var ImplementingClass = new Class({
// All I do is implement Baseclass
Implements : BaseClass
});
Now we can create an instance of ImplementingClass and use the methods defined in BaseClass.
Reference code:
var demo_one = function(){
// Create an ImplementingClass instance
var test_class = new ImplementingClass();
// Call the testFunction defined in BaseClass
test_class.testFunction();
}
demo_one()
You can also do the same with variables in the base class and initialization functions (constructors). If you declare it in the implementation class (the class that implements the base class), every thing you define in the base class will be transferred to the implementation class.
Note: From now on, all of our examples below will use the following version of BaseClass.
Reference code:
var BaseClass = new Class({
// Assign parameters to the inputVariable variable in this class
initialize: function(input){
= input;
},
// Display the value of the variable inputVariable
testFunction : function(){
alert('() : ' + );
},
// Define an internal variable for all instances of this class
definedVariable : "Defined in BaseClass",
});
var ImplementingClass = new Class({
// Repeat:
// All we do here is to implement BaseClass
Implements : BaseClass
});
The following example shows that initializers, function calls, and variables can all be accessed, just as they belong to this implementation class.
Reference code:
var demo_two = function(){
// Create an ImplementingClass instance
var test_class = new ImplementingClass('this is the input value');
// Call testFunction() (defined in BaseClass)
test_class.testFunction();
// Show the value of the variable definedVariable
alert('test_class.testVariable : ' + test_class.definedVariable);
}
demo_two()
Once you have implemented a class, you can add any functionality you want to your implementation class definition.
Reference code:
var ImplementingClass = new Class({
Implements : BaseClass,
//The following functions are defined in BaseClass
definedVariable : "Defined in ImplementingClass",
testFunction : function(){
alert('This function is also defined in BaseClass');
},
// None of the following is defined in BaseClass
anotherDefinedVariable : "Also Defined in ImplementingClass",
anotherTestFunction : function(){
alert('This function is defined in ImplementingClass');
}
});
Note that we redefined testFunction and definedVariable in the implementation class just like we add new functions and variables. It is particularly important to note that if you want to define a function or variable in the implementation class that has been defined in the base class, the definition in the base class will replace the definition in the implementation class. If you don't understand, you'll know by looking at the following examples.
Reference code:
var demo_three = function(){
// Create an ImplementingClass instance
var test_class = new ImplementingClass('this is the input value');
// (Execute the method defined in BaseClass)
test_class.testFunction();
// Display the value of the variable definedVariable (value defined in BaseClass)
alert('test_class.testVariable : ' + test_class.definedVariable);
// (Methods defined in ImplementingClass)
test_class.anotherTestFunction();
// Display the value of the variable anotherDefinedVariable (value defined in ImplementingClass)
alert('test_class.anotherDefinedVariable : ' + test_class.anotherDefinedVariable);
}
demo_three()
Extends
If you want to override methods and variables defined in the base class, you can use Extends. Simply replace "Implements" in the above code with "Extends".
Reference code:
var ExtendingClass = new Class({
// Note that Extends is used to replace Implements
Extends : BaseClass,
// All the following are defined in BaseClass
// But we replaced implements with extend
// This will override the definition in BaseClass
definedVariable : "Defined in ImplementingClass",
testFunction : function(){
alert('This function is also defined in BaseClass');
}
});
var demo_four = function(){
// Create an ImplementingClass instance
var test_class = new ExtendingClass('this is the input value');
// Call testFunction() (both defined in BaseClass and ExtendingClass)
test_class.testFunction();
// Display the value of the variable definedVariable (both defined in BaseClass and ExtendingClass at the same time)
alert('test_class.definedVariable : ' + test_class.definedVariable);
}
demo_four()
Another useful feature of using extends is that it provides a function: when overriding the initialization method of the base class, you can still call the initialization method in the base class. So, if you define an initialization method like this in the base class:
Reference code:
initialize : function(){
alert('base class');
}
Then, if the following initialization method is defined in the extension class, two prompts will pop up to display "base class" and "extending class" respectively.
Reference code:
initialize : function(){
// Call the constructor of the parent class
();
alert('extending class');
}
If the initialization function of the parent class requires parameters, be sure to ensure that the input parameters are the same in this initialization function and are passed to the constructor of the parent class. In the following example, please note that we did not specify any value to input - we just passed it to the constructor of the parent class and it will be managed automatically.
Reference code:
var ExtendingClass = new Class({
// Repeat: We are using extension methods, not implementations
Extends : BaseClass,
initialize: function(input){
// Execute the initialization method of the parent class by calling
(input);
// This way we can do some other things in the initialization method
// without completely overwriting the parent class method
= "Original Input Was : " + input;
}
});
var demo_five = function(){
// Create our extension class instance
var test_class = new ExtendingClass('this is the input value');
// Call testFunction
test_class.testFunction();
// Display the value of the variable otherVariable
alert("test_class.otherVariable : " + test_class.otherVariable);
}
demo_five()
.implement() method
Not only can you use implements and extends to extend your class definitions, you can also use their original classes to add one function at a time. In the following example, we will use a simple calculator class. When defining this class, we only give it the function of adding and subtracting two numbers.
Reference code:
var Calculator = new Class({
// Specify two numbers when initializing
initialize: function(first_number, second_number){
= first_number;
= second_number;
},
// Add two numbers together
// and return the result
add : function(){
result = + ;
alert(result);
},
// Subtract two numbers
// and return the result
subtract : function(){
result = - ;
alert(result);
}
});
This all looks good if you just want to add or subtract numbers, but what if you want to multiply them? Using the .implement(); method, we can add a function to this class, just like we have created another class with the Calculator class as the base class.
Reference code:
var demo_six = function(){
// Implement for Calculator class
// Implement a method
({
// Multiply two numbers
// and return the result
multiply : function(){
result = * ;
alert(result);
}
});
// Create a Calculator class instance
var myCalculator = new Calculator(100, 50);
// Call the multiply method
();
}
demo_six()
In the first part of the class tutorial, we used the print_r function to debug javascript. Using the implement method, we can make it very easy to print out the variable value in a class, just implement this method in Calculator.
Reference code:
var demo_seven = function(){
// Implement a method for the Calculator class
// Used to print the contents in this class
({
show_class : function(){
alert(print_r(this, true));
}
});
// Create a Calculator class instance
var myCalculator = new Calculator(100, 50);
// Show the details of the class
myCalculator.show_class();
}
demo_seven()
Code Example
Although it is very concise, this is not a particularly useful feature for the relatively simple calculator class. However, since most objects in MooTools are classes created in the same way, we can use this way to expand MooTools' classes to provide more functions. The following example implements a feature that can display the content structure of any HTML you want to see. This feature is now automatically added to any HTML element you interact with, so you can add a complete description of the showStructure element to your element.
Reference code:
var demo_eight = function(){
({
showStructure : function(){
var structure = '<pre>' + print_r(this, true) + '</pre>';
// Open a pop-up window
newWindow = ('','Element Debug','height=600,width=600,scrollbars=yes');
// Write content into pop-up window
(structure);
}
});
$('demo_eight').showStructure();
}
Note: To make this example appear correctly, you need to allow the page to pop up first.
In today's tutorial, we will mainly learn about the implementation and inheritance (extension) of classes in MooTools. Through implementation and inheritance, we can use the parent class's methods in subclasses without having to redeclare and implement the same methods again. The Class class in MooTools can help us do this easily. First, we define a base class.
Reference code:
Copy the codeThe code is as follows:
var BaseClass = new Class({
// Define a method testFunction
// This method pops up a dialog box
testFunction : function(){
alert('This function is defined in BaseClass');
}
});
Now that we have a base class, we can implement it by creating a new class to use its full functionality. Note that in the example below, our new class does nothing, but implements the base class BaseClass.
Reference code:
Copy the codeThe code is as follows:
// Create a class called ImplementingClass
var ImplementingClass = new Class({
// All I do is implement Baseclass
Implements : BaseClass
});
Now we can create an instance of ImplementingClass and use the methods defined in BaseClass.
Reference code:
Copy the codeThe code is as follows:
var demo_one = function(){
// Create an ImplementingClass instance
var test_class = new ImplementingClass();
// Call the testFunction defined in BaseClass
test_class.testFunction();
}
demo_one()
You can also do the same with variables in the base class and initialization functions (constructors). If you declare it in the implementation class (the class that implements the base class), every thing you define in the base class will be transferred to the implementation class.
Note: From now on, all of our examples below will use the following version of BaseClass.
Reference code:
Copy the codeThe code is as follows:
var BaseClass = new Class({
// Assign parameters to the inputVariable variable in this class
initialize: function(input){
= input;
},
// Display the value of the variable inputVariable
testFunction : function(){
alert('() : ' + );
},
// Define an internal variable for all instances of this class
definedVariable : "Defined in BaseClass",
});
var ImplementingClass = new Class({
// Repeat:
// All we do here is to implement BaseClass
Implements : BaseClass
});
The following example shows that initializers, function calls, and variables can all be accessed, just as they belong to this implementation class.
Reference code:
Copy the codeThe code is as follows:
var demo_two = function(){
// Create an ImplementingClass instance
var test_class = new ImplementingClass('this is the input value');
// Call testFunction() (defined in BaseClass)
test_class.testFunction();
// Show the value of the variable definedVariable
alert('test_class.testVariable : ' + test_class.definedVariable);
}
demo_two()
Once you have implemented a class, you can add any functionality you want to your implementation class definition.
Reference code:
Copy the codeThe code is as follows:
var ImplementingClass = new Class({
Implements : BaseClass,
//The following functions are defined in BaseClass
definedVariable : "Defined in ImplementingClass",
testFunction : function(){
alert('This function is also defined in BaseClass');
},
// None of the following is defined in BaseClass
anotherDefinedVariable : "Also Defined in ImplementingClass",
anotherTestFunction : function(){
alert('This function is defined in ImplementingClass');
}
});
Note that we redefined testFunction and definedVariable in the implementation class just like we add new functions and variables. It is particularly important to note that if you want to define a function or variable in the implementation class that has been defined in the base class, the definition in the base class will replace the definition in the implementation class. If you don't understand, you'll know by looking at the following examples.
Reference code:
Copy the codeThe code is as follows:
var demo_three = function(){
// Create an ImplementingClass instance
var test_class = new ImplementingClass('this is the input value');
// (Execute the method defined in BaseClass)
test_class.testFunction();
// Display the value of the variable definedVariable (value defined in BaseClass)
alert('test_class.testVariable : ' + test_class.definedVariable);
// (Methods defined in ImplementingClass)
test_class.anotherTestFunction();
// Display the value of the variable anotherDefinedVariable (value defined in ImplementingClass)
alert('test_class.anotherDefinedVariable : ' + test_class.anotherDefinedVariable);
}
demo_three()
Extends
If you want to override methods and variables defined in the base class, you can use Extends. Simply replace "Implements" in the above code with "Extends".
Reference code:
Copy the codeThe code is as follows:
var ExtendingClass = new Class({
// Note that Extends is used to replace Implements
Extends : BaseClass,
// All the following are defined in BaseClass
// But we replaced implements with extend
// This will override the definition in BaseClass
definedVariable : "Defined in ImplementingClass",
testFunction : function(){
alert('This function is also defined in BaseClass');
}
});
var demo_four = function(){
// Create an ImplementingClass instance
var test_class = new ExtendingClass('this is the input value');
// Call testFunction() (both defined in BaseClass and ExtendingClass)
test_class.testFunction();
// Display the value of the variable definedVariable (both defined in BaseClass and ExtendingClass at the same time)
alert('test_class.definedVariable : ' + test_class.definedVariable);
}
demo_four()
Another useful feature of using extends is that it provides a function: when overriding the initialization method of the base class, you can still call the initialization method in the base class. So, if you define an initialization method like this in the base class:
Reference code:
Copy the codeThe code is as follows:
initialize : function(){
alert('base class');
}
Then, if the following initialization method is defined in the extension class, two prompts will pop up to display "base class" and "extending class" respectively.
Reference code:
Copy the codeThe code is as follows:
initialize : function(){
// Call the constructor of the parent class
();
alert('extending class');
}
If the initialization function of the parent class requires parameters, be sure to ensure that the input parameters are the same in this initialization function and are passed to the constructor of the parent class. In the following example, please note that we did not specify any value to input - we just passed it to the constructor of the parent class and it will be managed automatically.
Reference code:
Copy the codeThe code is as follows:
var ExtendingClass = new Class({
// Repeat: We are using extension methods, not implementations
Extends : BaseClass,
initialize: function(input){
// Execute the initialization method of the parent class by calling
(input);
// This way we can do some other things in the initialization method
// without completely overwriting the parent class method
= "Original Input Was : " + input;
}
});
var demo_five = function(){
// Create our extension class instance
var test_class = new ExtendingClass('this is the input value');
// Call testFunction
test_class.testFunction();
// Display the value of the variable otherVariable
alert("test_class.otherVariable : " + test_class.otherVariable);
}
demo_five()
.implement() method
Not only can you use implements and extends to extend your class definitions, you can also use their original classes to add one function at a time. In the following example, we will use a simple calculator class. When defining this class, we only give it the function of adding and subtracting two numbers.
Reference code:
Copy the codeThe code is as follows:
var Calculator = new Class({
// Specify two numbers when initializing
initialize: function(first_number, second_number){
= first_number;
= second_number;
},
// Add two numbers together
// and return the result
add : function(){
result = + ;
alert(result);
},
// Subtract two numbers
// and return the result
subtract : function(){
result = - ;
alert(result);
}
});
This all looks good if you just want to add or subtract numbers, but what if you want to multiply them? Using the .implement(); method, we can add a function to this class, just like we have created another class with the Calculator class as the base class.
Reference code:
Copy the codeThe code is as follows:
var demo_six = function(){
// Implement for Calculator class
// Implement a method
({
// Multiply two numbers
// and return the result
multiply : function(){
result = * ;
alert(result);
}
});
// Create a Calculator class instance
var myCalculator = new Calculator(100, 50);
// Call the multiply method
();
}
demo_six()
In the first part of the class tutorial, we used the print_r function to debug javascript. Using the implement method, we can make it very easy to print out the variable value in a class, just implement this method in Calculator.
Reference code:
Copy the codeThe code is as follows:
var demo_seven = function(){
// Implement a method for the Calculator class
// Used to print the contents in this class
({
show_class : function(){
alert(print_r(this, true));
}
});
// Create a Calculator class instance
var myCalculator = new Calculator(100, 50);
// Show the details of the class
myCalculator.show_class();
}
demo_seven()
Code Example
Although it is very concise, this is not a particularly useful feature for the relatively simple calculator class. However, since most objects in MooTools are classes created in the same way, we can use this way to expand MooTools' classes to provide more functions. The following example implements a feature that can display the content structure of any HTML you want to see. This feature is now automatically added to any HTML element you interact with, so you can add a complete description of the showStructure element to your element.
Reference code:
Copy the codeThe code is as follows:
var demo_eight = function(){
({
showStructure : function(){
var structure = '<pre>' + print_r(this, true) + '</pre>';
// Open a pop-up window
newWindow = ('','Element Debug','height=600,width=600,scrollbars=yes');
// Write content into pop-up window
(structure);
}
});
$('demo_eight').showStructure();
}
Note: To make this example appear correctly, you need to allow the page to pop up first.
More learning
Download a zip package with everything you need to start
MooTools Class Documentation
Some very good discussions about better utilizing MooTools classes