A comprehensive analysis of single-body pattern in JavaScript design pattern

A monolith is an object used to divide a namespace and organize some related attributes and methods. If she can be instantiated, she can only be instantiated once (she can only marry once, not second marriage).

The monolithic pattern is one of the most basic but useful patterns in JavaScript.

Features:

1. Can be used to divide namespaces to clear the dangers or effects of global variables.

2. Use branching technology to encapsulate differences between browsers.

3. The code can be organized more in one way, making it easier to read and maintain.

Basic writing of single-body mode:

 /* The most basic monomer pattern*/ var her = {name: 'Anna',sex: 'women',say: function(){// Some processing logic...},doing: function(){// Other processing functions...} }

1. Divide namespace:

 var box = {width: 0,height: 0,getArea: function(){return this.width * this.width; // The access to objects in js must be displayed, that is, this cannot be omitted}, init: function(w, h){// width = w;// height = h; This method is equivalent to defining two global variables, (variables not declared with var are global variables) // It is not an assignment to the width and height of the object // The following is the correct one this.width = w; this.height = h;}} //box divides a namespace, and the variables in the namespace 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 (but they cannot access local variables). So why does the monomer provide a namespace?

Don't worry, let's continue to look:

 var box = {width:0,height:0,//The variable of monomer getArea:function(){return width * height;// width, height is not a monomer variable, but a global variable defined in init}init:function(w,h){width = w;height = h;}}// In init, height is not a monomer variable window.onload = function(){var init = box.getArea();alert(init);}

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

 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);}

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

 var box = {width: 0,height: 0,getArea: function(){return width * height;//The access of the object 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);}

This way, it will be reported that an error will be reported. It can be seen that our above method does not create a namespace for global variables, and global variables bring us danger. So the top word is correct, let's verify:

 var box = {width: 2,height: 2,getArea: function(){return this.width * this.height;/ /js access must be displayed, that is, this cannot be omitted}, init:function(w,h){this.width = w;this.height = h;}}window.onload = function(){width = 0; // It will not affect the local variables in the monolith, that is, the namespace height = 0; // It will not affect the local variables in the monolith, that is, the namespace var width = box.getArea();alert(width);}

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

2. Member properties:

Although there is no such strict object-oriented (OOP) in JavaScript, we can use closures to imitate it. After all, it is not good to set some variables to public.

 var her = (function(){var name = 'Anna';var sex = 'women';return {getArea: function(){return name + 'is a' + sex;},init:function(b){name = b;}}})();window.onload = function(){her.name = 'Jock'; // Cannot access alert(ger.getArea());her.init('Lous');alert(her.getArea());}

Private variables and methods are read-only, while public variables and methods are read-writeable.

access:

For private members, you can access them directly without any modifications before them.

For public access, “this.” should be added before the monomer scope, and “her.” (monobody name.)

3. Use branch technology to encapsulate differences between browsers

Notes:

a. Be sure to use closures to achieve instant binding

b. Separate each branch with a semicolon

c. The last thing that returns is the name of the branch

d. Use the single name + branch method name when calling;

 // Use monomer branching technology to define XHR (XMLHttpRequest) objects, and you must use a closure to implement var XHR = (function(){//The three branchesvar 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 failvar 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 activeXNew;}catch(e){try{testObject = activeXOld.cXHR();return activeXOld;}catch(e){throw new Error('Create the XMLHttpRequestObject failed!'); }}}})();window.onload = function(){alert(XHR.cXHR());}

The above is a comprehensive analysis of the single-body model of the JavaScript design pattern introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!