Mootools 1.2 Tutorial (21) - Class (2)_Mootools

Fdream Note: The original article seems to be missing a part, so I took it upon myself to add the following paragraph and the 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 methods of the parent class in subclasses without having to redeclare and implement the same methods. The Class class in MooTools can help us do this easily. First, we define a base class.
Reference code:

Copy code The 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 use its full functionality by creating a new class that implements it. Note that in the example below, our new class does nothing but implements the base class BaseClass.
Reference code:

Copy code The code is as follows:

// Create a file named ImplementingClass's class
var ImplementingClass = new Class({
// All I did was implement Baseclass
Implements : BaseClass
});

Now, We can create an instance of ImplementingClass and use the methods defined in BaseClass.
Reference code:

Copy code The code is as follows:

var demo_one = function() {
// Create an ImplementingClass instance
var test_class = new ImplementingClass();
// Call testFunction defined in BaseClass
test_class.testFunction();
}

demo_one()
You can also do the same thing with variables and initialization functions (constructors) in the base class. If you declare it in the implementation class (the class that implements the base class), everything you define in the base class will be transferred to the implementation class.
Note: From now on, all our examples below will use the following version of BaseClass.
Reference code:

Copy code The code is as follows:

var BaseClass = new Class( {
// Assign parameters to the inputVariable variable in this class
initialize: function(input){
this.inputVariable = input;
},
// Display the value of the variable inputVariable
testFunction : function(){
alert('BaseClass.testFunction() : ' this.inputVariable);
},
// Define an internal variable for all instances of this class
definedVariable : "Defined in BaseClass",
});
var ImplementingClass = new Class({
// Repeat:
// All we do here is implement BaseClass
Implements : BaseClass
});

The following example shows that initializers, function calls, and variables can be accessed as if they belonged to the implementation class.
Reference code:

Copy code The 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 ();
// Display the value of the variable definedVariable
alert('test_class.testVariable : ' test_class.definedVariable);
}

demo_two()
Once you Having implemented a class, you can add any functionality you want to your implementation class definition.
Reference code:

Copy code The 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 are defined in BaseClass
anotherDefinedVariable : "Also Defined in ImplementingClass",
anotherTestFunction : function(){
alert('This function is defined in ImplementingClass');
}
});

Please note that we redefined testFunction and definedVariable in the implementation class, just like we added new functions and variables. Special note: 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, just look at the example below.
Reference code:

Copy code The 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 (the value defined in BaseClass)
alert('test_class.testVariable : ' test_class.definedVariable);
// (method defined in ImplementingClass)
test_class. anotherTestFunction();
// Display the value of the variable anotherDefinedVariable (the value defined in ImplementingClass)
alert('test_class.anotherDefinedVariable : ' test_class.anotherDefinedVariable);
}

demo_three()
Extends (Extensions)
If you want to override methods and variables defined in the base class, you can use Extends. Simply replace "Implements" with "Extends" in the above code.
Reference code:

Copy code The code is as follows:

var ExtendingClass = new Class( {
// Note that Extends is used here instead of Implements
Extends : BaseClass,
// The following are all defined in BaseClass
// But we use extend instead of implements
/ / 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( ) (defined in both BaseClass and ExtendingClass)
test_class.testFunction();
// Display the value of the variable definedVariable (defined in both BaseClass and ExtendingClass)
alert('test_class. definedVariable : ' test_class.definedVariable);
}

demo_four()
Another useful feature of using extends is that it provides a function: overriding the initialization method of the base class , you can still call the initialization method in the base class. Therefore, if you define an initialization method like this in the base class:
Reference code:

Copy code The code is as follows:

initialize : function(){
alert('base class');
}

Then, the following initialization method is defined in the extension class , then two prompts will pop up showing "base class" and "extending class" respectively.
Reference code:

Copy code The code is as follows:

initialize : function(){
// Call the constructor of the parent class
this.parent();
alert('extending class');
}

If the initialization function of the parent class Parameters are required. Please make sure that the same input parameters are used in this initialization function and passed to the constructor of the parent class. In the example below, note that we don't specify any value for input - we just pass it to the parent class's constructor and it will be taken care of automatically.
Reference code:

Copy code The code is as follows:

var ExtendingClass = new Class( {
// Repeat: we are using extension methods instead of implementing
Extends: BaseClass,
initialize: function(input){
// Execute the parent class by calling this.parent Initialization method
this.parent(input);
// This way we can do some other things in the initialization method
// without completely overriding the parent class method
this.otherVariable = " Original Input Was : " input;
}
});
var demo_five = function(){
// Create our extended class instance
var test_class = new ExtendingClass('this is the input value');
// Call testFunction
test_class.testFunction();
// Display the value of 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 definition, you can also use their original classes to add functionality one at a time. In the following example, we will use a simple calculator class (calculator). When defining this class, we only gave it one function to add two numbers and one to subtract two numbers.
Reference code:

Copy code The code is as follows:

var Calculator = new Class({
// Specify two numbers during initialization
initialize: function(first_number, second_number){
this.first = first_number;
this.second = second_number;
},
/ / Add two numbers
// and return the result
add : function(){
result = this.first this.second;
alert(result);
},
// Subtract two numbers
// and return the result
subtract: function(){
result = this.first - this.second;
alert(result);
}
});

This all looks fine 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 functionality to this class, just as if we had created another class based on the Calculator class.
Reference code:

Copy code The code is as follows:

var demo_six = function(){
// Implement
// for the Calculator class and implement a method
Calculator.implement({
// Multiply two numbers
// and return the result
multiply : function() {
result = this.first * this.second;
alert(result);
}
});
// Create a Calculator class instance
var myCalculator = new Calculator (100, 50);
// Call the multiply method
myCalculator.multiply();
}

demo_six()
In the first part of the class tutorial, We use the print_r function to debug javascript. Using the implement method, we can make it very easy to print out the variable values ​​​​in a class, just implement this method in Calculator.
Reference code:

Copy code The code is as follows:

var demo_seven = function() {
// Implement a method for the Calculator class
// Used to print the content in this class
Calculator.implement({
show_class : function(){
alert(print_r(this , true));
}
});
// Create a Calculator class instance
var myCalculator = new Calculator(100, 50);
// Display class details
myCalculator.show_class();
}

demo_seven()
Code example
Although it is very concise, it is not suitable for the relatively simple calculator class. A particularly useful feature. However, since most objects in MooTools are classes created in the same way, we can use this method to extend MooTools classes to provide more functions. The following example implements a function that can display the content structure of any HTML you want to see. This functionality is now automatically added to any HTML element you interact with, so you can add a full description of the showStructure element to your element.
Reference code:

Copy code The code is as follows:

var demo_eight = function(){
Element.implement({
showStructure : function(){
var structure = '

' print_r(this, true) '

';
// Open a pop-up window
newWindow = window.open('','Element Debug','height=600,width=600,scrollbars=yes');
//Write the content into the pop-up window
newWindow. document.write(structure);
}
});
$('demo_eight').showStructure();
}

Note: To make this example To display correctly, you need to allow pop-up windows for this page first.

Learn more

Download a zip package with everything you need to get started

MooTools Class Documentation

Some really good discussions on making better use of MooTools classes