JS design mode 1-single case mode

Singleton mode is a common pattern, with some objects we often only need one, such as global cache, Window object. Singleton mode in the JS development of the use of a single case is very extensive, such as the page has a login floating window, no matter how many times you click the Login window, this window will be created only once, then this window is suitable to use a singleton mode to create.

1, Singleton mode example:

It is not complicated to implement a singleton pattern, but to use a variable to flag whether an object is currently created for a class, and, if so, to return the object created before the next time the class instance is taken.

1 varsign=function(name) {2      This. name=name;3      This. instance=NULL;4 }5 6Sign.prototype.getname=function(){7     return  This. Name;8 }9 TenSign.getinstance=function(name) { One     if(! This. Instance) { A          This. instance=NewSign (name); -     } -     return  This. instance; the } -  - varObj1=sign.getinstance ("Gao"); - varObj2=sign.getinstance ("Xiang"); +alert (OBJ1===OBJ2);//true

2. Use the proxy to implement the singleton mode.

We can transfer the logic responsible for managing the singleton to the proxy class Signleton.

1 varcreatediv=function(HTML) {2      This. html=html;3      This. Init ();4 }5 6creatediv.prototype.init=function(){7     varDiv=document.createelement ("div");8Document.innerhtml= This. html;9 Document.body.appendChild (div);Ten } One  A varSignleton= (function(){ -     varinstance; -     return function(HTML) { the         if(!instance) { -Instance=Newcreatediv (HTML); -         } -         returninstance; +     } - })(); +  A varobj1=NewSignleton ("H1"); at varObj2=NewSignleton ("H2"); -Alert (OBJ1===OBJ2)//true

The benefits of this writing are obvious and reusability is strong.

3. Inertia single case

What is an inert singleton, which means to implement a singleton when needed, such as creating a login window when you click the login button. Instead of having the page loaded, you've created a login window, because some users don't need to sign in, just look at the weather and see the news.

1 varCreatelogin= (function(){2     varDiv;3     return function(){4         if(!Div) {5Div=document.createelement (' div ');6Div.innerhtml= ' Login window ';7Div.style.display= ' None ';8 Document.body.appendChild (div);9         }Ten         returnDiv; One     } A })(); -  -document.getElementById (' loginbtn '). AddEventListener (' click '),function(){ the     varloginwindow=Createlogin (); -Loginwindow.style.display= ' Block '; -},false);

4. General Inertia single case.

The last piece of code violates the principle of single responsibility, if one day we are not creatediv, but createframe,createscript must change the source code. We need to isolate the unchanging parts. Implement a common function.

This logic is always the same.

1 var obj; 2 if (! obj) {3   obj=xxx;   4 }

Now encapsulate a getsignle function.

var getsignle=function(FN) {    var  result;     return function () {        return result| | (Result=fn.apply (this, arguments))    }};

Method of creating an object FN is passed into the Getsignle function by the on-the-spot argument, and then let Getsignle return a function, Resule the flag object is created, if not created, result saves the execution result of FN, because result is stored in the closure environment, so will not be destroyed , and return the existing result directly on the next request.

1 varcreatelogindiv=function(){2     varDiv=document.createelement ("div");3Div.innerhtml= "I am the login window";4Div.style.display= ' None ';5 Document.body.appendChild (div);6     returnDiv;7 }8 9 vardivlayout=Getsignle (createlogindiv);Ten  Onedocument.getElementById ("Loginbtn"). AddEventListener (' click ',function(){ A     varloginwindow=divlayout (); -Loginwindow.style.display= ' Block '; -},false);

JS design mode 1-single case mode