- 装饰器模式（react高阶组件）
允许向一个现有的对象添加新的功能，同时又不改变其结构
装饰器只能用于类和类的方法，不能用于函数，因为存在函数提升\
const Foo = {
foo() { console.log('foo') }
};
class MyClass {}
Object.assign(MyClass.prototype, Foo);
let obj = new MyClass();
obj.foo() // 'foo'
- 工厂模式（React.createElement）
工厂模式即对创建对象逻辑的封装，或者可以简单理解对new的封装，这种封装就像创建对象的工厂
使用场景：React.createElement
class User {
constructor(name, auth) {
this.name = name;
this.auth = auth;
}
}
class UserFactory {
static createUser(name, auth) {
//工厂内部封装了创建对象的逻辑:
//权限为admin时,auth=1, 权限为user时, auth为2
//使用者在外部创建对象时,不需要知道各个权限对应哪个字段, 不需要知道赋权的逻辑，只需要知道创建了一个管理员和用户
if (auth === "admin") new User(name, 1);
if (auth === "user") new User(name, 2);
}
}
const admin = UserFactory.createUser("test", "admin");
const user = UserFactory.createUser("test", "user");
-
策略模式(代码优化)
策略模式指的是定义一系列算法，把它们一个个封装起来；它分为2部分，一部分是策略类（可变的），它封装了具体算法，并负责整个具体计算过程；另一部分是环境类（不可变的）
-
单例模式(redux的store) 单例模式是指一个类仅有一个实例，并提供一个访问它的全局节点。
class Singleton {
constructor(name) {
this.name = name;
}
static getInstance(name) {
//判断对象是否已经被创建,若创建则返回旧对象
if (!this.instance) this.instance = new Singleton(name);
return this.instance;
}
}
let obj1 = Singleton.getInstance("TEST");
let obj2 = Singleton.getInstance("TES1T");
console.log(obj1 === obj2); // true
console.log(obj1); // {name:TEST}
console.log(obj2);
class Num {
constructor(num) {
this.num = num;
}
getNum() {
return this.num
}
}
let createInstance = (function(){
var instance = null;
return function(num) {
if (!instance) {
instance = new Num(num)
}
return instance;
}
})()
var num1 = createInstance(10);
var num2 = createInstance(20);
console.log(num1 === num2) // true
- 观察者模式
class Subject {
constructor() {
this.oberverList = []; //observer集合
this.state = 1; // 默认状态
}
getState() {
// 读取状态监听
console.log('读取监听状态', this.state)
return this.state
}
setState(val) {
// 重写监听状态
console.log('重写状态', val);
this.state = val;
this.notifyAllOberver(); // 重写是通知所有的观察者
}
attach(obj) {
// 添加观察对象
this.oberverList.push(obj)
}
notifyAllOberver() {
this.oberverList.forEach(obj => {
// 通知所有观察者进行状态更新
obj.update();
})
}
}
class Observer {
constructor(name, subject) {
this.name = name;
this.subject = subject;
this.subject.attach(this); // 添加观察者
}
update() {
console.log(this.name, '我观察到了变化')
}
}
let subject = new Subject();
let observer = new Observer('我是张三', subject);
subject.setState(2)
- 发布-订阅模式（redux的subscribe）
发布-订阅模式，不同于观察者模式，就是它多了一个调度中心
class PubSub {
constructor() {
this.events = {}
}
subscribe(event,callback) {
if (this.events[event]) {
this.events[event].push(callback)
} else {
this.events[event] = [callback]
}
}
publish(event, ...args) {
const subscribedEvents = this.events[event];
subscribedEvents.forEach((callback) => {
callback(...args)
})
}
unsubscribe(event, callback) {
// const subscribedEvents = this.events[event]
this.events[event] = this.events[event]?.filter((p) => p!== callback)
}
}
const pubSub = new PubSub();
pubSub.subscribe('event1', () => {console.log(1)})
pubSub.publish("event1");
- 代理模式
使用场景：Proxy、nginx - 单例模式 使用场景：redux的store管理、window等、全局组件Modal
class Single {
constructor(name){ this.name = name}
static getSingle() { return Single._instance}
}
var a = Single.getSingle('a');
var b = Single.getSingle('b');
console.log(a === b) // true
参考文档：
