Single Mode of javascript Design Pattern

A single object is an object used to divide the namespace and organize a batch of related attributes and methods together. If it can be instantiated, it can only be instantiated once. The single mode is one of the most basic but useful modes in javascript. Features: 1. & nbsp; SyntaxH can be selected

A single object is an object used to divide the namespace and organize a batch of related attributes and methods together. If it can be instantiated, it can only be instantiated once.
The single mode is one of the most basic but useful modes in javascript.
Features:
1. You can divide namespaces to clear the risks caused by global variables.
2. Use the Branch Technology to encapsulate the differences between browsers.
3. The code can be organized into one for easy reading and maintenance.
Basic Structure of a monomer (written correctly ):
/* Basic Singleton */
Var Singleton = {

Attribute1: true,

Attribute2: 10,

Method1: function (){},

Method2: function (){}

};
 
1. Divide the namespace:
1 var box = {
2 width: 0,
3 height: 0,
4 getArea: function (){
5 return this. width * this. height; // access to objects in js must be displayed, that is, this cannot be omitted.
6 },
7 init: function (w, h ){
8 // width = w;
9 // height = h; this method is equivalent to defining two global variables (the variable without var declaration is a global variable)
10 // does not assign values to the width and height of the object
11 // The following is correct
12 this. width = w;
13 this. height = h;
14}
15} // box divides a namespace. the variables in the namespace are only valid in the space.
16
All the members and methods in the monomer above are public, that is, they can be arbitrarily modified outside the monomer, so why does a single entity provide a namespace?
 
We continue:
1 var box = {
2 width: 0,
3 height: 0, // variable of the monomer
4 getArea: function (){
5 return width * height; //, width and height are not a single variable, but a global variable defined in init.
6}
7 init: function (w, h ){
8 width = w;
9 height = h;
10}
11} // In init, width and height are not actually single variables.
12 window. onload = function (){
13 var init = box. getArea ();
14 alert (init );
15}
Because the width and height values in init are not initialized, an error is reported. Change the value as follows:
1 var box = {
2 width: 0,
3 height: 0,
4 getArea: function (){
5 return width * height;
6 },
7 init: function (w, h ){
8 width = w;
9 height = h;
10}
11}
12 window. onload = function (){
13 width = 0;
14 height = 0;
15 // or box. init (0, 0 );
16 var init = box. getArea ();
17 alert (init );
18}
Yes. Because the width and height used by init and getArea are not all the variables of the monomer, but a global variable, we can call them without being affected.
 
If we write it like this, we can better understand:
1 var box = {
2 width: 0,
3 height: 0,
4 getArea: function (){
5 return width * height; // access to objects in js must be displayed, that is, this cannot be omitted.
6 },
7 init: function (w, h ){
8 width = w;
9 height = h;
10}
11} // the width and height here are not actually single objects.
12 window. onload = function (){
13 width = 0;
14 height = 0;
15 var width = box. getArea ();
16 alert (width );
17}
In this way, an error is reported. We can see that the above method does not create a namespace for global variables, and global variables pose a risk to us. So the top line is correct. Let's verify it:
1 var box = {
2 width: 2,
3 height: 2,
4 getArea: function (){
5 return this. width * this. height; // access to objects in js must be displayed, that is, this cannot be omitted.
6 },
7 init: function (w, h ){
8 this. width = w;
9 this. height = h;
10}
11}
12 window. onload = function (){
13 width = 0;
14 height = 0;
15 var width = box. getArea ();
16 alert (width );
17}
It can be seen that the width and height in window. onload do not interfere with each other, because the width and height in the monomer create a namespace.
 
2. Member attributes:
After discussing the namespace, let's set the attributes of the single variable and method. Anyone who has studied other languages (java, c ++, c #...) should be familiar with the public and private attributes of class members,
Although there is not such a strict object-oriented (oop) in javascript, we can use closures to simulate it. After all, it is difficult to set some variables to public.
1 var circle = (function (){
2 // pravite member!
3 var r = 5;
4 var pi = 3.1416; // use a semicolon
5 return {// public member
6 getArea: function (){
7 return r * pi; // do not add this to Private Members
8 &