JavaScript作为一种灵活且功能强大的编程语言，支持多种设计模式来解决不同的问题。设计模式是解决特定问题的经验总结，它们可以提高代码的可读性、可维护性和可扩展性。本文将深入探讨JavaScript中常见的设计模式，包括创建型、结构型和行为型模式，并介绍它们的应用场景和使用方法。
1. 创建型模式：
工厂模式（Factory Pattern）： 工厂模式是一种创建对象的设计模式，它使用工厂函数或类来封装对象的创建过程，并根据不同的条件返回不同类型的对象实例。应用场景包括创建复杂对象、隐藏对象创建逻辑等。
单例模式（Singleton Pattern）： 单例模式确保一个类只有一个实例，并提供全局访问点。它通常用于管理共享资源、配置对象等场景。
原型模式（Prototype Pattern）： 原型模式通过复制现有对象来创建新对象，而不是通过构造函数。它适用于需要动态创建对象，并且对象结构相似的场景。
2. 结构型模式：
适配器模式（Adapter Pattern）： 适配器模式用于将一个类的接口转换成客户端所期待的另一个接口。它通常用于整合不兼容的接口或类，使它们能够一起工作。
装饰者模式（Decorator Pattern）： 装饰者模式允许动态地将责任附加到对象上，扩展对象的功能。它适用于需要动态添加功能、避免类爆炸的场景。
代理模式（Proxy Pattern）： 代理模式用于控制对对象的访问，通过代理对象可以在目标对象被访问前后进行一些额外的操作。它通常用于实现权限控制、缓存等功能。
3. 行为型模式：
观察者模式（Observer Pattern）： 观察者模式定义了一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都会收到通知并自动更新。它适用于对象之间的解耦和通信。
策略模式（Strategy Pattern）： 策略模式定义了一系列算法，并将其封装成对象，使得算法可以互相替换。它适用于需要在运行时动态选择算法的场景。
命令模式（Command Pattern）： 命令模式将请求封装成对象，使得可以对请求进行参数化、排队、记录日志等操作。它适用于需要将请求发送者与请求接收者解耦的场景。
4. 模式的应用场景：
- 工厂模式适用于创建复杂对象或隐藏对象创建逻辑的场景。
- 单例模式适用于管理共享资源、配置对象等场景。
- 适配器模式适用于整合不兼容的接口或类。
- 观察者模式适用于对象之间的解耦和通信。
- 策略模式适用于需要在运行时动态选择算法的场景。
面了WLB外企，让手写一个发布-订阅模式，要求有发布，订阅，取消订阅，三个功能，还好我早有准备，不慌，直接上代码
1.手写发布订阅模式
function PubSub() {
this.events = {};
}
//订阅消息
PubSub.prototype.subscribe = function (eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = [];
}
this.events[eventName].push(callback);
};
//发布消息
PubSub.prototype.publish = function (eventName, data) {
if (this.events[eventName]) {
this.events[eventName].forEach(function (callback) {
callback(data);
});
}
};
//取消订阅
PubSub.prototype.unsubscribe = function (eventName, callback) {
if (this.events[eventName]) {
this.events[eventName] = this.events[eventName].filter(function (fn) {
return fn !== callback;
});
}
};
// 使用示例
const pubsub = new PubSub();
function onEvent1(data) {
console.log('Event 1:', data);
}
pubsub.subscribe('event1', onEvent1);
pubsub.publish('event1', 'Hello, from Event 1!');
// 输出:
// Event 1: Hello, from Event 1!
// 取消订阅
pubsub.unsubscribe('event1', onEvent1);
pubsub.publish('event1', 'This event is unsubscribed.');
2.手写一个观察者模式
/*vue双向绑定，当观察对象发生变化时自动调整相关函数*/
var obj = {
data: { list: [] },
}
Object.defineProperty(obj, 'list', {
get() {
return this.data['list']
},
set(val) {
console.log('值被更改了')
this.data['list'] = val
}
})
3. 手写一个代理模式
const myImage = (function() {
const imgNode = document.createElement('img')
document.body.appendChild(imgNode)
return {
setSrc: function(src) {
imgNode.src = src
}
}
})()
const proxyImage = (function() {
const img = new Image()
img.onload = function() { // http 图片加载完毕后才会执行
myImage.setSrc(this.src)
}
return {
setSrc: function(src) {
myImage.setSrc('loading.jpg') // 本地 loading 图片
img.src = src
}
}
})()
proxyImage.setSrc('http://loaded.jpg')
4. 手写一个策略模式
const strategy = {
'S': function(salary) {
return salary * 4
},
'A': function(salary) {
return salary * 3
},
'B': function(salary) {
return salary * 2
}
}
const calculateBonus = function(level, salary) {
return strategy[level](salary)
}
calculateBonus('A', 10000)
5. 手写一个状态模式
// 将状态封装成不同类
const weakLight = function(light) {
this.light = light
}
weakLight.prototype.press = function() {
console.log('打开强光')
this.light.setState(this.light.strongLight)
}
const strongLight = function(light) {
this.light = light
}
strongLight.prototype.press = function() {
console.log('关灯')
this.light.setState(this.light.offLight)
}
const offLight = function(light) {
this.light = light
}
offLight.prototype.press = function() {
console.log('打开弱光')
this.light.setState(this.light.weakLight)
}
const Light = function() {
this.weakLight = new weakLight(this)
this.strongLight = new strongLight(this)
this.offLight = new offLight(this)
this.currentState = this.offLight // 初始状态
}
Light.prototype.init = function() {
const btn = document.createElement('button')
btn.innerHTML = '按钮'
document.body.append(btn)
const self = this
btn.addEventListener('click', function() {
self.currentState.press()
})
}
Light.prototype.setState = function(state) { // 改变当前状态
this.currentState = state
}
const light = new Light()
light.init()
6. 手写一个单利模式
const singleton = function(name) {
this.name = name
this.instance = null
}
singleton.prototype.getName = function() {
console.log(this.name)
}
singleton.getInstance = function(name) {
if (!this.instance) { // 关键语句
this.instance = new singleton(name)
}
return this.instance
}
// test
const a = singleton.getInstance('a') // 通过 getInstance 来获取实例
const b = singleton.getInstance('b')
console.log(a === b)
未完，待续～
