Design patterns represent best practices and are generally adopted by experienced object-oriented software developers. Design pattern is a solution to the common problems faced by software developers during software development. These solutions have been developed by numerous software developers over a long period of trial and error.

Rookie tutorial we can see from above answer design patterns in our work is closely linked the actual if can fun sneaking about work must be a lot of help, the recently concluded learning a part of the commonly used design patterns down a second investigation about their knowledge of learning is the hope can help to you

preface

This design mode is a serial article, each page will explain a design mode, in the following process, we will practice code while giving some examples used in work to explain, today mainly introduces a single example mode

start

1. As the name implies, the singleton pattern ensures that a class has only one instance and provides a global access point to access it

2. The advantage of singletons is that unnecessary overhead can be reduced. For example, if the page needs to display a pop-up box, the pop-up box will be created only at the first time, and then the previous one will be used when clicking

3. New Vue, used in the Vue framework, applies the singleton pattern

Next, let’s look at the actual code implementation

The first general version

//1. The first singleton pattern is not elegant to implement and reuse, and will pollute the global environment
let _instance = null
function getSingle(){
  if(! _instance){ _instance =this
  }
  return _instance
}
​
let m1 = new getSingle()
let m2 = new getSingle()
​
console.log(m1 === m2) //true
Copy the code

The second closure version

//2. The second singleton pattern uses closures to implement the singleton pattern. The disadvantage is that the code is so coupled that we need to split it according to a single responsibility
let getSingle2 = function (name) {
  this.name = name
}
​
getSingle2.getInst = (
  function () {
    let _instance
    return function (name) {
      if(! _instance){ _instance =new getSingle2(name)
      }
      return _instance
    }
  }
)()
​
let g1 = getSingle2.getInst('Three in a row')
let g2 = getSingle2.getInst('No four')
​
console.log(g1 === g2) // true
Copy the code

The third version conforms to single responsibility

//3. The third singleton feels much better to use than the previous one and complies with the Single responsibility principle without exposing Single to achieve finer granularity
const Single = function (name) {
  this.name = name
}
​
Single.prototype.getName = function () {
  return this.name
}
​
const CreateSingle = (function () {
  let _instance = null;
  return function (name) {
    if (_instance) return _instance
    _instance = new Single(name)
    return _instance
  }
})()
​
​
let v1 = new CreateSingle(Linghu Chong)
let v2 = new CreateSingle('Yue Lingshan')
​
console.log(v1 === v2) // true guarantees the same instance
Copy the code

The fourth version is the lazy version

//4. The fourth singleton pattern is lazy singleton, which generates instances only when called. In fact, lazy singleton is a very important optimization method in the front end, just like some resources lazy loading.
​
const CreateSingleV1 = function (fn) {
  let _instance = null;
  return function () {
    return _instance || (_instance = fn.apply(this.arguments))}}Copy the code

Bounced demo

// We implemented a popbox demo using lazy singleton mode
const createModal = function (message) {
  const box = document.createElement('div')
  box.innerHTML = message
  box.className = 'box'
  document.body.appendChild(box)
  return box
}
​
const createAlertMessaeg = CreateSingleV1(createModal)
​
modalAlert.onclick = function (params) {
  const alertMessaeg = createAlertMessaeg('Dugu Nine Swords YYds')}Copy the code

conclusion

Let’s talk about the pros and cons of the singleton model

Advantages: Singleton mode because there is only one instance to avoid the repeated creation and destruction of memory, often used in a pop-up box or for a user to configure a shopping cart, or global state management similar to the popular vuex/ MOBx

Disadvantages: Poor scalability for dynamic objects