Mootools 1.2 Tutorial Class (1)_Mootools

Simply put, a class is a container that contains a collection of variables and functions that operate on these variables to implement specific functions. In a high-volume project, classes can be incredibly useful.
Variables
In the previous series of lessons, we have learned how to use key/value pairs in Hash objects. Therefore, in the following example, we created a class that only Contains some variables that may look very familiar to you:
Reference code:

Copy code The code is as follows:

// Create a class named class_one
// Contains two internal variables
var Class_one = new Class({
variable_one : "I'm First",
variable_two : "I'm Second"
});

Similarly, you can access the variables in the hash in a similar way. Note that in In the code below, we create an instance of the Class_one class we defined above.
Reference code:

Copy code The code is as follows:

var run_demo_one = function() {
// Create an instance of class Class_one, named demo_1
var demo_1 = new Class_one();
// Display the variables in demo_1
alert( demo_1.variable_one);
alert( demo_1.variable_two );
}

Method/Function
A method refers to a function in a specified class (in layman’s terms, a function in a class is called a method, Just changed the name). These methods must be called through an instance of this class, and the class itself cannot call them. You can define a method just like defining a variable. The difference is that you need to assign a static value to it and assign it an anonymous function:
Reference code:

Copy code The code is as follows:

var Class_two = new Class({
variable_one : "I'm First",
variable_two : " I'm Second",
function_one : function(){
alert('First Value : ' this.variable_one);
},
function_two : function(){
alert(' Second Value : ' this.variable_two);
}
});

Pay attention to the use of the keyword this in the above example. Since the variables operated in the above method are all variables inside the class, you need to access these variables by using the keyword this, otherwise you will only get an undefined value.
Reference code:

Copy code The code is as follows:

// Correct
working_method : function(){
alert('First Value : ' this.variable_one);
},
// Error
broken_method : function(){
alert('Second Value : ' variable_two);
}

Calling methods in the newly created class is just like accessing variables of those classes.
Reference code:

Copy code The code is as follows:

var run_demo_2 = function() {
// Instantiate a class class_two
var demo_2 = new Class_two();
// Call function_one
demo_2.function_one();
// Call function_two
demo_2. function_two();
}

initialize method
The initialize option in the class object allows you to perform some initialization operations on the class, and also allows you to handle some user settings options and variables. (Fdream Note: In fact, this is equivalent to the initialization method of the class.) You can define it like a method:
Reference code:

Copy code The code is as follows:

var Myclass = new Class({
// Define an initialization method containing one parameter
initialize : function(user_input){
// Create a variable belonging to this class
// and assign a value to it
// The value is the value passed in by the user
this.value = user_input;
}
} )

You can also change other options or behaviors through this initialization:
Reference code:

Copy code The code is as follows:

var Myclass = new Class({
initialize : function(true_false_value){
if (true_false_value){
this.message = "Everything this message says is true";
}
else {
this.message = "Everything this message says is false";
}
}
})
// This will set the message property of the myClass instance to the following The string
// "Everything this message says is true"
var myclass_instance = new Myclass(true);
// This will set the message attribute of the myClass instance to the following string
/ / "Everything this message says is false"
var myclass_instance = new Myclass(false);

All this works without declaring any other variables or methods. Just remember the comma after each key-value pair. It's really easy to miss a comma and spend a lot of time tracking down vulnerabilities that don't exist.
Reference code:

Copy code The code is as follows:

var Class_three = new Class( {
// This class will be executed when the class is created
initialize : function(one, two, true_false_option){
this.variable_one = one;
this.variable_two = two;
if (true_false_option){
this.boolean_option = "True Selected";
}
else {
this.boolean_option = "False Selected";
}
},
// Define some methods
function_one : function(){
alert('First Value : ' this.variable_one);
},
function_two : function(){
alert(' Second Value : ' this.variable_two);
}
});
var run_demo_3 = function(){
var demo_3 = new Class_three("First Argument", "Second Argument");
demo_3.function_one();
demo_3.function_two();
}

Implement option functions
When creating a class, set some variables in the class Default values ​​are useful if the user provides no initial input. You can manually set these variables in the initialization method, check each input to see if the user provided the corresponding value, and then replace the corresponding default value. Alternatively, you can also use the Options class provided by Class.extras in MooTools.
Adding an option function to your class is very simple, just like adding another key-value pair to the class:
Reference code:

Copy code The code is as follows:

var Myclass = new Class({
Implements: Options
})

First of all don’t Too anxious to implement the details of the options, we will learn more in depth in later tutorials. Now that we have a class with options, all we need to do is define some default options. Like everything else, just add some key-value pairs that need to be initialized. Instead of defining a single value, you need to define a set of key-value pairs like this:
Reference code:

Copy code The code is as follows:

var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Option",
option_two : "Second Option"
}
})

Now that we have these default collections, we also need to provide a way for users to override these when initializing this class. default value. All you have to do is add a new line of code to your initialization function, and the Options class will do the rest:
Reference code:

Copy code The code is as follows:

var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option ",
option_two : "Second Default Option"
}
initialize: function(options){
this.setOptions(options);
}
})

Once this is done, you can override any default options by passing an array of key-value pairs:
Reference code:

Copy code The code is as follows:

// Override all default options
var class_instance = new Myclass({
options_one : "Override First Option",
options_two : "Override Second Option"
});
// Override one of the default options
var class_instance = new Myclass({
options_two : "Override Second Option"
})

Pay attention to the setOptions method in the initialization function. This is a method provided in the Options class that allows you to set options when instantiating a class.
Reference code:

Copy code The code is as follows:

var class_instance = new Myclass( );
// Set the first option
class_instance.setOptions({options_one : "Override First Option"});

Once the options are set, you can pass the variable options to visit them.
Reference code:

Copy code The code is as follows:

var class_instance = new Myclass( );
// Get the value of the first option
var class_option = class_instance.options.options_one;
// The current value of variable class_option is "First Default Option"

If you want to access this option inside the class, please use this statement:
Reference code:

Copy code The code is as follows:

var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option",
option_two : " Second Default Option"
}
test : function(){
// Note that we use the this keyword to
// refer to this class
alert(this.option_two);
}
});
var class_instance = new Myclass();
// A dialog box will pop up showing "Second Default Option"
class_instance.test();

Combine these things into a class and it will look like this:
Reference code:

Copy code Code As follows:

var Class_four = new Class({
Implements: Options,
options: {
option_one : "Default Value For First Option",
option_two : " Default Value For Second Option",
},
initialize: function(options){
this.setOptions(options);
},
show_options : function(){
alert (this.options.option_one "n" this.options.option_two);
},
});
var run_demo_4 = function ){
var demo_4 = new Class_four({
option_one : "New Value"
});
demo_4.show_options();
}
var run_demo_5 = function(){
var demo_5 = new Class_four();
demo_5. show_options();
demo_5.setOptions({option_two : "New Value"});
demo_5.show_options();
}
// Create an instance of class class_four
// And specify a new option named new_option
var run_demo_6 = function(){
var demo_6 = new Class_four({new_option : "This is a new option"});
demo_6.show_options();
}

Code and examples
People familiar with PHP may recognize the print_r() function in the show_options method in the example below:
Reference code:

Copy code The code is as follows:

show_options: function(){
alert(print_r(this.options, true));
}

This is not a native JavaScript method, just a small snippet of code from Kevin van Zonneveld in the PHP2JS project. For those unfamiliar with PHP, the print_r() method gives you a formatted string of key-value pairs in an array. This is an extremely useful debugging tool in the process of debugging scripts. This function has detailed code in the download package provided later. I strongly recommend using it for testing and research.
Reference code:

Copy code The code is as follows:

var Class_five = new Class({
// We used options
Implements: Options,
// Set our default options
options : {
option_one : "DEFAULT_1",
option_two : "DEFAULT_2",
},
// Set our initialization function
// Set options through the setOptions method
initialize : function(options){
this.setOptions(options);
},
// Method used to print option array information
show_options: function(){
alert(print_r(this.options, true)) ;
},
// Use the setOptions method to exchange the values ​​of two options
swap_options : function(){
this.setOptions({
option_one : this.options.option_two,
option_two : this.options.option_one
})
}
});
function demo_7(){
var demo_7 = new Class_five();
demo_7.show_options( );
demo_7.setOptions({option_one : "New Value"});
demo_7.swap_options();
demo_7.show_options();
}

Learn more

Download a zip package with everything you need to get started

MooTools Class DocumentMooTools Class.extra Documentprint_r() Reference