设计模式

150 阅读7分钟

设计模式

创建型模式

  • 工厂方法模式 在父类中提供一个创建对象的方法, 允许子类决定实例化对象的类型
  • 抽象工厂模式 能创建一系列相关的对象, 而无需指定其具体类
  • 生成器模式 使你能够分步骤创建复杂对象。 该模式允许你使用相同的创建代码生成不同类型和形式的对象
  • 原型模式 使你能够复制已有对象, 而又无需使代码依赖它们所属的类
  • 单例模式 让你能够保证一个类只有一个实例, 并提供一个访问该实例的全局节点

结构型模式

  • 适配器模式 是一种结构型设计模式, 它能使接口不兼容的对象能够相互合作
  • 桥接模式 是一种结构型设计模式, 可将一个大类或一系列紧密相关的类拆分为抽象和实现两个独立的层次结构, 从而能在开发时分别使用。
  • 组合模式 是一种结构型设计模式, 你可以使用它将对象组合成树状结构, 并且能像使用独立对象一样使用它们
  • 装饰模式 是一种结构型设计模式, 允许你通过将对象放入包含行为的特殊封装对象中来为原对象绑定新的行为
  • 外观模式 是一种结构型设计模式, 能为程序库、 框架或其他复杂类提供一个简单的接口
  • 享元模式 是一种结构型设计模式, 它摒弃了在每个对象中保存所有数据的方式, 通过共享多个对象所共有的相同状态, 让你能在有限的内存容量中载入更多对象
  • 代理模式 是一种结构型设计模式, 让你能够提供对象的替代品或其占位符。 代理控制着对于原对象的访问, 并允许在将请求提交给对象前后进行一些处理。

行为模式

  • 责任链模式 是一种行为设计模式, 允许你将请求沿着处理者链进行发送。 收到请求后, 每个处理者均可对请求进行处理, 或将其传递给链上的下个处理者
  • 命令模式 是一种行为设计模式, 它可将请求转换为一个包含与请求相关的所有信息的独立对象。 该转换让你能根据不同的请求将方法参数化、 延迟请求执行或将其放入队列中, 且能实现可撤销操作
  • 迭代器模式 是一种行为设计模式, 让你能在不暴露集合底层表现形式 (列表、 栈和树等) 的情况下遍历集合中所有的元素。
  • 中介者模式 是一种行为设计模式, 能让你减少对象之间混乱无序的依赖关系。 该模式会限制对象之间的直接交互, 迫使它们通过一个中介者对象进行合作
  • 备忘录模式 是一种行为设计模式, 允许在不暴露对象实现细节的情况下保存和恢复对象之前的状态。
  • 观察者模式 是一种行为设计模式, 允许你定义一种订阅机制, 可在对象事件发生时通知多个 “观察” 该对象的其他对象。
  • 状态模式 是一种行为设计模式, 让你能在一个对象的内部状态变化时改变其行为, 使其看上去就像改变了自身所属的类一样。
  • 策略模式 是一种行为设计模式, 它能让你定义一系列算法, 并将每种算法分别放入独立的类中, 以使算法的对象能够相互替换。
  • 模板方法模式 是一种行为设计模式, 它在超类中定义了一个算法的框架, 允许子类在不修改结构的情况下重写算法的特定步骤。
  • 访问者模式 是一种行为设计模式, 它能将算法与其所作用的对象隔离开来。

常见设计模式

单例模式

定义:

  • 只有一个实例
  • 可以全局访问 主要解决: 一个全局使用的类,频繁的创建和销毁

何时使用:当你想控制实例的数目,节省系统化资源的时候

如何实现:判断系统是否已经有这个单例,如果有则返回,没有则创建

单例模式优点:内存中只要一个实例,减少内存开销,尤其是频繁的创建和销毁实例(比如说是首页页面的缓存)

使用场景:

  • 全局的缓存(首页加载比较慢的情况下)
  • 弹窗 (登录弹窗)

es5实现单例模式

  • 判断系统中是否已经有这个单例,如果有则返回,没有则创建
  • 在内存中做一个标记,此时需要用到闭包 组件单一职责思想

WechatIMG914.jpeg

es6实现单例模式 class 类可以看做是 es5构造函数的语法糖

WechatIMG919.jpeg

主要利用是是类里面的静态方法 static 关键字,生成静态方法,只能被类本身调用,不能在其他实例中调用 WechatIMG918.jpeg

策略模式

定义:一系列的算法,或者业务逻辑,把他们封装起来,并且他们之间可以相互替换

核心:将算法的使用, 和 算法的实现分离开来

需求: 年底奖金发放, from 表单提交等

WechatIMG921.jpeg

发布订阅模式

含义说明: 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知

作用: 1、支持简单的广播通信,当对象状态发生改变时,会自动通知已经订阅过的对象 2、可以应用在异步编程中,代替回调函数,可以订阅 ajax之后的事件,只需订阅自己需要的部分(那么 ajax 调用发布之后订阅的就可以拿到消息了)(不需要关心对象在异步运行时候的状态) 3、对象之间的松耦合,两个对象之间都互相不了解彼此,但是,不影响通信,当有新的订阅者出现的时候,发布的代码无需言改变,同样发布的代码改变,只要之前约定的事件名称没有改变,也不影响订阅 4、vue react 之间实现跨组件之间的传值

如何实现发布-订阅模式 1、首先想好谁是发布者 2、然后给发布者添加一个缓存列表,用于存放回调函数来通知订阅者 3、最后就是发布消息,发布者遍历这个缓存列表,依次触发里面存放的订阅者回调函数 第一个版本

WechatIMG923.jpeg

第二个版本

WechatIMG924.jpeg

WechatIMG925.jpeg

第三个版本

WechatIMG926.jpeg

MVC

WechatIMG928.jpeg

缺点:

1、数据流混乱,问题查找困难

WechatIMG929.jpeg 2、view 比较庞大,而 controller 比较单薄: 由于很多的开发者都会在 view 中写一些逻辑代码,逐渐的就导致 view中的内容越来越庞大,而 controller 变的越来越单薄,显得可有可无

MVP

WechatIMG930.jpeg

MVVM

WechatIMG931.jpeg

总结

  • 这三个框架模式反应web前端领域的一个发展进程,他们设计的目标都是为了职责划分,代码分层,解决维护性问题 解决Model和View的耦合问题,把代码分层,让它的可读性,可维护性更高一些
  • MVC模式出现较早主要应用在后端,如Spring MVC, ASP.NET MVC等,在前端领域的早期也有应用,如Backbone.js。它的有点是分层清晰,缺点是数据流混乱,灵活性带来的维护性问题
  • MVP模式是在MVC的进化形式,persenter作为中间层负责VM通信,解决了两者耦合问题,但 P层过于臃肿,会导致维护问题
  • MVVM模式在前端领域有广泛应用,它不仅解决MV耦合问题,还同时解决了维护两者映射关系的大量复杂代码和DOM操作代码,在提高开发效率,可读性同时还保持了优越的性能表现