0%

JavaScript 设计模式 Design Pattern

作者:李旭光
引用请标明出处

前言

最近在整理自己的知识体系,一方面为了夯实基础,另一方面也为了查缺补漏、重新理解,设计模式之前看过大概三四次,从最开始一点都不懂,到后面看了几遍以后慢慢理解,今天再次整理一下,希望这一遍下来之后能更加透彻的理解什么是设计模式。

什么是设计模式

设计模式的定义:在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案
设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。

  使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问,设计模式于己于他人于系统都是多赢的;设计模式使代码编制真正工程化;设计模式是软件工程的基石脉络,如同大厦的结构一样。 —- 百度百科

不知道大家看了上面的定义以后是什么感受,说实话我第一次看到这句话并没有什么深刻的认识,什么面向对象的软件设计,什么针对特定问题,什么优雅的解决方案,这都说的是什么,后来我看了几遍之后,上面这句话用我的理解翻译如下:

软件开发过程中,解决某一类问题用到的一系列套路

这就是我对设计模式的认识。当然这也不仅仅是我自己的认识,在跟其他的一些开发人员交流时,很多人都是这么认为的。

这些解决问题的方案实在是太好用了,所以大神就把它们抽象出来,然后起了个名字-就叫做设计模式了。

这么说大家可能还是不太明白,举个开发过程中可能遇到的实际例子吧。

当系统中某个接口的结构已经无法满足我们现在的业务需求,但又不能改动这个接口,因为可能原来的系统很多功能都依赖于这个接口,改动接口会牵扯到太多文件。那么这种场景下我们该如何解决这个问题呢?通常我们需要新增一个接口,兼容原来的接口和新的业务需求参数。
因此应对这种场景,我们可以很快地想到可以用适配器模式来解决这个问题。

这就是设计模式的应用,实际上也许你还不知道设计模式这个词,但是你已经在工作中频繁的用到了设计模式,下面我们就来看看到底有哪些设计模式。

哦,对了,设计模式并不依赖于语言,它本身更像是一种软件的设计思想,因为我是一个前端,所以接下来具体实现的时候我会使用js来实现设计模式的用法。

学习设计模式

目前被普遍接受的经典的设计模式共有 23 种,而这23种设计模式又分为了 3大类 ,看过一张图这里拿过来镇贴。
lHgD4H.jpg
他们分别是

  • 创建型模式
  • 结构型模式
  • 行为型模式

接下来,我将会将这23种,3大类设计模式一个个的拆解开来,跟大家一起学习一下,设计模式有哪些内容。

创建型模式 6个

这类模式用于对象的生成生命周期的管理
创建型模式可以决定生成哪些对象,提高了程序的灵活性。具体属于此类的模式清单如下,共有 5 个:

  • 单例模式(Singleton)
  • 工厂方法模式(Factory Method)
  • 抽象工厂模式(Abstract Factory)
  • 建造者模式(Builder)
  • 原型模式(Prototype)
  • 迭代器模式(Iterator)

单例模式(Singleton)

描述:确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例。

工厂方法模式(Factory Method)

描述:定义一个用于创建对象的接口,让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。

抽象工厂模式(Abstract Factory)

描述:为创建一组相关或相互依赖的对象提供一个接口,而且无需指定它们的具体类

建造者模式(Builder)

描述:将一个复杂对象的构建与他的表示分离,使得同样的构建过程可以创建不同的表示。

原型模式(Prototype)

描述:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。

迭代器模式(Iterator)

描述:提供一种方法访问一个容器对象中的各个元素,而又不需暴露该对象的内部细节。

结构型模式 7个

  • 适配器模式(Adapter)
  • 组合模式(Compositor)
  • 代理模式(Proxy)
  • 桥梁模式(Bridge)
  • 装饰模式(Decorator)
  • 门面模式(Facade)
  • 享元模式(Flyweight)

适配器模式(Adapter)

描述:将一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作。

组合模式(Compositor)

描述:将对象组合成树形结构

代理模式(Proxy)

描述:

桥梁模式(Bridge)

描述:

装饰模式(Decorator)

描述:

门面模式(Facade)

描述:

享元模式(Flyweight)

描述:

行为型模式 10个

  • 命名模式(Command)
  • 解释器模式(Interpreter)
  • 责任链模式(Chian of Responsibility)
  • 观察者模式(Observer)
  • 中介者模式(Mediator)
  • 备忘录模式(Memento)
  • 状态模式(State)
  • 策略模式(Strategy)
  • 模板方法模式(Template Method)
  • 访问者模式(Visitor)

命名模式(Command)

描述:

解释器模式(Interpreter)

描述:

责任链模式(Chian of Responsibility)

描述:

观察者模式(Observer)

描述:

中介者模式(Mediator)

描述:

备忘录模式(Memento)

描述:

状态模式(State)

描述:

策略模式(Strategy)

描述:

模板方法模式(Template Method)

描述:

访问者模式(Visitor)

描述:

如果觉得不错请支持作者
------ 版权声明 ------

本文标题:JavaScript 设计模式 Design Pattern

文章作者:

发布时间:2020年01月13日 - 12:22

最后更新:2020年04月02日 - 03:20

原始链接:https://blog.lifesli.com/2020/01/13/Javascript-Design-Pattern/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。