This document has been updated on Github.

2. You must create your own unique instance

Application scenarios

  • Connect to the database to prevent multiple connections and disconnections
  • Shopping cart Scene
  • The user login
  • vuex
  • Global loading mask layer
  • Production unique serial number
  • .

Singletons in ES6

// Shopping cart singleton instance
class ShopCar {
  constructor () {
    // Ensure that there is only one instance
    if(! ShopCar.instance) {this.goodsList = [];
      ShopCar.instance = this;
    }
    return ShopCar.instance
  }
  addGood (good) {
    this.goodsList.push(good);
  }
  showGoodsList () {
    console.log(this.goodsList); }}var a = new ShopCar()
// Add an item to the category page
a.addGood({id: 1.name: 'orange'})
console.log(a.showGoodsList()) [{id: 1, name: 'orange '}]

var b = new ShopCar()
// Added a product to the product details page
b.addGood({id: 2.name: 'apple'})
console.log(b.showGoodsList()) // Output: [{id: 1, name: 'orange '}, {id: 2, name:' apple '}]
Copy the code

Singletons in ES5

// ES5 singleton pattern
var shopCar = (function () {
  var goodsList = [];
  var instance;
  return function () { // The instance will be created when called
    // Ensure that there is only one instance
    if(! instance) {/ / instance
      instance = {
        addGood (good) {
          goodsList.push(good);
        },
        showGoodsList () {
          console.log(goodsList); }}; }returninstance; }; }) ();var a = shopCar()
// Add an item to the category page
a.addGood({id: 1.name: 'orange'})
a.showGoodsList() [{id: 1, name: 'orange '}]

var b = shopCar()
// Added a product to the product details page
b.addGood({id: 2.name: 'apple'})
b.showGoodsList() // Output: [{id: 1, name: 'orange '}, {id: 2, name:' apple '}]
Copy the code

There are two types of singletons: lazy and hungry.

LanHanShi

Lazy: Create when you use it. That is, an instance is not created when it is loaded, but only when it is used

The above code is a lazy singleton pattern. I won’t go into the details.

ShopCar is an advanced function whose return value is a function.

var shopCar = (function () {…. Var a = shopCar(); var a = shopCar();

The hungry type

Han-hungry: load is created, that is, the instance is created when loading, no need to call, all already exist

Rewrite the above code slightly

// ES5 singleton pattern
var shopCar = (function () {
  var goodsList = [];
  var instance = { // Loading creates the instance
    addGood (good) {
      goodsList.push(good);
    },
    showGoodsList () {
      console.log(goodsList); }};// Return an instance when called
  return function () {
    returninstance; }; }) ();var a = shopCar()
// Add an item to the category page
a.addGood({id: 1.name: 'orange'})
a.showGoodsList() [{id: 1, name: 'orange '}]

var b = shopCar()
// Added a product to the product details page
b.addGood({id: 2.name: 'apple'})
b.showGoodsList() // Output: [{id: 1, name: 'orange '}, {id: 2, name:' apple '}]
Copy the code

advantages

  • Ensures that there is only one instance
  • Because there are only one instance, system resources are saved, and remember that creating and destroying also wastes memory resources
  • It avoids multiple occupation of resources, such as database connections
  • Resource sharing

For more documentation, see:

Online address [front Tangerine gentleman]

GitHub Warehouse [Front Tangerine]