前端开发中常用的设计模式包括了许多种，这些模式可以被用来解决各种不同的问题，包括代码结构、代码耦合度以及性能问题等。在本文中，我们将会介绍以下几种前端设计模式：单例模式、观察者模式、代理模式、装饰器模式、工厂模式和策略模式。
单例模式是一种保证一个类只有一个实例的模式。它通常用于控制某个共享资源的访问，例如全局配置对象或日志对象。在 JavaScript 中，我们可以使用一个自执行函数和闭包来实现单例模式，如下所示：
const Singleton = (function () {
let instance;
function createInstance() {
let object = new Object("I am the instance");
return object;
}
return {
getInstance: function () {
if (!instance) {
instance = createInstance();
}
return instance;
},
};
})();
let instance1 = Singleton.getInstance();
let instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true以上代码中，我们使用了一个自执行函数来创建一个闭包来保存 instance 变量。实际上，在此之中，我们将一个对象字面量返回给调用方，该对象公开了一个名为 getInstance 的函数。第一次调用 getInstance 函数时，它将检查变量 instance 是否已经存在，如果不存在，它将调用 createInstance 函数来创建一个新的实例。
观察者模式是一种在对象之间定义一对多依赖关系的模式。当一个对象状态发生变化时，所有依赖于它的对象都会得到通知，并自动更新。在 JavaScript 中，我们可以使用订阅/发布模式来实现观察者模式，如下所示：
class Subject {
constructor() {
this.observers = [];
}
subscribe(observer) {
this.observers.push(observer);
}
unsubscribe(observer) {
this.observers = this.observers.filter((obs) => obs !== observer);
}
notify(msg) {
this.observers.forEach((observer) => {
observer.update(msg);
});
}
}
class Observer {
constructor(name) {
this.name = name;
}
update(msg) {
console.log(`${this.name} received: ${msg}`);
}
}
const subject = new Subject();
const observer1 = new Observer("Observer 1");
const observer2 = new Observer("Observer 2");
subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify("A new notification has been sent!");代理模式是一种为另一个对象提供替代品或占位符的模式。它允许我们控制对对象的访问，并且可以延迟对象的创建或直到需要访问它时才进行创建。在 JavaScript 中，代理模式通常被用于延迟加载大型对象或限制对敏感对象的访问。例如，我们可以使用代理模式来加载和显示图片：
class Image {
constructor(url) {
this.url = url;
}
draw() {
console.log(`Image drawn ${this.url}`);
}
}
class ProxyImage {
constructor(url) {
this.url = url;
}
draw() {
if (!this.image) {
this.image = new Image(this.url);
}
this.image.draw();
}
}
const image = new ProxyImage("https://www.example.com/image.jpg");
image.draw();以上代码中，我们创建了一个 Image 类用于加载和显示图片，并且创建了一个 ProxyImage 类作为它的代理。在调用 draw 函数时，代理类首先检查内部是否已经存在 Image 对象，如果不存在，则实例化一个新的 Image 对象并调用 draw 函数。
装饰器模式是一种动态地给一个对象添加额外的职责的模式。使用装饰器模式，我们可以在不修改原始类的情况下，将新的行为添加到对象上。在 JavaScript 中，ES6 的修饰器提供了一个方便的方式来实现装饰器模式：
function log(target, name, descriptor) {
const original = descriptor.value;
if (typeof original === "function") {
descriptor.value = function (...args) {
console.log(`Arguments: ${args}`);
try {
const result = original.apply(this, args);
console.log(`Result: ${result}`);
return result;
} catch (e) {
console.log(`Error: ${e}`);
throw e;
}
};
}
return descriptor;
}
class Calculator {
@log
add(x, y) {
return x + y;
}
}
const calculator = new Calculator();
calculator.add(2, 3);工厂模式是一种用来创建对象的模式。它允许我们在不暴露对象创建逻辑的前提下实例化对象。在 JavaScript 中，我们可以使用工厂函数或构造函数来实现工厂模式。例如：
function createPerson(name, age, gender) {
return {
name,
age,
gender,
introduce() {
console.log(`Hello, my name is ${this.name}, and I am a ${this.gender} of ${this.age} years old.`);
},
};
}
const person1 = createPerson("John", 25, "male");
const person2 = createPerson("Alice", 30, "female");
person1.introduce(); // Hello, my name is John, and I am a male of 25 years old.
person2.introduce(); // Hello, my name is Alice, and I am a female of 30 years old.策略模式是一种将算法簇封装起来的设计模式。它允许我们在运行时根据需要选择一个算法。在 JavaScript 中，我们可以使用对象字面量或类来实现策略模式。例如：
const strategies = {
add: (x, y) => x + y,
subtract: (x, y) => x - y,
multiply: (x, y) => x * y,
divide: (x, y) => x / y,
};
class Calculator {
constructor(strategy) {
this.strategy = strategy;
}
setStrategy(strategy) {
this.strategy = strategy;
}
calculate(x, y) {
return this.strategy(x, y);
}
}
const calculator = new Calculator(strategies.add);
console.log(calculator.calculate(2, 3)); // 5
calculator.setStrategy(strategies.multiply);
console.log(calculator.calculate(2, 3)); // 6以上是常用的前端设计模式，它们分别在不同的场景下展现出了它们的强大能力。在实际的开发中，我们应该根据不同的情况选择适合的设计模式，以提高代码质量和可维护性。