Analysis of application examples of native javascript singleton pattern

This article describes the application of native JavaScript singleton pattern. Share it for your reference, as follows:

Overall principle: Open Close Principle The opening and closing principle means to open to extensions and close to modifications. When the program needs to be extended, you cannot modify the original code to achieve a hot plug effect. So in a word, it is: in order to make the program more extensible and easy to maintain and upgrade. 1. The principle of single responsibility. Do not have more than one reason for class change, that is, each class should implement a single responsibility. Otherwise, the class should be split.

Create Mode_Singleton Mode  A class allows only one instance to be created, and this is the singleton mode. The advantages are as follows: 1. Some classes are created frequently, which is a huge system overhead for some large objects. 2. The new operator is eliminated, which reduces the frequency of system memory usage and reduces GC pressure. 3. Some categories, such as the core trading engine of the exchange, control the trading process. If multiple categories can be created, the system will be completely messed up. (For example: there is only one President of China, and only one map object for the aircraft war), so only by using the singleton mode can the core transaction server independently control the entire process.

application:

There can only be one instance of the map in the Aircraft War;  The mask layer may be an instance that is often created frequently in a project. If it is constantly created and deleted, it is still a waste of resources. It should be created when used for the first time, and then only the first time created instances are used  An instance that is likely to be created frequently in a certain project, which is also a waste of resources.

Basic application of singleton mode

<script>
let singleton = function (){
  function Map(width,height) {
     = width;
     = height;
  }
  let instance;
  return{
    getIntence : function(width,height){
      if(instance == undefined){
        instance = new Map(width,height);
      }else{
         = width;
         = height;
      }
      return instance;
    }
  }
}();
let m1 = (100,200);
let m2 = (200,300);
(m1);//200 300
(m2);//200 300
</script>

Application of singleton mode in aircraft war

Map section

let mapSingleton = (function(){
  function Map(width,height,background){
     = null;//The div of the map     = null;
     = width;
     = height;
     = background;  
     = [];//Enemy plane array     = [];//Our fighter array    ();
    ();
  }
  //853 600
   = function() {
    //1. The div of the map     = ("div");
     = `margin:20px auto;position: relative;width:${}px;height:${}px;overflow:hidden`;
    ();
    //2. Moving div     = ("div");
     = `position: absolute;
          top:-1106px;
          width: 480px;
          height: 1706px;`;
    ();        
    //3. Picture    for(var i=0;i<2;i++){
      let img01 = ("img");
       = ;
       = `display: block`;
      (img01);
    }
    //4. Points board:     = ("div");
     = "position:absolute;left:0px;top:0px;width:100px;height:35px;z-index:999";
     = 0;
    ();
  };
   = function(){
    let top1 = -1106;
    setInterval(()=>{
      top1++;
      if(top1>=-253){
        top1 = -1106;
      }
       = top1+"px";
    },50);
  }
  var instance;
  return {
    getInstance:function(width,height,background){
      if(instance==undefined){
        instance = new Map(width,height,background);
      }else{
         = width;
         = height;
         = background;
        =+"px";
        =+"px";
        [0].src=;
        [1].src=;
      }
      return instance;
    }
  }
})();
// Summary of singleton pattern/*Using the closure principle and self-call principle, first self-call, return closure function, let the user call, but can only create one instance object. When multiple instances are to be created, it will not be created. The simple case code at the top. If you want to create an instance again, the previous data will be overwritten and the instance object will not be created.
 Why use closures to prevent users from constructing new objects again? Use the function to execute once after calling. When calling, you only need to use the return function to avoid users constructing new objects multiple times*/

Interested friends can use itOnline HTML/CSS/JavaScript front-end code debugging and running tools：http://tools./code/WebCodeRunTest the above code running effect.

For more information about JavaScript, you can also view the topic of this site: "JavaScript object-oriented tutorial》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》

I hope this article will be helpful to everyone's JavaScript programming.