Simply put, a class is a container that contains a set of variables and functions that manipulate them to achieve specific functionality. Classes can be incredibly useful in a project with more content involved.
Variable
In the previous series of lessons, we've learned how to use the key-value pairs (Key/value pair) in a hash object, so the following example creates a class that contains only a few variables that you might look familiar with:
Reference code:
Copy Code code as follows:
Create a class named Class_one
contains two internal variables
var class_one = new Class ({
Variable_one: "I ' m",
Variable_two: "I ' m Second"
});
Similarly, you can access the variables in the same way that you access the variables in the hash, and note that in the following code, we create an instance of the Class_one class that we defined above.
Reference code:
Copy Code code as follows:
var run_demo_one = function () {
Creates an instance of the class Class_one, named 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 is a function in a specified class (in layman's sense, a function in a class is called a method, in other words). These methods must be invoked through an instance of this class, and the class itself cannot invoke them. You can define a method like a variable, and the difference is that you need to specify a static value for it, and give it an anonymous function:
Reference code:
Copy Code code as follows:
var class_two = new Class ({
Variable_one: "I ' m",
Variable_two: "I ' m Second",
Function_one:function () {
Alert (' ' a ': ' + this.variable_one ');
},
Function_two:function () {
Alert (' Second Value: ' + this.variable_two);
}
});
Note the use of this keyword in the example above. Because the variables that are manipulated in the above method are variables within the class, you need to access these variables by using the keyword this, otherwise you will only get a undefined value.
Reference code:
Copy Code code as follows:
That's right
Working_method:function () {
Alert (' ' a ': ' + this.variable_one ');
},
Error
Broken_method:function () {
Alert (' Second Value: ' + variable_two);
}
Calling methods in a newly created class is like accessing a variable of those classes.
Reference code:
Copy Code code as follows:
var run_demo_2 = function () {
Instantiate a class of 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 lets you initialize some of the classes, and lets you handle some of the options and variables that you can set for the user. (Fdream Note: This is actually equivalent to the class initialization method.) You can define it just as you would define a method:
Reference code:
Copy Code code as follows:
var Myclass = new Class ({
Defines an initialization method that contains a parameter
Initialize:function (user_input) {
Create a variable that belongs to this class
and assign it a value
Value is the value that the user passes in
This.value = User_input;
}
})
You can also use this initialization to change other options or behaviors:
Reference code:
Copy Code code 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 property for the MyClass instance to the following string
"Everything This message says is true"
var myclass_instance = new MyClass (true);
This sets the message property for the MyClass instance to the following string
"Everything This message says is false"
var myclass_instance = new MyClass (false);
All of this work does not require any other variables or methods to be declared. Just remember that the comma behind each key value pair is OK. It's really very easy to miss a comma and spend a lot of time tracking these nonexistent vulnerabilities.
Reference code:
Copy Code code as follows:
var class_three = new Class ({
This class is 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 (' ' a ': ' + this.variable_one ');
},
Function_two:function () {
Alert (' Second Value: ' + this.variable_two);
}
});
var run_demo_3 = function () {
var demo_3 = new Class_three ("A-Argument", "Second Argument");
Demo_3.function_one ();
Demo_3.function_two ();
}
Implementing option Features
When creating a class, it is 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 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 as simple as adding a different key value pair to the class:
Reference code:
Copy Code code as follows:
var Myclass = new Class ({
Implements:options
})
First of all, do not be too anxious to implement the details of the options, we will be in the later tutorial more in-depth study. Now that we have a class with the option feature, what we need to do is define some of the default options. Like everything else, you just need to 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 as follows:
Reference code:
Copy Code code as follows:
var Myclass = new Class ({
Implements:options,
Options: {
Option_one: "Option",
Option_two: "Second Option"
}
})
Now that we have these default collections, we also need to provide a way for users to override these defaults when initializing the class. All you have to do is add a new line of code to your initialization function, and the options class completes the rest of your work:
Reference code:
Copy Code code as follows:
var Myclass = new Class ({
Implements:options,
Options: {
Option_one: "Option"
Option_two: "Second Default option"
}
Initialize:function (options) {
This.setoptions (options);
}
})
Once this is done, you can override any default options by passing a set of key-value pairs:
Reference code:
Copy Code code as follows:
Overwrite all default options
var class_instance = new Myclass ({
Options_one: "Override-Option",
Options_two: "Override Second option"
});
Overwrite one of the default options
var class_instance = new Myclass ({
Options_two: "Override Second option"
})
Notice the SetOptions method in the initialization function. This is a method provided in the options class that lets you set options when instantiating a class.
Reference code:
Copy Code code as follows:
var class_instance = new Myclass ();
Set first option
Class_instance.setoptions ({options_one: "Override-Option"});
Once you have set the options, you can access them through the variable options.
Reference code:
Copy Code code as follows:
var class_instance = new Myclass ();
Get the value of the first option
var class_option = Class_instance.options.options_one;
Variable class_option Now the value is "the" "I" option.
If you want to access this option within the class, use the This statement:
Reference code:
Copy Code code as follows:
var Myclass = new Class ({
Implements:options,
Options: {
Option_one: "Option"
Option_two: "Second Default option"
}
Test:function () {
Note that we use the This keyword to
Referencing this class
alert (this.option_two);
}
});
var class_instance = new Myclass ();
A dialog box will pop up showing "Second Default option"
Class_instance.test ();
The combination of these things into a class looks like this:
Reference code:
Copy Code code as follows:
var class_four = new Class ({
Implements:options,
Options: {
option_one: "Default value for option",
Option_two: ' Default value for Second option,
},
Initi Alize: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 a 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 be aware of the Print_r () function in the Show_options method in the following example:
Reference code:
Copy Code code as follows:
Show_options:function () {
Alert (Print_r (This.options, true));
}
This is not a native method of JavaScript, it's just a small piece of code from Kevin Van Zonneveld in the PHP2JS project. For those unfamiliar 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 debugging scripts, and this function has detailed code in the download package provided later, which I strongly recommend for testing and research.
Reference code:
Copy Code code 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
To set options by SetOptions method
Initialize:function (options) {
This.setoptions (options);
},
Methods for printing option array information
Show_options:function () {
Alert (Print_r (This.options, true));
},
Exchange the values of two options through 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 that contains everything you need to start
MooTools Class document MooTools Class.extra document print_r () reference
