The factory pattern
A function used to build an object
function createUser(role) {
function User(options) {
this.name = options.name;
this.viewPages = options.viewPages;
}
switch (role) {
case 'superAdmin':
return new User({name: 'superAdmin'.viewPages: ['1'.'2'.'3'.'4']});
break;
case 'admin':
return new User({name: 'admin'.viewPages: ['1'.'3']});
break;
default:
throw new Error('Parameter error! ');
}
}
createUser('admin');
Copy the code
Optimization of the following
function createUser(role) {
return new this[role]();
}
createUser.prototype.superAdmin = function () {
this.name = 'superAdmin';
this.viewPages = ['1'.'2'.'3'.'4'];
};
createUser.prototype.admin = function () {
this.name = 'admin';
this.viewPages = ['1'.'3'];
};
new createUser('admin');
Copy the code
Applicable scenario
- Object construction is complex
- Create specific instances depending on different environments
- Handles a large number of small objects of the same type
The singleton pattern
Ensure that there is at most one instance of a particular class and that the second time you create a new object using the same class it should be exactly the same as the first time you create an object
The next time a new object is regenerated, the old object is returned directly
let SingleUser1 = (function(){
let instance = null
return functoin User () {
if (instance) {
return instance
}
return instance = this
}
})()
Copy the code
Decouple the constructor User from the logic that determines whether an instance exists
let SingleUser2 = (function () {
let instance = null;
function User(name) {
this.name = name;
}
return function (name) {
if (instance) {
return instance;
}
return (instance = newUser(name)); }; }) ();Copy the code
Further encapsulation
let singleton = function (fn) {
let instance = null;
return function (args) {
if (instance) {
return instance;
}
return (instance = new fn(args));
};
};
Copy the code
Any scenario that uses a unique object applies to the singleton pattern
// Such as login box
const createMask = singleton(function () {
const mask = document.createElement('div');
mask.style.background = 'red';
mask.style.width = '100%';
mask.style.position = 'fixed';
document.body.appendChild(mask);
return mask;
});
Copy the code
Adapter mode
The adapter pattern transforms the interface (method or property) of one class into another interface (method or property) that the user expects. The adapter pattern enables classes to work together that would otherwise not work together due to interface incompatibations
class Power {
constructor(){
this.serveVoltage = 110
this.serveShape = 'triangle'}}class Adaptor {
constructor(){
this.consumeVoltage = 110
this.consumeShape = 'triangle'
}
usePower(power) {
if(! power) {throw new Error('Please input power')}if(power.serveVoltage ! =this.consumeVoltage || power.serveShape ! = =this.consumeShape) {
throw new Error('Wrong power specification')}this.serveVoltage = 220
this.serveShape = 'double'}}class User {
constructor () {
this.consumeVoltage = 220
this.consumeShape = 'double'
}
usePoser(power) {
if(! power) {throw new Error ('Please plug in power')}if(power.serveVoltage ! = =this.consumeVoltage || power.serveShape ! = =this. consumeShape){
throw new Error('Wrong power specification')}console.log('Power supply connected'); }}}let power = new Power()
let user = new User()
let adaptor = new Adaptor()
adaptor.usePower(power)
user.userPower(adaptor)
Copy the code