JavaScript的设计模式
JavaScript设计模式是指在面向对象编程中,通过对类和对象进行抽象和泛化,提取出一些通用的设计思路和解决方案,以解决常见的软件设计问题。这些设计模式可以分为以下几类进行详细介绍:
一、创建型模式
1. 工厂模式(Factory Pattern)
- 定义:定义一个创建对象的接口,但让子类决定要实例化的类是哪一个。工厂方法让类的实例化推迟到子类中进行。
- 实现方式:可以通过简单工厂、工厂方法和抽象工厂等方式进行实现。
- 简单工厂:通过一个专门的工厂类来创建对象,客户端不需要知道具体的产品类,只需要知道产品类的公共接口。
- 工厂方法:将工厂的职责分配到了具体的产品类中,每个具体的产品类都有一个对应的工厂类。
- 抽象工厂:提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类。
- 示例:工厂方法模式的示例代码如下。
-
// 定义产品接口 class Product { constructor() {} operation() {} } // 定义具体产品类 class ConcreteProductA extends Product { constructor() { super(); } operation() { return 'ConcreteProductA'; } } class ConcreteProductB extends Product { constructor() { super(); } operation() { return 'ConcreteProductB'; } } // 定义工厂接口 class Factory { constructor() {} createProduct() {} } // 定义具体工厂类 class ConcreteFactoryA extends Factory { constructor() { super(); } createProduct() { return new ConcreteProductA(); } } class ConcreteFactoryB extends Factory { constructor() { super(); } createProduct() { return new ConcreteProductB(); } } // 调用具体工厂 const factoryA = new ConcreteFactoryA(); const productA = factoryA.createProduct(); console.log(productA.operation()); // 输出: ConcreteProductA
2. 单例模式(Singleton Pattern)
- 定义:确保一个类仅有一个实例,并提供一个全局访问点。
- 实现方式:通常通过创建一个对象并在需要时返回这个对象的引用来实现。
- 示例:
-
class Singleton { static instance = null; constructor() { if (Singleton.instance) { return Singleton.instance; } Singleton.instance = this; // 初始化代码 this.data = "I am the singleton instance"; } getData() { return this.data; } } // 使用 const instance1 = new Singleton(); const instance2 = new Singleton(); console.log(instance1 === instance2); // 输出: true console.log(instance1.getData()); // 输出: I am the singleton instance
3. 建造者模式(Builder Pattern)
- 定义:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。
- 实现方式:通过一个构造器或配置函数来实现,该函数接受多个参数来逐步构建复杂对象。
- 示例:
-
// 定义一个建造者类 class PersonBuilder { constructor() { this.person = {}; } setName(name) { this.person.name = name; return this; } setAge(age) { this.person.age = age; return this; } build() { return this.person; } } // 使用建造者创建对象 const personBuilder = new PersonBuilder(); const person = personBuilder.setName('Alice').setAge(20).build(); console.log(person); // { name: 'Alice', age: 20 }
二、结构型模式
-
原型模式(Prototype Pattern
- 定义:用原型实例指定创建对象的种类,并且通过拷贝这个原型来创建新的对象。
- 在JavaScript中的特点:由于JavaScript本身就是基于原型的语言,因此这个模式在JavaScript中非常自然。
2. 适配器模式(Adapter Pattern)
- 定义:将一个类的接口转换成客户希望的另一个接口,适配器模式让原本接口不兼容的类可以一起工作。
- 实现方式:可以通过函数或对象来实现,这些函数或对象包装了不兼容的接口并提供一个统一的接口。
- 示例:
-
// 定义一个不兼容的接口 class IncompatibleApi { fetchData() { console.log('Fetching data from the incompatible API.'); } } // 定义一个适配器类,将不兼容的接口转换为兼容接口 class Adapter { constructor(incompatibleApi) { this.incompatibleApi = incompatibleApi; } fetch() { this.incompatibleApi.fetchData(); } } // 使用适配器调用兼容接口 const incompatibleApi = new IncompatibleApi(); const adapter = new Adapter(incompatibleApi); adapter.fetch(); // Fetching data from the incompatible API.
3. 装饰者模式(Decorator Pattern)
- 定义:动态地给一个对象添加一些额外的职责,就增加功能来说,装饰者模式相比生成子类更为灵活。
- 实现方式:可以通过高阶函数(接收函数作为参数或返回一个函数的函数)或代理模式(Proxy)来实现。
- 示例:
// 定义一个被装饰的对象 class Component { operation() { console.log('Component'); } } // 定义一个装饰器类,增强被装饰的对象 class Decorator { constructor(component) { this.component = component; } operation() { this.component.operation(); console.log('Decorator added new behavior.'); } } // 使用装饰器增强被装饰的对象 const component = new Component(); const decorator = new Decorator(component); decorator.operation();
4、代理模式(Proxy Pattern)
- 定义:为其他对象提供一种代理以控制对这个对象的访问。
- 在JavaScript中的特点:ES6引入了Proxy对象,它允许定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)。
5. 模块模式(Module Pattern)
- 定义:提供了一种封装私有变量和函数的方法,但同时又提供了一个公共的接口来访问这些私有成员。
- 实现方式:通常通过函数和闭包来实现。
三、行为型模式
1、观察者模式(Observer Pattern)
- 定义:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。
- 实现方式:可以通过事件监听和发布/订阅模式来实现。
- 示例:
// 定义一个主题对象 class Subject { constructor() { this.observers = []; } addObserver(observer) { this.observers.push(observer); } removeObserver(observer) { const index = this.observers.indexOf(observer); if (index !== -1) { this.observers.splice(index, 1); } } notify(data) { this.observers.forEach(observer => { observer.update(data); }); } } // 定义一个观察者对象 class Observer { constructor(name) { this.name = name; } update(data) { console.log(`${this.name} received data: ${data}`); } } // 使用主题对象通知观察者对象 const subject = new Subject(); const observer1 = new Observer('Alice'); const observer2 = new Observer('Bob'); subject.addObserver(observer1); subject.addObserver(observer2); subject.notify('Hello world!'); // Alice received data: Hello world! Bob received data: Hello world!
2、策略模式(Strategy Pattern)
- 定义:定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换。此模式让算法的变化独立于使用算法的客户。
- 实现方式:可以通过函数或对象字面量来实现策略。
- 示例:
// 定义一系列的算法 function addStrategy(a, b) { return a + b; } function subtractStrategy(a, b) { return a - b; } function multiplyStrategy(a, b) { return a * b; } // 定义一个策略上下文类 class Context { constructor(strategy) { this.strategy = strategy; } executeStrategy(a, b) { return this.strategy(a, b); } } // 使用策略模式 const context = new Context(addStrategy); console.log(context.executeStrategy(2, 3)); // 输出 5 context.strategy = subtractStrategy; console.log(context.executeStrategy(5, 2)); // 输出 3 context.strategy = multiplyStrategy; console.log(context.executeStrategy(4, 3)); // 输出 12
原文地址:https://blog.csdn.net/qq_29579625/article/details/142719077
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!