首页 > 编程语言 >你不会还不知道JavaScript常用的8大设计模式?

你不会还不知道JavaScript常用的8大设计模式?

时间:2023-04-07 16:25:47浏览次数:48  
标签:常用 const name 对象 JavaScript 模式 new 设计模式 log

JavaScript 常用的8大设计模式有

  1. 工厂模式:工厂模式是一种创建对象的模式,可以通过一个共同的接口创建不同类型的对象,隐藏了对象的创建过程。
  2. 单例模式:单例模式是一种只允许实例化一次的对象模式,可以通过一个全局访问点来访问它。
  3. 建造者模式:建造者模式是一种创建复杂对象的模式,通过将对象的构建过程分解为多个步骤,逐步构建对象。
  4. 适配器模式:适配器模式是一种将不兼容的接口转换为兼容接口的模式,通过适配器可以使得不同的对象能够相互协作。
  5. 观察者模式:观察者模式是一种定义一对多的依赖关系,当一个对象发生改变时,所有依赖于它的对象都会得到通知并自动更新的模式。
  6. 装饰者模式:装饰者模式是一种在不改变对象自身的基础上,动态地扩展对象的功能的模式,通过装饰器可以给对象添加新的功能。
  7. 策略模式:策略模式是一种定义一系列算法,并将其封装在独立的策略类中,使得它们可以相互替换的模式,通过策略模式可以动态改变对象的行为。
  8. 命令模式:命令模式是一种将请求封装成对象,从而使得请求可以被保存、传递、取消、排队或记录的模式,通过命令模式可以将发出请求的对象和执行请求的对象解耦。

JavaScript 设计模式的示例代码:

  1. 工厂模式:
// 定义一个工厂函数
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

  1. 单例模式:
// 定义一个单例对象
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 }

  1. 适配器模式:
// 定义一个不兼容的接口
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.

  1. 观察者模式:
// 定义一个主题对象
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!

  1. 装饰者模式:
// 定义一个被装饰的对象
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.

  1. 命令模式

在命令模式中,有四个主要的角色:

  1. 命令(Command):封装了请求的所有信息,包括命令的接收者、具体的操作方法等。通常定义一个接口或抽象类,由具体命令类实现。
  2. 具体命令(Concrete Command):实现了命令接口或抽象类,并封装了接收者的操作方法。当接收者需要执行命令时,就调用具体命令的execute()方法。
  3. 调用者(Invoker):负责将命令对象传递给接收者,并在需要时调用命令的execute()方法。调用者不需要知道具体的命令,只需要知道如何调用命令对象。
  4. 接收者(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

相关文章

  • Vim常用指令整理
    1.基本指令1.1移动命令1.1.1光标的基本移动命令解释h,j,k,l左,下,上,右H把光标移到屏幕最顶端一行M把光标移到屏幕中间一行L把光标移到屏幕最底端一行+或Enter把光标移至下一行第一个非空白字符-把光标移至上一行第一个非空白字符w光标停在......
  • Python求100以内的素数常用方法!
    与其他编程语言对比,Python拥有十分独特的优势代码量少,相同功能其他编程语言需要上百行代码才可以实现,而Python只需要十几行就可以实现。而且在Python中,我们只需要学会一些基础的语法就可以实现简单的数值计算,那么Python求100内的所有素数方法是什么?具体内容请看下文。质数......
  • docker一些常用的指令
    基于社区版Docker(docker-ce)管理守护进行指令:systemctlstartdocker#运行Docker守护进程systemctlstopdocker#停止Docker守护进程systemctlrestartdocker#重启Docker守护进程systemctlenabledocker#设置Docker开机自启动systemctlstatusdocker......
  • 常用的ControlNet以及如何在Stable Diffusion WebUI中使用
    上一次我们已经介绍了如何通过代码的方式使用ControlNet,StableDiffusionWebUI里面包含了很详细的使用设置,我们可以直接在上面进行操作,所以本文将介绍如何以傻瓜的方式直接使用ControlNet。如果你用过StableDiffusion,可能已经注意到图像的输出有无限的结果可能性,就像在赌博一样......
  • Halcon 常用设置
     1、可视化--更新窗口-- 在单步模式--总是   2、Ctrl+E  弹出内置的函数定义  3、打开工程的默认图片位置  ......
  • linux 常用命令
    1.文件名转码 convmv-futf-8-tgbk-r--notest /home/tmp-f原来的编码方式-t 要更改为的编码方式-r表示这个目录下面的所有文件--notest表示马上执行,而不是仅仅测试而已2.打包、解压tar-zcvf 123.tar.gzdoc  --压缩doc文件目录tar-zxvf123.tar.gz   -......
  • 查看常用thinkphp3.2.x和thinkphp5.1.x版本方法
    1、Thinkphp3.2.x在\ThinkPHP\ThinkPHP.php文件中直接查找,例如//版本信息constTHINK_VERSION='3.2.4'; 2、由于tp3.2本身定义了版本信息的常量,所以也可以通过在控制器中打印版本信息的方法进行查看echoTHINK_VERSION;  3、查看tp5.1.x的版本信息方法一......
  • C# javascript中调用自定义函数function
    Default.aspx1<script>2//自定义函数3functionpageInit(){4letdata=[];5varsource_data=my_source_data2();//my_source_data2是一般程序Handler.ashx中,自定义的方法6varmy_data=source_data.split('###');......
  • CSS常用背景属性(背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、
    本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color、背景图片:background-image、背景平铺:background-repeat、背景位置:background-position和背景附着:background-attachment。同时记录了背景色半透明的写法以及背景属性复合写法。1常用背景属性属性描述使用......
  • python中sys模块常用的一些方法
    一、sys模块sys模块负责程序与python解释器的交互,提供了一系列的函数和变量,用于操控python的运行时环境。 sys.argv命令行参数List,第一个元素是程序本身路径sys.modules.keys()返回所有已经导入的模块列表sys.exc_info()获取当前正在处理的异常类,exc_type、exc_value......