JS design pattern 1 singleton pattern

Premise: Js is single threaded, so don’t worry about locking. Singleton mode is the way to generate a unique instance without polluting the global scope: IEFE, namespace, function scope, closure

A common requirement is to pop up a mask layer on the page when a button is clicked.

Version1: every time you click. To create a


      
<html lang="en">

<head>
    <meta charset="UTF-8">
 <meta name="viewport" content="Width = device - width, initial - scale = 1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title> </head>  <body>  <button id="btn">show popup </button>  <script src="./1.singleton.js"></script> </body>  </html> Copy the code
// 1.singleon.js
// Click the button and a pop-up box appears

// Program entry
function init() {
 showPopup() }  init()   // Corresponding events and UI function showPopup() {  var btn = document.getElementById('btn')  btn.addEventListener('click'.function() {  var popUp = new Popup()  popUp.show('hello world')  }, false) }  / / UI classes function Popup() {} Popup.prototype.show = function(txt) {  var _div = document.createElement('div')  _div.innerHTML = txt  document.body.appendChild(_div) }    Copy the code
  • Obviously, creating one at a time does not meet the requirements, and frequent dom manipulation affects performance, so we can change on this basis

Version2: Declare a variable as null. When changing, determine whether the variable is null and initialize the instance for null. Otherwise, use the example directly

// Program entry
function init() {
    showPopup()
}

init()  var instance = null   // Corresponding events and UI function showPopup() {  var btn = document.getElementById('btn')   btn.addEventListener('click'.function() {  if(! instance) { instance = new Popup().show('hello world ')  }  }, false) }   / / UI classes function Popup() {} Popup.prototype.show = function(txt) {  var _div = document.createElement('div')  _div.innerHTML = txt  var ele = document.body.appendChild(_div)  return ele }  Copy the code
  • The disadvantage is the use of global variables

Version3: implemented using closures

// Program entry
function init() {
    showPopup()
}

init()  // Add here var createPopUp = function() {  var instance = null  return function() {  return instance || (instance = new Popup().show(arguments[0]))  } } () // Corresponding events and UI function showPopup() {  var btn = document.getElementById('btn')   btn.addEventListener('click'.function() {  // Call + pass arguments  createPopUp('aaa')  }, false) }   / / UI classes function Popup() {} Popup.prototype.show = function(txt) {  var _div = document.createElement('div')  _div.innerHTML = txt  var ele = document.body.appendChild(_div)  return ele }  Copy the code

Although the above can be implemented, but the JS window object is unique, or the shopping cart is unique, or the Store is unique in vuex, these implementations should be based on the idea of only one instance, not enough general, and then encapsulate a general version

Version 4: The changed part above(instance = new Popup().show(arguments[0]))Can be abstracted again, js functions are first-class citizens with functions can be the parameters of the characteristics, replaced by functions.

// Program entry
function init() {
    showPopup()
}

init()   // Key code // This function can be pulled out to other files for use in other scenarios that require singletons var SingletonFactory = function(fn) {  var instance = null  return function() {  return instance || (instance = fn.apply(this.arguments))  } } var createPopUp = SingletonFactory(function() {  return new Popup().show(arguments[0]) })  // Corresponding events and UI function showPopup() {  var btn = document.getElementById('btn')   btn.addEventListener('click'.function() {  / / call  createPopUp('asddasdasd')  }, false) }   / / UI classes function Popup() {} Popup.prototype.show = function(txt) {  var _div = document.createElement('div')  _div.innerHTML = txt  var ele = document.body.appendChild(_div)  alert(1)  return ele } Copy the code

Conclusion: The singleton pattern is a pattern that ensures that there is only one class globally through closures and functions that can be used as parameters.

First released: Singleton pattern of front-end Guanyu design pattern

This article is formatted using MDNICE