Simply put, a class is a container, which contains some sets of variables and functions that operate these variables in order to implement specific functions. In a project with a lot of content, classes can appear incredibly useful.
variable
In the previous series of lessons, we have learned how to use key/value pairs in Hash objects. Therefore, in the example below, a class is created that contains only some variables, which you may find very familiar with:
Reference code:
// 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 variables in a hash by accessing variables in a hash. Note that in the following code, we created an instance of the Class_one class we defined above.
Reference code:
var run_demo_one = function(){
// Create an instance of class Class_one with the name demo_1
var demo_1 = new Class_one();
// Show variables in demo_1
alert( demo_1.variable_one );
alert( demo_1.variable_two );
}
Methods/functions
A method refers to a function in a specified class (in layman's terms, the function in a class is called a method, just a different name). These methods must be called through instances of this class, and the class itself cannot call them. You can define a method like defining a variable, the difference is that you need to specify a static value to it and an anonymous function to it:
Reference code:
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:
// correct
working_method : function(){
alert('First Value : ' + this.variable_one);
},
// mistake
broken_method : function(){
alert('Second Value : ' + variable_two);
}
Calling methods in newly created classes is like accessing variables of those classes.
Reference code:
var run_demo_2 = function(){
// Instantiate a 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 options and variables that can be set by users. (Fdream Note: Actually, this is equivalent to the initialization method of the class.) You can define it like a method:
Reference code:
var Myclass = new Class({
// Define an initialization method containing a parameter
initialize : function(user_input){
// Create a variable belonging to this class
// and assign it a value
// The value is the value passed in by the user
= user_input;
}
})
You can also use this initialization to change other options or behaviors:
Reference code:
var Myclass = new Class({
initialize : function(true_false_value){
if (true_false_value){
= "Everything this message says is true";
}
else {
= "Everything this message says is false";
}
}
})
// This will set the message property of the myClass instance to the following string
// "Everything this message says is true"
var myclass_instance = new Myclass(true);
// This will set the message property of the myClass instance to the following string
// "Everything this message says is false"
var myclass_instance = new Myclass(false);
All this work does not require declaring any other variables or methods. Just remember the commas after each key-value pair. It's really easy to miss a comma and then spend a lot of time tracking these non-existent vulnerabilities.
Reference code:
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 options 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 initial input. You can manually set these variables in the initialization method, check each input to see if the user provides the corresponding value, and then replace the corresponding default value. Alternatively, you can also use the Options class provided in MooTools.
It's very simple to add an option to your class, just like adding another key-value pair to the class:
Reference code:
var Myclass = new Class({
Implements: Options
})
First of all, don’t be too anxious to implement the details of the options. We will learn more in-depth in the subsequent tutorials. Now that we already have a class with option functions, all we need to do is define some default options. Like everything else, just add some key-value pairs that need to be initialized. Unlike defining a single value, you need to define a set of key-value pairs like this:
Reference code:
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 default values when initializing this class. 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:
var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option",
option_two : "Second Default Option"
}
initialize: function(options){
(options);
}
})
Once this is done, you can override any default options by passing a set of key-value pairs:
Reference code:
// Override 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, which allows you to set options when instantiating a class.
Reference code:
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 variable options.
Reference code:
var class_instance = new Myclass();
// Get 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 this statement:
Reference code:
var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option",
option_two : "Second Default Option"
}
test : function(){
// Note that we use this keyword
// Quote this class
alert(this.option_two);
}
});
var class_instance = new Myclass();
// A dialog box will pop up, displaying "Second Default Option"
class_instance.test();
Combine these things into a class and it looks like this:
Reference code:
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){
(options);
},
show_options : function(){
alert(.option_one + "\n" + .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 called 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
Those familiar with PHP may recognize the print_r() function in the show_options method in the following example:
Reference code:
show_options : function(){
alert(print_r(, true));
}
This is not a native method of javascript, it is just a small piece of code from Kevin van Zonneveld in the PHP2JS project. For those who are not familiar with PHP, this print_r() method gives you a formatted string of key-value pairs in an array. This is an extremely useful debug tool during the debugging script. This function has detailed code in the download package provided later, and I highly recommend using it for testing and research.
Reference code:
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
// Set options through the setOptions method
initialize : function(options){
(options);
},
// Method used to print option array information
show_options : function(){
alert(print_r(, true));
},
// Exchange the values of the two options through the setOptions method
swap_options : function(){
({
option_one : .option_two,
option_two : .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();
}
variable
In the previous series of lessons, we have learned how to use key/value pairs in Hash objects. Therefore, in the example below, a class is created that contains only some variables, which you may find very familiar with:
Reference code:
Copy the codeThe 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 variables in a hash by accessing variables in a hash. Note that in the following code, we created an instance of the Class_one class we defined above.
Reference code:
Copy the codeThe code is as follows:
var run_demo_one = function(){
// Create an instance of class Class_one with the name demo_1
var demo_1 = new Class_one();
// Show variables in demo_1
alert( demo_1.variable_one );
alert( demo_1.variable_two );
}
Methods/functions
A method refers to a function in a specified class (in layman's terms, the function in a class is called a method, just a different name). These methods must be called through instances of this class, and the class itself cannot call them. You can define a method like defining a variable, the difference is that you need to specify a static value to it and an anonymous function to it:
Reference code:
Copy the codeThe 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 the codeThe code is as follows:
// correct
working_method : function(){
alert('First Value : ' + this.variable_one);
},
// mistake
broken_method : function(){
alert('Second Value : ' + variable_two);
}
Calling methods in newly created classes is like accessing variables of those classes.
Reference code:
Copy the codeThe code is as follows:
var run_demo_2 = function(){
// Instantiate a 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 options and variables that can be set by users. (Fdream Note: Actually, this is equivalent to the initialization method of the class.) You can define it like a method:
Reference code:
Copy the codeThe code is as follows:
var Myclass = new Class({
// Define an initialization method containing a parameter
initialize : function(user_input){
// Create a variable belonging to this class
// and assign it a value
// The value is the value passed in by the user
= user_input;
}
})
You can also use this initialization to change other options or behaviors:
Reference code:
Copy the codeThe code is as follows:
var Myclass = new Class({
initialize : function(true_false_value){
if (true_false_value){
= "Everything this message says is true";
}
else {
= "Everything this message says is false";
}
}
})
// This will set the message property of the myClass instance to the following string
// "Everything this message says is true"
var myclass_instance = new Myclass(true);
// This will set the message property of the myClass instance to the following string
// "Everything this message says is false"
var myclass_instance = new Myclass(false);
All this work does not require declaring any other variables or methods. Just remember the commas after each key-value pair. It's really easy to miss a comma and then spend a lot of time tracking these non-existent vulnerabilities.
Reference code:
Copy the codeThe 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 options 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 initial input. You can manually set these variables in the initialization method, check each input to see if the user provides the corresponding value, and then replace the corresponding default value. Alternatively, you can also use the Options class provided in MooTools.
It's very simple to add an option to your class, just like adding another key-value pair to the class:
Reference code:
Copy the codeThe code is as follows:
var Myclass = new Class({
Implements: Options
})
First of all, don’t be too anxious to implement the details of the options. We will learn more in-depth in the subsequent tutorials. Now that we already have a class with option functions, all we need to do is define some default options. Like everything else, just add some key-value pairs that need to be initialized. Unlike defining a single value, you need to define a set of key-value pairs like this:
Reference code:
Copy the codeThe 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 default values when initializing this class. 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 the codeThe code is as follows:
var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option",
option_two : "Second Default Option"
}
initialize: function(options){
(options);
}
})
Once this is done, you can override any default options by passing a set of key-value pairs:
Reference code:
Copy the codeThe code is as follows:
// Override 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, which allows you to set options when instantiating a class.
Reference code:
Copy the codeThe 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 variable options.
Reference code:
Copy the codeThe 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 the variable class_option is "First Default Option"
If you want to access this option inside the class, use this statement:
Reference code:
Copy the codeThe 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 this keyword
// Quote this class
alert(this.option_two);
}
});
var class_instance = new Myclass();
// A dialog box will pop up, displaying "Second Default Option"
class_instance.test();
Combine these things into a class and it looks like this:
Reference code:
Copy the codeThe 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){
(options);
},
show_options : function(){
alert(.option_one + "\n" + .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 called 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
Those familiar with PHP may recognize the print_r() function in the show_options method in the following example:
Reference code:
Copy the codeThe code is as follows:
show_options : function(){
alert(print_r(, true));
}
This is not a native method of javascript, it is just a small piece of code from Kevin van Zonneveld in the PHP2JS project. For those who are not familiar with PHP, this print_r() method gives you a formatted string of key-value pairs in an array. This is an extremely useful debug tool during the debugging script. This function has detailed code in the download package provided later, and I highly recommend using it for testing and research.
Reference code:
Copy the codeThe 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
// Set options through the setOptions method
initialize : function(options){
(options);
},
// Method used to print option array information
show_options : function(){
alert(print_r(, true));
},
// Exchange the values of the two options through the setOptions method
swap_options : function(){
({
option_one : .option_two,
option_two : .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();
}
More learning
Download a zip package with everything you need to start
-
MooTools Class DocumentationMooTools Documentationprint_r() reference