Mootools 1.2 tutorial (21) -- class (2)

Document directory

• Learn more

Fdream note: the original text seems to be missing, so I added the following and BaseClass code with my own opinions.
In today's tutorial, we will mainly learn the implementation and inheritance (Extension) of classes in MooTools ). Through implementation and inheritance, we can use the parent class method in the subclass, without the need to re-declare and implement the same method. The Class in MooTools can help us easily achieve this. First, we define a base class ).
Reference code: Copy 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 we have a base class. We can create a new class to implement it and use all its functions. Note: In the following example, our new class does not do anything, but implements the base class BaseClass.
Reference code:Copy codeThe Code is as follows: // create a class named ImplementingClass
Var ImplementingClass = new Class ({
// All I do is implement Baseclass.
Implements: BaseClass
});

Now we can create an ImplementingClass instance and use the method defined in BaseClass.
Reference code:Copy 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 thing for the variables in the base class and the initialization function (constructor. If you declare 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, the following BaseClass version will be used in all the examples below.
Reference code:Copy codeThe Code is as follows: var BaseClass = new Class ({
// Assign the parameter value 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 to implement BaseClass.
Implements: BaseClass
});

The following example shows that initialization programs, function calls, and variables can all be accessed, just as they belong to this implementation class.
Reference code:Copy 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 ();
// Display the value of the variable definedVariable
Alert ('test _ class. testVariable: '+ test_class.definedVariable );
}

Demo_two ()
Once you implement a class, you can add any features you want to define your implementation class.
Reference code:Copy 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 are defined in BaseClass
AnotherDefinedVariable: "Also Defined in ImplementingClass ",
AnotherTestFunction: function (){
Alert ('this function is defined in implementingclass ');
}
});

Note that we have redefined testFunction and definedVariable in the implementation class, just as we have added new functions and variables. Note: If you want to define a function or variable that has already been defined in the base class in the implementation class, the definition in the base class will replace the definition in the implementation class. If you do not understand, you can see the following example.
Reference code:Copy 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 definedVariable value (value defined in BaseClass)
Alert ('test _ class. testVariable: '+ test_class.definedVariable );
// (The method 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 the methods and variables defined in the base class, you can use Extends. Simply Replace "Implements" in the above Code with "Extends.
Reference code:Copy codeThe Code is as follows: var ExtendingClass = new Class ({
// Note that Implements is replaced by Extends.
Extends: BaseClass,
// All of the following are defined in BaseClass.
// However, we replaced implements with extend.
// This will overwrite 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 in BaseClass and ExtendingClass)
Test_class.testFunction ();
// Display the value of the variable definedVariable (both in BaseClass and ExtendingClass)
Alert ('test _ class. definedVariable: '+ test_class.definedVariable );
}

Demo_four ()
Another useful feature of extends is that it provides a function: you can still call the initialization method in the base class when overwriting the initialization method of the base class. Therefore, if you define such an initialization method in the base class:
Reference code:Copy codeThe Code is as follows: initialize: function (){
Alert ('base class ');
}

Then, if the following initialization method is defined in the extension class, two prompts are displayed: "base class" and "extending class ".
Reference code:Copy codeThe 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 requires parameters, make sure that the same input parameters in the initialization function are passed to the constructor of the parent class. In the following example, note that we didn't specify any value for the input -- we just passed it to the constructor of the parent class, which will be automatically managed.
Reference code:Copy codeThe Code is as follows: var ExtendingClass = new Class ({
// Repeat it: we are using the extension method instead of the implementation method.
Extends: BaseClass,
Initialize: function (input ){
// Call this. parent to execute the initialization method of the parent class
This. parent (input );
// In this way, we can do some other things in the initialization method.
// Method without completely overwriting the parent class
This. otherVariable = "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
You can not only use implements and extends to extend your class definitions, but also use their original classes to add a function at a time. In the following example, we will use a simple calculator class. When defining this class, we only gave it a function to add and subtract two numbers.
Reference code:Copy codeThe 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 );
}
});

If you only want to perform addition or subtraction operations on numbers, all this looks good, but what if you want to perform multiplication on them? Using the. implement (); method, we can add a function to this class, just as we have created another class with the Calculator class as the base class.
Reference code:Copy codeThe Code is as follows: var demo_six = function (){
// Implement the Calculator class
// 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 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, as long as this method is implemented in Calculator.
Reference code:Copy codeThe Code is as follows: var demo_seven = function (){
// Implement a method for the Calculator class
// 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 the class details
MyCalculator. show_class ();
}

Demo_seven ()
Sample Code
Although concise, this is not a particularly useful function for relatively simple calculators. However, because most objects in MooTools are classes created in the same way, we can use this method to expand the classes of MooTools and provide more functions. The following example provides a function to display any HTML content structure you want to view. This function is now automatically added to any HTML element that interacts with you. Therefore, you can add a complete description of the showStructure element to your element.
Reference code:Copy codeThe Code is as follows: var demo_eight = function (){
Element. implement ({
ShowStructure: function (){
Var structure = '<pre>' + print_r (this, true) + '</pre> ';
// Open a pop-up window
NewWindow = window. open ('', 'element debug', 'height = 600, width = 600, scrollbars = yes ');
// Write the content to the pop-up window
Newmediaworkflow Doc ument. write (structure );
}
});
$ ('Demo _ eight '). showStructure ();
}

Note: To display this example correctly, you must first allow the pop-up window on this page.
Learn more

Download a zip package containing everything you need

MooTools Class document

Some very good discussions on making better use of the MooTools class