javascript design pattern - single mode object-oriented learning basics_js object-oriented

Singleton mode (singleton)

A singleton is created when the script is loaded. It can organize a series of related variables and methods into a logical unit, and the content in the logical unit is passed through A single variable is used for access;

A single entity is mainly divided into three parts

Entry variables used to access internal information (such as: Sky)
Attributes ( Such as: nickName/age/timeInfo)
Method (such as: sayHello)

Basic structure

Copy Code The code is as follows:

var Sky = {

/*
* Function 1, variable management
*/

nickName: "sky",
age: "26",

/*
* Function 2, initialize variables during loading
* Execute and initialize Sky during the loading process .info
*/

timeInfo: function()
{
var _year = new Date().getFullYear();
return _year;
}(),

/*
* Function three, function management, making your functions no longer look so scattered
*/

sayHello: function()
{
alert("hello, world!");
}

}
//All internal information is accessed through the variable Sky;
alert(Sky.timeInfo);

The following is a more detailed explanation. After reading this article, I believe you should almost understand. There are many experts on the Internet who have written js, and the single mode is very commonly used.

A singleton is an object used to divide a namespace and organize a group of related properties and methods together. If it can be instantiated, it can only be instantiated once.
Single mode is one of the most basic but also most useful modes in JavaScript.
Features:

. Can divide the namespace to eliminate the dangers caused by global variables.
. Use branching technology to encapsulate differences between browsers.
. The code can be organized more integrated, making it easier to read and maintain.

Basic structure of the monomer (correct writing):

Copy code The code is as follows:

/*Basic Singleton*/
var Singleton = ｛
attribute1: true,
attribute2:10,
method1:function(){}
Copy the code

The code is as follows:

var box = { width:0,

height:0, getArea:function(){ return this.width*this.height; //Access to objects in js must be explicit, that is, this cannot be omitted }, init:function(w,h){ // width = w; // height = h; This method is equivalent to defining two global variables (variables declared without var are global variables)

// It is not the object width and Assignment of height

//The following is correct
this.width = w;
this.height = h;
}
}//box divides a namespace, in the namespace The variables are only valid in the space


All members and methods in the above monomer are public, that is, they can be changed arbitrarily outside the monomer. So why is it said that the singleton provides a namespace?


Let’s continue:





Copy the code

The code is as follows:
var box = {
width:0,

height:0,//Single variable getArea:function(){ return width*height;//width in , height is actually not a single variable, but a global variable defined in init } init:function(w,h){ width = w; height = h;

}

}//Width and height in init are not actually single variables
window.onload = function(){
var init = box.getArea();
alert(init );
}


Since the width and height in init are not initialized, an error will be reported. Change it like this:




Copy the code


The code is as follows:

var box = {
width:0,

height:0, getArea:function(){ return width*height; }, init:function(w,h){ width = w; height = h;

}

}
window.onload = function(){
width = 0;
height = 0;
//or box.init(0,0);
var init = box.getArea();
alert(init);
}


I found that it is ok. Since the width and height used by init and getArea are not variables owned by the monomer, but a global variable, we can make random calls outside the monomer without being affected

It will be clearer if we write it like this:

Copy the code The code is as follows:

var box = {
width:0,
height:0,
getArea:function(){
return width*height;//Access to objects in js must be displayed, That is, this cannot be omitted
},
init:function(w,h){
width = w;
height = h;
}
}//The width here , height is not actually a single object
window.onload = function(){
width = 0;
height = 0;
var width = box.getArea();
alert (width);
}

Writing this way will report an error. It can be seen that our above method does not establish a namespace for global variables, and global variables bring us danger. So the top writing is correct, let’s verify it:

Copy the code The code is as follows:

var box = {
width:2,
height:2,
getArea:function(){
return this.width*this.height; // Access to objects in js is required is displayed, that is, this cannot be omitted
},
init:function(w,h){
this.width = w;
this.height = h;
}
}
window.onload = function(){
width = 0;
height = 0;
var width = box.getArea();
alert(width);
}

It can be seen that the width and height in window.onload have no interference, because the singleton has established a namespace for the width and height in the singleton.

Attributes of members:

After discussing the namespace, let’s set the attributes of single variables and methods. People who have studied other languages ​​​​(java, c, c#...) should be very familiar with the public and private of class members.
Although there is no such strict object-oriented (oop) in javascript, we can use closures to package to perform an imitation. After all, it is very bad to set some variables to public.

Copy code The code is as follows:

var circle = (function(){
//pravite member!
var r = 5;
var pi = 3.1416;//Use semicolon afterward
return{//public member
getArea:function(){
return r*r*pi;//Do not add this when accessing private members
}, //Use a comma afterward
//If you want to change the values ​​of r and pi, you can only do it by setting a public function
init:function(setR){
r = setR;
}
}
})()
window.onload = function(){
circle.r = 0 ;//Unable to access private members, it is equivalent to creating a public member r for circle
alert(circle.getArea());
circle.init(0);//You can use public utility functions Visited.
alert(circle.getArea());
};

Private variables and methods are read-only, while public variables and methods are readable and writable
Access:
For private members, you can access them directly without any modification in front.
For public access, you need to add "this." in front of it within the single scope, and outside the single scope. "circle." (single name.) should be added in front

Haha, it seems to have some flavor!
. Use branching technology to encapsulate the differences between browsers
Notes:
a Be sure to use closures to achieve instant binding
b Separate each branch with a semicolon Opening
c finally returns the name of the branch
d. When calling, use the method name of the branch with the singleton name;

Copy codeThe code is as follows:

//Use single branching technology to define the XHR (XMLHttpRequest) object, which must be implemented using closures
var XHR = (function(){
//The three branches
var standard = {
cXHR:function(){
return new XMLHttpRequest();
}
};
var activeXNew = {
cXHR:function(){
return new ActiveXObject('Msxml2.XMLHttp');
}
};
var activeXOld = {
cXHR:function(){
return new ActiveXObject('Microsoft.XMLHttp' );
}
};
//To assign (assign) the branch, try each method; return whatever doesn't fail
var testObject;
try{
testObject = standard.cXHR();
return standard;// return this branch if no error was thrown
}catch(e){
try{
testObject = activeXNew.cXHR();
return activeXNew;
}catch(e){
try{
testObject = activeXOld.cXHR();
return activeXOld;
}catch(e){
throw new Error( 'Create the XMLHttpRequestObject failed!');
}
}
}
})();
window.onload = function(){
alert(XHR.cXHR() ; Since I am also a beginner, I don’t have much say. I am not enough to point out and forget to give advice from experts.