Web前端高级工程师培训:设计模式相关

设计模式相关

本节知识点

  • 工厂模式及自定义事件
  • 抽离英雄基类
  • 设计原则
  • 单例模式使用
  • 装饰者模式使用
  • 代理模式
  • 观察者模式
  • 适配器模式...

课堂目标

  • 学会各种设计模式的使用
  • 学会面向对象中抽象使用
  • 理解类中的继承
  • oop思想规划项目

设计原则

SOLID(稳定的)

  • 单一职责原则(Single Responsibility Principle)

    一个类应该只有一个发生变化的原因。简而言之就是每个类只需要负责自己的那部分,类的复杂度就会降低。

  • 开闭原则(Open Closed Principle)

    • 一个软件实体,如类、模块和函数应该对扩展开放,对修改关闭
  • 里氏替换原则(Liskov Substitution Principle)

    所有引用基类的地方必须能透明地使用其子类的对象,也就是说子类对象可以替换其父类对象,而程序执行效果不变。

  • 迪米特法则(Law of Demeter)

    迪米特法则(Law of Demeter)又叫作最少知识原则(The Least Knowledge Principle),一个类对于其他类知道的越少越好,就是说一个对象应当对其他对象有尽可能少的了解,只和朋友通信,不和陌生人说话。

  • 接口隔离原则(Interface Segregation Principle) flow 、ts

    • 多个特定的客户端接口要好于一个通用性的总接口
  • 依赖倒置原则(Dependence Inversion Principle)

    1、上层模块不应该依赖底层模块,它们都应该依赖于抽象。

    2、抽象不应该依赖于细节,细节应该依赖于抽象

案例内容扩展

  • 扩展皮肤功能

  • 抽离英雄基类

    • 每个英雄的共有属性
    • 共有方法及独特方法
  • 抽离技能基类

设计模式

​ 设计模式是软件开发人员在软件开发过程中面临的一些具有代表性问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的;

单例模式

  • 单例模式 (Singleton Pattern)又称为单体模式,保证一个类只有一个实例,并提供一个访问它的全局访问点。也就是说,第二次使用同一个类创建新对象的时候,应该得到与第一次创建的对象完全相同的对象。

    • 通过静态属性创建单例

      js 复制代码
      class Person{
          static instance = null;
          constructor(name){
              if(Person.instance){
                  return Person.instance;
              }
              Person.instance = this;
              this.name = name;
          }
      }
    • 通过函数创建单例

      js 复制代码
      let instance;
      function createInstance(...arg){
          if(!instance){
              instance = new Game(...arg);
          }
          return instance;
      }
    • 实现game类的单例

      • 优:单例模式节约内存开支和实例化时的性能开支,节约性能;
      • 缺:单例模式扩展性不强

工厂模式

  • 工厂模式 (Factory Pattern),封装具体实例创建逻辑和过程,外部只需要根据不同条件返回不同的实例。
    • 优点:实现代码复用性,封装良好,抽象逻辑;
    • 缺点:增加了代码复杂程度;

装饰者模式

  • 装饰者模式 (Decorator Pattern)使用一种更为灵活的方式来动态给一个对象/函数等添加额外信息
    • 扩展功能 和继承类似
    • 扩展不同类的功能,和原始类并无关联;

观察者模式(自定义事件)

  • 观察者模式 (Observer Pattern) 定义一个对象与其他对象之间的一种依赖关系,当对象发生某种变化的时候,依赖它的其它对象都会得到更新
    • 自定义事件绑定addEvent
    • 自定义事件触发trigger
    • 自定义事件移除removeEvent
  • 实现案例GameEvent类

代理模式

  • 代理模式 为其他对象提供一种代理以控制对这个对象的访问,类似于生活中的中介。
    • 为hero添加代理模式 控制 伤害的输出

适配器模式

  • 两个不兼容的接口之间的桥梁,将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。

享元模式

享元模式:运用共享技术来有效地支持对象的复用,以减少创建的对象的数量。

  • 通过共享对象节约内存资源,提高性能和效率

课程总结

  • 工厂模式及观察者模式
  • 抽离英雄基类
  • 抽离技能基类
  • 扩展皮肤类
  • 单例模式使用
  • 装饰者模式使用
  • 代理模式
相关推荐
辻戋1 小时前
从零实现React Scheduler调度器
前端·react.js·前端框架
徐同保1 小时前
使用yarn@4.6.0装包,项目是react+vite搭建的,项目无法启动,报错:
前端·react.js·前端框架
Qrun2 小时前
Windows11安装nvm管理node多版本
前端·vscode·react.js·ajax·npm·html5
中国lanwp2 小时前
全局 npm config 与多环境配置
前端·npm·node.js
JELEE.3 小时前
Django登录注册完整代码(图片、邮箱验证、加密)
前端·javascript·后端·python·django·bootstrap·jquery
TeleostNaCl5 小时前
解决 Chrome 无法访问网页但无痕模式下可以访问该网页 的问题
前端·网络·chrome·windows·经验分享
前端大卫6 小时前
为什么 React 中的 key 不能用索引?
前端
你的人类朋友7 小时前
【Node】手动归还主线程控制权:解决 Node.js 阻塞的一个思路
前端·后端·node.js
小李小李不讲道理8 小时前
「Ant Design 组件库探索」五:Tabs组件
前端·react.js·ant design
毕设十刻8 小时前
基于Vue的学分预警系统98k51(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js