单例模式(Singleton Pattern):
单例模式确保一个类只有一个实例,并提供一个全局访问点。在前端开发中,这可以用于创建一个全局状态管理器,例如 Redux 或 Vuex。
class Singleton {
constructor() {
if (!Singleton.instance) {
Singleton.instance = this;
}
return Singleton.instance;
}
}
const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // 输出 true
观察者模式(Observer Pattern):
观察者模式用于建立对象之间的一对多依赖关系,当一个对象状态发生变化时,所有依赖它的对象都会得到通知。在前端中,这常用于实现事件处理和订阅/发布系统。
class Subject {
constructor() {
this.observers = [];
}
addObserver(observer) {
this.observers.push(observer);
}
notify(message) {
this.observers.forEach(observer => observer.update(message));
}
}
class Observer {
constructor(name) {
this.name = name;
}
update(message) {
console.log(`${this.name} received message: ${message}`);
}
}
const subject = new Subject();
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');
subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notify('Hello, observers!');
工厂模式(Factory Pattern):
工厂模式用于创建对象,隐藏了对象的具体实现细节。在前端中,可以用于创建不同类型的 UI 组件或处理 AJAX 请求。
class Button {
constructor(label) {
this.label = label;
}
render() {
const button = document.createElement('button');
button.textContent = this.label;
return button;
}
}
class Input {
constructor(type) {
this.type = type;
}
render() {
const input = document.createElement('input');
input.type = this.type;
return input;
}
}
function createUIComponent(type, label) {
if (type === 'button') {
return new Button(label);
} else if (type === 'input') {
return new Input(label);
}
}
const button = createUIComponent('button', 'Click me');
const input = createUIComponent('input', 'text');