设计模式
别样红。
每当我想说什么的时候,往往也是我最沉默的时候。
展开
-
前端设计模式之中介者模式
定义定义一个中介对象来封装一系列对象之间的交互,使原有对象之间的耦合松散,且可以独立地改变它们之间的交互。中介者模式又叫调停模式,它是迪米特法则的典型应用。与代理模式不同,代理模式是一对一结构中,代替某方与另一方沟通的模式;而中介者模式是一种一对多结构中,作为一个单独的结构,将这种一对多关联转变为一对一的关联,提高系统的灵活性,使得系统易于维护和扩展。结构抽象中介者(Mediator)角色:它是中介者的接口,提供了同事对象注册与转发同事对象信息的抽象方法。具体中介者(Concrete Media原创 2022-02-13 21:34:04 · 182 阅读 · 0 评论 -
前端设计模式之备忘录模式
定义保存一个对象的某个状态,以便在适当的时候恢复对象,备忘录模式属于行为型模式。解决的问题各种 word 等文本域之类的功能,其中的 撤回 功能;可以考虑用来优化列表,保存对应的页码的数据,优化页面加载数据。结构备忘录模式的主要角色如下。备忘录(Memento)角色:具体对象的结构;发起人(Originator)角色:设置当前数据和获取当前数据的对象;管理者(Caretaker)角色:对备忘录进行管理(一般是通过一个 List结构 保存多个 Memento),提供保存与获取备忘录的功原创 2022-02-11 16:29:54 · 345 阅读 · 0 评论 -
前端设计模式之策略(Strategy)模式
定义策略(Strategy)模式定义了一系列算法,并将每个算法封装起来,使它们可以相互替换,且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式,它通过对算法进行封装,把使用算法的责任和算法的实现分割开来,并委派给不同的对象对这些算法进行管理。策略(Strategy)模式最核心的一点就是,每个算法的结构是一样的,体现在 js 中,可能就是入参和返回值一样,这样才能保证可以相互替换。结构:对 ts 而言,抽象的 算法 类,定义好每个算法的结构;对于 js 而言,就是一个 顶级类 ,所有具体的原创 2022-02-07 20:33:01 · 530 阅读 · 0 评论 -
前端设计模式之状态模式
定义状态(State)模式的定义:对有状态的对象,把复杂的“判断逻辑”提取到不同的状态对象中,允许状态对象在其内部状态发生改变时改变其行为。简单的说,就是定义好各个状态(一般是定义好的),通过一个中间对象来设置和获取当前状态,并执行对应状态的方法。结构:环境类(Context)角色:也称为上下文,它定义了客户端需要的接口,内部维护一个当前状态,并负责具体状态的切换。具体状态(Concrete State)角色:实现抽象状态所对应的行为,并且在需要的情况下进行状态切换。解决的问题:状态模式原创 2022-01-28 16:57:34 · 549 阅读 · 0 评论 -
前端设计模式之命令模式
定义命令(Command)模式的定义如下:将一个请求封装为一个对象,使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通,这样方便将命令对象进行储存、传递、调用、增加与管理。命令模式最主要的一个功能就是解耦,将发出请求的部分与执行请求的部分分离开,通过命令对象进行连接。命令模式的结构(也可以不是类,而是方法,主要是思路而不是具体的形式):具体命令类(Concrete Command)角色:是抽象命令类的具体实现类,连接实现者与调用者,它拥有实现者对象,并通过调用实现者的功能来完原创 2022-01-27 13:36:14 · 395 阅读 · 0 评论 -
前端设计模式之模板模式
定义在模板模式(Template Pattern)中,一个抽象类公开定义了执行它的方法的方式/模板。它的子类可以按需要重写方法实现,但调用将以抽象类中定义的方式进行。这种类型的设计模式属于行为型模式。简单来说: 在一个 abstract 类中,定义好要执行的方法,同时定义好方法的执行顺序,然后在子类中,去具体实现方法,最后调用封装了执行顺序的方法。结构:abstract 类,其中封装了执行顺序的方法,以及每一步要执行的抽象方法;子类,实现了各种方法,最后调用父类中 执行顺序 的方法。为了原创 2022-01-25 14:29:20 · 299 阅读 · 0 评论 -
前端设计模式之组合模式
定义组合模式 允许以相同的方式处理单个对象和对象的组合体;意图是将对象组合成树形结构以表示 “部分 - 整体” 的层次结构;Composite 使得用户对单个对象和组合对象的使用具有一致性。使用场景:其实就定义来看,真的是比较模糊,很难总结出一个比较核心的规律。先从使用场景开始看,组合模式 一般使用率不高,但是当需要使用时,基本就说明必用不可。文件系统:文件包括,目录和文件两个部分,整体可以明白,文件就是一个树结构,目录可以包含目录,可以包含文件,文件作为一个叶子节点,不存在下一级,原创 2022-01-12 16:21:29 · 277 阅读 · 0 评论 -
前端设计模式之代理模式
代理模式在某些情况下,一个客户不想或者不能直接引用一个对象,此时可以通过一个称之为“代理”的第三者来实现间接引用。代理对象可以在客户端和目标对象之间起到中介的作用,并且可以通过代理对象去掉客户不能看到的内容和服务或者添加客户需要的额外服务。代理模式需要的三个必不可少的对象被代理的对象;做代理的对象;使用代理对象的对象。简单的理解这三个对象,以买车为例:被代理的对象 可以理解成汽车厂家,厂家只负责生产车子,所以此时就需要 4s店 来提供销售和服务,此时 4s店 就是 做代理的对象,作为消原创 2021-12-27 09:57:19 · 568 阅读 · 0 评论 -
前端设计模式之抽象工厂模式
抽象工厂模式:工厂方法模式 主要是作用与同一类产品,比如说:手机,而 抽象工厂模式 是对一产品簇的抽象,比如说, 小米有小米手机,小米笔记本…如果说 工厂方法模式 是对同一类产品的抽象,那么 抽象工厂模式 就是对同一类簇的抽象,也可以说是对一个复杂对象,进行更细致的抽象;简单的类比,小米从当初的小米手机发展成小米商城,小米一开始创建时,只有小米手机这一类产品,此时可以用 工厂方法模式,管理小米手机,但是当小米日益庞大,就需要更细致的划分,比如,小米手机,小米笔记本… 这个时候,就相当于 抽象工厂模原创 2021-12-15 15:32:34 · 328 阅读 · 0 评论 -
前端设计模式之简单工厂模式
简单工厂模式就是对同一类对象创建过程的抽象,在形式上它仅仅只是通过 if 等判断语句,根据不同条件去生成不同对象,且只能创建已经设计的好的数据,如果要添加新的数据,必须手动添加。interface IPhone { name: string; price: number;}enum Phones { hw, mi}// 这里的 Shop 则表示一个工厂,它将数据包裹,根据需求提供数据。class Shop { // 华为手机 hwPhone:IPhone = {.原创 2021-12-10 15:18:26 · 315 阅读 · 0 评论 -
JS设计模式之工厂模式
JS设计模式之工厂模式工厂模式大体分为三类: 简单工厂模式、 工厂方法模式、抽象工厂模式。三者之间的关系,也是渐进式的,抽象化的范围也是越来越高。1. 简单工厂模式:对同一类对象创建过程的抽象,在形式上它仅仅只是简单的通过 switch 等判断语句,根据不同条件去生成不同对象,且只能创建现有的数据,如果要添加,必须手动添加。interface IPhone { name: string; price: number;}enum Phones { hw, mi}/原创 2021-11-19 17:25:11 · 2307 阅读 · 0 评论