JS——前端常用设计模式

1，工厂

用函数创建对象，就是工厂啦。
工厂封装了创建对象的细节。

function Student(name, age) {
	this.name = name
	this.age = age
	this.say = () => {
		console.log("我叫" + this.name + "今年" + this.age + "岁")
	}
}
let a = new Student("张三", 23)
a.say()

效果：

我叫张三今年23岁

2，单例

只有一个实例对象。可以利用闭包实现。

let getInstance = (function () {
	let obj
	return () => {
		if (!obj) {
			obj = new Date()
		}
		return obj
	}
})()
let a = getInstance()
let b = getInstance()
console.log(a)
console.log(b)
console.log(a === b)

效果：

2022-04-04T11:07:57.075Z
2022-04-04T11:07:57.075Z
true

3，原型

就是原型对象啦。

4，策略

由参数决定调用哪个方法。

class User {
	a() {
		console.log("A")
	}
	b() {
		console.log("B")
	}
	c() {
		console.log("C")
	}
	dispatch(str) {
		if (str === "A") {
			this.a();
		} else if (str === "B") {
			this.b();
		} else if (str === "C") {
			this.c();
		}
	}
}
let a = new User()
a.dispatch("A")
a.dispatch("C")
a.dispatch("B")
a.dispatch("E")

效果：

A
C
B

5，发布订阅

简单的版本就是一个事件中心。

$.on可以订阅一个消息。
$.emit可以发布一个消息。
$.off可以取消订阅。

class EventBus {
	map = new Map();
	on = (name, handler) => {
		if (!this.map.has(name)) {
			this.map.set(name, handler);
		}
	}
	emit = (name, param) => {
		let handler = this.map.get(name);
		if (handler !== null) {
			handler(param);
		}
	}
	off = (name) => {
		this.map.delete(name);
	}
}
//新建消息中心
let bus = new EventBus();
//订阅
bus.on('say', (msg) => {
	console.log(msg);
});
let i = 0;
//发布
let timer = setInterval(() => {
	if (i >= 30) {
		//取消订阅
		bus.off('say');
		clearInterval(timer);
		return;
	}
	bus.emit('say', "你好，世界！" + i++)
}, 1000);

效果：

6，状态

就是状态机，有几个组成部分：

• 状态。这个电灯是开着的。
• 更新逻辑。更改状态的逻辑。如何断开电源，如何连通电源。
• 触发事件。开关的开启，关闭。

举例：
状态管理框架Vuex，Redux。
Vue的state，React的setState()。

7，模版

向函数传递函数，以扩展其功能。

比如说，Array.sort(xxx)

let arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]
arr.sort((a, b) => a - b)
console.log(arr)

效果：

[
  1, 2, 3, 4, 5,
  6, 7, 8, 9
]

8，MVC，MVVM

M：模型渲染视图。
V：视图触发模型更新。
VM：模型视图负责中间的交互。

VM用到了代理模式。