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 分钟前
【JAVA开源】基于Vue和SpringBoot的宠物咖啡馆平台
java·前端·vue.js·spring boot·开源·宠物
天蓝蓝的本我27 分钟前
FireFox简单设置设置
前端·firefox
介次别错过1 小时前
数字马力ai面试题
前端
暴富的Tdy1 小时前
【纯前端实现xlsx的解析并处理成table需要的格式】
前端·javascript·vue·xlsx解析·js数组方法
IT农民工~1 小时前
《网络基础之 HTTP 协议:状态码含义全解析》
服务器·前端·网络·python·网络协议·http
三天不学习1 小时前
解决npm install安装出现packages are looking for funding run `npm fund` for details问题
前端·npm·node.js
sky丶Mamba2 小时前
EventSource是什么,和axios区别,以及SSE是什么
前端
摇滚侠2 小时前
Vue83 引入elementUI
前端·javascript·elementui
wuyanwenyun2 小时前
elementui+vue 多行数据的合并单元格
前端·vue.js·elementui
懒羊羊大王呀2 小时前
CSS——文字渐入效果
前端·css