The singleton pattern

Definition: a singleton is to ensure that there is only one instance of a class. The method of implementation is generally to determine whether the instance exists or not, and return directly if there is, if there is no create and return, which ensures that a class has only one instance object. In JavaScript, a singleton acts as a namespace provider, providing a unique access point to the object from the global namespace. Example: Modal box, login control, logout control Login modal box is described belowCopy the code

Introduce a proxy implementation singleton pattern

var CreateDiv = function(html) { this.html = html; this.init(); }; CreateDiv.prototype.init = function() { var div = document.createElement('div'); div.innerHTML = this.html; document.body.appendChild(div); } var ProxySingletonCreateDiv = (function() { var instance; return function(html) { if (! instance) { instance = new CreateDiv(html); } return instance; }}) (); var a = new ProxySingletonCreateDiv('seven1'); var b = new ProxySingletonCreateDiv('seven2'); console.log(a === b); // true Description: Our logic for managing singletons was moved into ProxySingletonCreateDiv. This makes CreateDiv a generic class, which is combined with ProxySingletonCreateDiv to achieve singleton effect.Copy the code

Generic singleton pattern

Const getSingle = function (fn){let result; return function (){ return result || (result = fn.apply(this, arguments)); }; }; Const createLoginLayer = function (){const div = document.createElement('div'); Div. InnerHTML = 'I am the Login modal box '; document.body.appendChild(div); return div; }; Const createSingleLoginLoyer = getSingle(createLoginLayer); const loginLayer1 = createSingleLoginLoyer(); Const loginLayer2 = createSingleLoginLoyer(); // First login modal box const loginLayer2 = createSingleLoginLoyer(); // Console. log(loginLayer1 === loginLayer2); No matter how many times you execute the createSingleLoginLoyer() method, only one div node will be produced. Our generic singleton pattern is complete.Copy the code

Inert singleton

Definition: Lazy singletons are instances of objects that are created only when needed. Const createLoginLayer = (function (){let div; return function (){ if (! div) { div = document.createElement('div'); Div. InnerHTML = 'I am the Login modal box '; } return div; }; }) (); Document.getelementbyid ('login-btn').onclick = function (){var loginLayer = createLoginLayer(); loginLayer.style.display = 'block'; }; The implementation of the lazy singleton here is basically creating the DOM node of the login box only if you singleton the login button on the web page, and you only create it once.Copy the code

Reference Documentation: JavaScript Design Patterns — Singleton design patterns of singleton patterns

Js design pattern – singleton pattern
Yu true sail – fanerge
Fanerge. Making. IO / 2017/10/15 /…

License agreement: Attribution – Non-commercial use – No deductive 4.0 international reprint please retain the original link and author.