Fdream Note: The original text seems to be missing a part, so I took the liberty to add the following paragraph and the BaseClass code.
In today's tutorial, we will focus on 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 declare and implement the same method. Class classes in MooTools can help us do this easily. First, we set a base class.
Reference code:
Copy Code code as follows:
var baseclass = new Class ({
Define a method TestFunction
This method pops up a dialog box
Testfunction:function () {
Alert (' This function was defined in BaseClass ');
}
});
Now that we have a base class, we can use all of its functionality by creating a new class to implement it. Note that in the following example, our new class doesn't do anything, but only implements the base class BaseClass.
Reference code:
Copy Code code as follows:
Create a class called Implementingclass
var implementingclass = new Class ({
All I've done is realize baseclass.
Implements:baseclass
});
Now we can create an instance of Implementingclass and use the method defined in BaseClass.
Reference code:
Copy Code code as follows:
var demo_one = function () {
Create a Implementingclass instance
var test_class = new Implementingclass ();
Invoke the testfunction defined in the 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 in the implementation class (the class that implements the base class), each of the things 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 Code code as follows:
var baseclass = new Class ({
Assign the parameter to the inputvariable variable in this class
Initialize:function (Input) {
this.inputvariable = input;
},
Displays 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 ({
I repeat:
All we do here is just to realize baseclass.
Implements:baseclass
});
The following example shows that initialization programs, function calls, and variables can be accessed as if they were part of the implementation class.
Reference code:
Copy Code code as follows:
var demo_two = function () {
Create a Implementingclass instance
var test_class = new Implementingclass (' This is the input value ');
Call TestFunction () (defined in BaseClass)
Test_class.testfunction ();
Displays 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 the definition of your implementation class.
Reference code:
Copy Code code as follows:
var implementingclass = new Class ({
Implements:baseclass,
The following features are defined in BaseClass
Definedvariable: "Defined in Implementingclass",
Testfunction:function () {
Alert (' This function was also defined in BaseClass ');
},
None of the following is defined in the BaseClass
Anotherdefinedvariable: "Also Defined in Implementingclass",
Anothertestfunction:function () {
Alert (' This function was defined in Implementingclass ');
}
});
Note that we have redefined testfunction and definedvariable in the implementation class, just as we add new functions and variables. It is particularly noteworthy that if you want to define a function or variable in the implementation class that has already been defined in the base class, the definition in the base class replaces the definition in the implementation class. If you do not understand, look at the following example to know.
Reference code:
Copy Code code as follows:
var demo_three = function () {
Create a Implementingclass instance
var test_class = new Implementingclass (' This is the input value ');
(Perform the method defined in BaseClass)
Test_class.testfunction ();
Displays the value of the variable definedvariable (values defined in BaseClass)
Alert (' test_class.testvariable: ' + test_class.definedvariable);
(method defined in Implementingclass)
Test_class.anothertestfunction ();
Displays the value of the variable anotherdefinedvariable (values defined in Implementingclass)
Alert (' test_class.anotherdefinedvariable: ' + test_class.anotherdefinedvariable);
}
Demo_three ()
Extends (Extended)
If you want to overwrite the methods and variables defined in the base class, you can use extends. Simply replace the "Implements" in the above code with "Extends".
Reference code:
Copy Code code as follows:
var extendingclass = new Class ({
Note that this replaces the implements with extends.
Extends:baseclass,
The following are defined in the BaseClass
But we replaced implements with extend.
This will overwrite the definition in the BaseClass
Definedvariable: "Defined in Implementingclass",
Testfunction:function () {
Alert (' This function was also defined in BaseClass ');
}
});
var demo_four = function () {
Create a Implementingclass instance
var test_class = new Extendingclass (' This is the input value ');
Call TestFunction () (also defined in both BaseClass and Extendingclass)
Test_class.testfunction ();
Displays the value of the variable definedvariable (also 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 feature that you can still call the initialization method in the base class when overriding the initialization method of the base class. So, if you define one of these initialization methods in the base class:
Reference code:
Copy Code code as follows:
Initialize:function () {
Alert (' base class ');
}
Then, the following initialization method is defined in the extension class, and two prompts are displayed for "base class" and "Extending class" respectively.
Reference code:
Copy Code code as follows:
Initialize:function () {
Calling the constructor of the parent class
This.parent ();
Alert (' Extending class ');
}
If the initialization function of the parent class requires parameters, be sure to ensure that the same input parameters are passed to the constructor of the parent class in this initialization function. In the following example, note that we do not specify any value for input-we simply pass it to the constructor of the parent class, which is automatically managed.
Reference code:
Copy Code code as follows:
var extendingclass = new Class ({
Repeat: We are using extension methods instead of implementing
Extends:baseclass,
Initialize:function (Input) {
To execute the initialization method of the parent class by calling This.parent
This.parent (input);
So we can do something else in the initialization method.
Instead of completely overwriting the parent class method
this.othervariable = "Original input was:" + input;
}
});
var demo_five = function () {
Create an instance of our extended class
var test_class = new Extendingclass (' This is the input value ');
Call TestFunction
Test_class.testfunction ();
Displays 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 (calculator), when defining this class, we only give it a function of adding to two digits and a subtraction operation.
Reference code:
Copy Code code as follows:
var Calculator = new Class ({
Specify two digits at initialization time
Initialize:function (First_number, Second_number) {
This.first = First_number;
This.second = Second_number;
},
Add up two numbers
and return the result
Add:function () {
result = This.first + This.second;
alert (result);
},
Subtract two digits
and return the result
Subtract:function () {
result = This.first-this.second;
alert (result);
}
});
If you're just adding or subtracting numbers, it all looks good, but what if you want to multiply them? Using the. Implement () method, we can add a feature to this class, just as we have created another class with the Calculator class as the base class.
Reference code:
Copy Code code as follows:
var demo_six = function () {
Implement for the Calculator class
Implement a method
Calculator.implement ({
Multiply the 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);
Calling 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 value of a variable in a class as long as it is implemented in calculator.
Reference code:
Copy Code code as follows:
var demo_seven = function () {
Implement a method for the calculator class
Used to print the contents of 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 details of a class
Mycalculator.show_class ();
}
Demo_seven ()
code example
It's neat, but it's not a particularly useful feature for a relatively simple calculator class. However, since most of the objects in MooTools are classes created in the same way, we can extend the MooTools class in this way to provide more functionality. The following example implements a feature that displays the content structure of any HTML you want to see. This feature is now automatically added to any HTML element that interacts with you, so you can add a complete description of the showstructure element to your element.
Reference code:
Copy Code code 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
NewWindow.document.write (structure);
}
});
$ (' demo_eight '). Showstructure ();
}
Note: To make this example appear correctly, you will need to allow the page to pop up the window first.
Learn More
Download a Zip package that contains everything you need to start
MooTools class Document
Some very good discussion about the better use of the MooTools class
