Learn JavaScript design patterns - singleton pattern_javascript skills

1. Definition

Guarantee that a class has only one instance and provide a global access point to it.
When you click the login button, a login floating window appears on the page. This login floating window is unique. No matter how many times you click the login button, this floating window will only be created once. Then this login floating window is suitable for use as a singleton. pattern to create.

2. Implementation Principle

It is not complicated to implement a singleton. Use a variable to mark whether an object has been created for a certain class. If so, the previously created object will be returned directly the next time you get an instance of the class.

3. Fake Singleton

Global variables are not in singleton mode, but in JavaScript development, we often use global variables as singletons.

var a = {};

Reduce naming pollution caused by global variables
(1) Use namespace

var namespace1 = {
  a: function(){},
  b: 2
}

(2) Use closures to encapsulate private variables

var user = (function() {
  var _name = 'lee',
    _age = '25';
  return {
    getUserInfo: function() {
      return _name + ":" + _age;
    }
  };
})();

4. Lazy singleton: create object instances only when needed

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

// 测试
function testSingle(){}
getSingle(testSingle)() === getSingle(testSingle)();  // true

5. Supplement:

(1) Lazy loading

var lazyload = function() {
  console.log(1);
  lazyload = function() {
    console.log(2);
  }
  return lazyload();
}

lazyload();

(2) Preloading

var preload = (function() {
  console.log(1);
  preload = function() {
    console.log(2);
  };
  return preload;
})();

preload();

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