Mootools 1.2 Tutorial (21) - Class (2)_Mootools-JS Tutorial-php.cn

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.