Mootools1.2 tutorial class (1) _ Mootools

Today, we will talk about the basic knowledge of using MooTools to create and use classes. Simply put, a class is a container, which contains a set of variables and functions that operate on these variables to implement specific functions. Classes are incredibly useful in a project that involves a lot of content.
Variable
In the previous series of courses, we have learned how to use key/value pair in the Hash object. Therefore, the following example creates a class, it only contains some variables and you may feel very familiar with them:
Reference 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 using a similar method. Note that in the following code, we created an instance of the Class_one class defined above.
Reference code:

The Code is as follows:

Var run_demo_one = function (){
// Create an instance of the Class_one class 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 general, a function in a class is called a method, but a method is changed ). These methods must be called through the instance of this class, and the class itself cannot call them. You can define a method like a variable. The difference is that you need to specify a static value for it and an anonymous function for it:
Reference 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 );
}
});

Note the use of the keyword "this" in the above example. Because the variables operated in the preceding method are all internal variables of the class, you need to use the keyword "this" to access these variables. Otherwise, you will only get one undefined value.
Reference 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 new class is like accessing the variables of those classes.
Reference 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 initialize the class or process some options and variables that can be set by the user. (Fdream note: in fact, this is equivalent to the class initialization method .) You can define a method as follows:
Reference code:

The Code is as follows:

Var Myclass = new Class ({
// Define an initialization method containing a parameter
Initialize: function (user_input ){
// Create a variable of this class
// And assign a value to it
// The value is the user-defined value.
This. value = user_input;
}
})

You can also use this initialization to change other options or actions:
Reference 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 sets the message attribute of the myClass instance to the following string
// "Everything this message says is true"
Var myclass_instance = new Myclass (true );
// This sets the message attribute of the myClass instance to the following string
// "Everything this message says is false"
Var myclass_instance = new Myclass (false );

No other variables or methods need to be declared for all this work. You only need to remember the comma following each key-value pair. It is really easy to miss a comma, and then spend a lot of time tracking these nonexistent vulnerabilities.
Reference 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 the option Function
When creating a class, it is very useful to set some default values for some variables in the class, if the user does not provide the initial input. You can manually set these variables in the initialization method, check each input to see if the user has provided the corresponding value, and then replace the corresponding default value. Alternatively, you can use the Options Class provided by Class. extras in MooTools.
Adding an option to your class is very simple, just like adding another key-value pair to the class:
Reference code:

The Code is as follows:

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

First, do not worry too much about the details of the implementation options. We will learn more in the following tutorial. Now we have a class with the option function. We also need to define some default options. Just like everything else, you only need to add some key-value pairs to be initialized. Unlike defining a single value, you need to define a set of key-value pairs as follows:
Reference code:

The Code is as follows:

Var Myclass = new Class ({
Implements: Options,
Options :{
Option_one: "First Option ",
Option_two: "Second Option"
}
})

Now we have these default sets. We also need to provide a way for users to override these default values when initializing this class. All you need to do is add a new line of code to your initialization function, and the Options class will complete the rest of the work:
Reference 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 completes, You can overwrite any default options by passing a set of key-value pairs:
Reference code:

The Code is as follows:

// Overwrite all default options
Var class_instance = new Myclass ({
Options_one: "Override First Option ",
Options_two: "Override Second Option"
});
// Overwrite one of the default options
Var class_instance = new Myclass ({
Options_two: "Override Second Option"
})

Note 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:

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 access them through the options variable.
Reference code:

The Code is as follows:

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

If you want to access this option inside the class, use the this statement:
Reference 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
// Reference this class
Alert (this. option_two );
}
});
Var class_instance = new Myclass ();
// A dialog box is displayed, showing "Second Default Option"
Class_instance.test ();

Combine these things into a class, which looks like this:
Reference code:

The Code is 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 the class_four class
// 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 example
People familiar with PHP may know the print_r () function in the show_options method in the following example:
Reference code:

The Code is as follows:

Show_options: function (){
Alert (print_r (this. options, true ));
}

This is not a javascript native method, but a small piece of code from Kevin van Zonneveld in the PHP2JS project. For those who are not familiar with PHP, The print_r () method gives you a formatted string of the key-value pairs in the array. This is an extremely useful debug tool during script debugging. This function contains detailed code in the downloaded package provided later. I strongly recommend using it for testing and research.
Reference code:

The Code is as follows:

Var Class_five = new Class ({
// We used the option
Implements: Options,
// Set our default options
Options :{
Option_one: "DEFAULT_1 ",
Option_two: "DEFAULT_2 ",
},
// Set our initialization Function
// Use the setOptions method to set options
Initialize: function (options ){
This. setOptions (options );
},
// Method for printing the option array information
Show_options: function (){
Alert (print_r (this. options, true ));
},
// Exchange the values of the two options using the setOptions Method
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 containing everything you need

MooTools Class document MooTools Class. extra document print_r () Reference