JavaScript 常用的8大设计模式有
- 工厂模式:工厂模式是一种创建对象的模式,可以通过一个共同的接口创建不同类型的对象,隐藏了对象的创建过程。
- 单例模式:单例模式是一种只允许实例化一次的对象模式,可以通过一个全局访问点来访问它。
- 建造者模式:建造者模式是一种创建复杂对象的模式,通过将对象的构建过程分解为多个步骤,逐步构建对象。
- 适配器模式:适配器模式是一种将不兼容的接口转换为兼容接口的模式,通过适配器可以使得不同的对象能够相互协作。
- 观察者模式:观察者模式是一种定义一对多的依赖关系,当一个对象发生改变时,所有依赖于它的对象都会得到通知并自动更新的模式。
- 装饰者模式:装饰者模式是一种在不改变对象自身的基础上,动态地扩展对象的功能的模式,通过装饰器可以给对象添加新的功能。
- 策略模式:策略模式是一种定义一系列算法,并将其封装在独立的策略类中,使得它们可以相互替换的模式,通过策略模式可以动态改变对象的行为。
- 命令模式:命令模式是一种将请求封装成对象,从而使得请求可以被保存、传递、取消、排队或记录的模式,通过命令模式可以将发出请求的对象和执行请求的对象解耦。
JavaScript 设计模式的示例代码:
- 工厂模式:
// 定义一个工厂函数
function createPerson(name, age) {
const person = {};
person.name = name;
person.age = age;
person.sayName = function() {
console.log(this.name);
};
return person;
}
// 使用工厂函数创建对象
const person1 = createPerson('Alice', 20);
const person2 = createPerson('Bob', 30);
person1.sayName(); // Alice
person2.sayName(); // Bob
- 单例模式:
// 定义一个单例对象
const logger = {
log: function(message) {
console.log(message);
}
};
// 使用单例对象记录日志
logger.log('This is a log message.');
3.建造者模式:
// 定义一个建造者类
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 }
- 适配器模式:
// 定义一个不兼容的接口
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.
- 观察者模式:
// 定义一个主题对象
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!
- 装饰者模式:
// 定义一个被装饰的对象
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(); // Component, Decorator added new behavior.
- 命令模式
在命令模式中,有四个主要的角色:
- 命令(Command):封装了请求的所有信息,包括命令的接收者、具体的操作方法等。通常定义一个接口或抽象类,由具体命令类实现。
- 具体命令(Concrete Command):实现了命令接口或抽象类,并封装了接收者的操作方法。当接收者需要执行命令时,就调用具体命令的execute()方法。
- 调用者(Invoker):负责将命令对象传递给接收者,并在需要时调用命令的execute()方法。调用者不需要知道具体的命令,只需要知道如何调用命令对象。
- 接收者(Receiver):具体执行命令的对象。当命令对象的execute()方法被调用时,接收者就会执行相应的操作。
// 定义命令接口
class Command {
execute() {}
}
// 定义具体命令类
class ConcreteCommand extends Command {
constructor(receiver) {
super();
this.receiver = receiver;
}
execute() {
this.receiver.action();
}
}
// 定义接收者
class Receiver {
action() {
console.log("接收者执行操作。");
}
}
// 定义调用者
class Invoker {
setCommand(command) {
this.command = command;
}
executeCommand() {
this.command.execute();
}
}
// 创建接收者、命令和调用者对象
const receiver = new Receiver();
const command = new ConcreteCommand(receiver);
const invoker = new Invoker();
// 将命令传递给调用者,并执行命令
invoker.setCommand(command);
invoker.executeCommand(); // 输出:接收者执行操作。
以上是一些常见的 JavaScript 设计模式示例代码。这些示例代码只是用来说明设计模式的基本思想和实现方式,实际应用中可能需要更多的定制和细节处理。
标签:常用,const,name,对象,JavaScript,模式,new,设计模式,log From: https://www.cnblogs.com/zy-mg/p/17296551.html