Learning JavaScript design patterns (Singleton mode) _ javascript tips-js tutorial

This article mainly guides you through the JavaScript design mode. It focuses on the singleton mode, illustrates the technology and disadvantages of Singleton mode, and analyzes the singleton mode in detail, if you are interested, you can refer to the singleton mode definition to ensure that a class has only one instance and provides a global access point to it.

The Singleton mode is a common mode. We usually only need one of some objects, such as the thread pool, global cache, and window objects in the browser. In js development, the singleton mode is also widely used. Imagine that when we click the login button, a login box will appear on the page, and this floating window is unique, no matter how many times you click the login button, this floating window will only be created once. Therefore, this login floating window is suitable for the singleton mode.

1. Use Cases of Singleton Mode

Before using a mode, we 'd better know the application scenarios of this mode. I don't know how to use the singleton mode for so long! What are the specific advantages of using it?

1). You can use it to divide namespaces (this is often used)

2). Use the Branch Technology to encapsulate the differences between browsers (this is really useless and fresh)

3). With the help of the singleton mode, you can organize the code more consistent to facilitate reading and maintenance (this is also used)

2. Basic Singleton Mode

The simplest Singleton is actually an object literal. It organizes a group of associated methods and attributes.

Var Singleton = {attr1: true, attr2: 10, method1: function () {alert ('I am method 1');}, method2: function () {alert ('I am method 2 ');}};

This object can be modified. You can add attributes and methods. You can also use the delete operator to delete an existing member. This actually violates an object-oriented design principle: classes can be extended, but should not be modified. If some variables need to be protected, they can be defined in the closure.

The object literal is only one of the methods for creating a singleton. Not all object literal volumes are singleton. The literal volume of objects that are used to mimic the associated array or to hold data is obviously not Singleton.

3. Create a singleton using a closure

Closure mainly protects data

// Namespace var BHX = {}; BHX. singleton = (function () {// Add your own private member var a1 = true; var a2 = 10; var f1 = function () {alert ('f1 ');} var f2 = function () {alert ('F2');} // assign the execution result in the block-level scope to my singleton object return {attr1: a1, attr2: a2, method1: function () {return f1 () ;}, method2: function () {return f2 () ;}}) (); alert (BHX. singleton. attr1); BHX. singleton. method1 ();

This Singleton mode, also known as the module mode, means that it can organize a batch of related methods and attributes into modules and divide namespaces.

4. The Singleton mode is used to divide namespaces.

1) Prevent modifications to global declarations

/* Using a namespace */var BHX = {}; BHX. singleton = {attr1: true, attr2: 10, method1: function () {alert ('I am method 1');}, method2: function () {alert ('I am method 2') ;}}; BHX. singleton. attr1; var attr1 = false;

In this way, even if we declare the same variables outside, we can prevent the attr1 from being modified to a certain extent.

2) prevent other source code modifications

Currently, JavaScript code on Web pages often uses more than one source, library code, advertisement code, and badge code. To avoid conflicts with your own code, you can define an object that contains all your code.

var XGP = {};XGP.Common = {  //A singleton with common methods used by all objects and modules}XGP.ErrorCodes = {  //An object literal used to store data}XGP.PageHandler = {  //A singleton with page specific methods and attributes.}

3) used as specialized code Encapsulation

In websites with many webpages, some code is used by all webpages, which are usually stored in independent files, while some code is dedicated to a webpage, it will not be used elsewhere. We recommend that you package these two types of code in your singleton object.

We often use Javascript to add functions for forms. For the sake of stability and degradation, we usually first create a pure HTML webpage that does not rely on Javascript and uses the common commit mechanism to complete tasks.

XGP. regPage = {FORM_ID: 'reg-form', OUTPUT_ID: 'reg-result', handleSubmit: function (e) {e. preventDefault (); // stop the normal form submission var data ={}; var inputs = XGP. regPage. formEl. getElementByTagName ('input'); for (var I = 0, len = inputs. length; I
 
  

  
5. inert Singleton
  
The Singleton mode mentioned above has another thing in common: the singleton object is created when the script is loaded. For resource-intensive or configuration-intensive Singleton instances, it is more reasonable to postpone their instantiation until they need to be used.
  
This technology is lazy loading ).
  
The implementation steps are as follows:
  
1) Move all the code to the constructor method.
  
2). full control over the call time (exactly what getInstance needs to do)
  

  

  
XGP.lazyLoading = (function(){  var uniqInstance;  function constructor(){    var attr = false;    function method(){    }    return {      attrp: true,      methodp: function(){      }    }  }  return {    getInstance: function(){      if(!uniqInstance){        uniqInstance = constructor();      }      return uniqInstance;    }  }})();
  

  
6. Branch Technology
  
A branch is a technique used to encapsulate the differences between browsers in dynamic methods set during runtime.
  

  
// Branch Singleton (judge the branch of a program
   <浏览器差异的检测>
    
) Var Ext ={}; var def = false; Ext. more = (function () {var objA = {// some configurations in Firefox: 'ff attribute 1' // attribute 1 // attribute 2 // method 1 // method 2}; var objB = {// some internal configurations of IE browser attr1: 'ie attribute 1' // attribute 1 // attribute 2 // method 1 // method 2}; return (def )? ObjA: objB;}) (); alert (Ext. More. attr1 );
   
  

  
For example, if xhr is frequently used on a website, you must run the browser sniffing code again for each call, which seriously results in a lack of efficiency. It is more effective to determine the browser-specific code at one time during Script Loading. This is exactly what branch technologies do. Of course, the branch technology is not always more efficient. Only one branch is used in two or more branches, and other branches occupy the memory.
  
When considering whether to use the branch technology, you must weigh the advantages and disadvantages of shortening the time and occupying more memory.
  
The following uses the branch technology to implement XHR:
  

  

  
var XHR = (function(){  var standard = {    createXhrObj: function(){      return new XMLHttpRequest();    }  };  var activeXNew = {    createXhrObj: function(){      return new ActiveXObject('Msxml2.XMLHTTP');    }  };  var activeXOld = {    createXhrObj: function(){      return new ActiveXObject('Microsoft.XMLHTTP');    }  };  var testObj;  try{    testObj = standard.createXhrObj();    return testObj;  }catch(e){    try{      testObj = activeXNew.createXhrObj();      return testObj;    }catch(e){      try{        testObj = activeXOld.createXhrObj();        return testObj;      }catch(e){        throw new Error('No XHR object found in this environment.');      }    }  }})();
  

  
7. disadvantages of Singleton Mode
  
After learning so much about Singleton, let's take a look at its drawbacks.
  
Because the singleton mode provides a single point of access, it may lead to strong coupling between modules. Therefore, unit testing is not conducive.
  
To sum up, the singleton still leaves the namespace to define and implement the functions of the branching method.
  
Through the introduction of the singleton mode from different aspects at, do you have a better understanding of Singleton mode? I hope this article will help you.