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]