前端常用设计模式

前端常用设计模式

GoF23
  • 一种思维,一种态度,一种进步
创建型模式:
  • 单例模式、工厂模式、抽象工厂模式、建造者模式、原型模式。
结构型模式:
  • 适配器模式,桥接模式,装饰模式,组合模式,外观模式,享元模式,代理模式。
行为型模式:
  • 模板方法模式,命令模式,迭代器模式,观察者模式,中介者模式,备忘录模式,解释器模式,状态模式,策略模式,职责链模式,访问者模式。
OOP七大原则

![image-20201010152004991](/Users/zhoupanpan/Library/Application Support/typora-user-images/image-20201010152004991.png)

前端常用五种设计模式有哪些?
  • 工厂模式
  • 单例模式
  • 代理模式
  • 观察者模式
  • 策略模式
工厂模式

![image-20201010153737126](/Users/zhoupanpan/Library/Application Support/typora-user-images/image-20201010153737126.png)

![image-20201010153932088](/Users/zhoupanpan/Library/Application Support/typora-user-images/image-20201010153932088.png)

抽象工厂模式

![image-20201010173344430](/Users/zhoupanpan/Library/Application Support/typora-user-images/image-20201010173344430.png)

单例模式

核心作用:

  • 保证一个类只有一个实例,并且提供一个访问该实例的全局访问点

常见场景:

  • Windows的任务管理器
  • Windows的回收站
  • 项目中,读取配置文件的类,一般也只有一个对象,没必要每次都去new对象读取
  • 网站的计数器一般也会采用单例模式,可以保证同步
  • 数据库连接池的设计一般也是单例模式
  • 在Servlet编程中,每个Servlet也是单例的
  • 在Spring中,每个Bean默认就是单例的
代理模式

代理模式主要为其他对象提供一种代理以控制对这个对象的访问,主要解决在直接访问对象时带来的问题。

代理模式最基本的形式是对访问进行控制,代理对象和另一个对象(本体)实现的是同样的接口。

实际上工作还是本体在做,它才是负责执行所分派的任务的那个对象或类,代理对象所做的不外乎节制对本体的访问,代理对象并不会在另一对象的基础上添加方法或修改其方法,也不会简化那个对象的接口,它实现的接口与本体完全相同,所有对它进行的方法调用都会被传递给本体。

总结:在上面的代码中,Proxy可以控制对真正被代理对象的一个访问。在代理模式中,比较常见的就是虚拟代理,虚拟代理用于控制对那种创建开销很大的本体的访问,它会把本体的实例化推迟到有方法被调用的时候。

比如说,现在我们假设PublicLibrary的实例化很慢,不能在网页加载的时候立即完成,我们可以为其创建一个虚拟代理,让它把PublicLibrary的实例化推迟到必要的时候,比如说我们在前端中经常用到的图片懒加载,就可以用虚拟代理;

观察者模式

如果大家学过一些像vue,react这些框架,相信大家对观察者模式一定很熟悉,现在很多mvvm框架都用到了观察者模式这个思想,观察者模式又叫做发布—订阅模式。

它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知和更新,观察者模式提供了一个订阅模型,其中对象订阅事件并在发生时得到通知,这种模式是事件驱动的编程基石,它有利益于良好的面向对象的设计

document.body.addEventListener("click", function(){
    alert("hello world")
},false)
document.body.click() // 模拟用户点击

总结:在上面的例子中,需要监听用户点击 document.body 的动作,但是我们是没办法预知用户将在什么时候点击的,因此我们订阅了 document.body 的 click 事件,当 body 节点被点击时,body 节点便会向订阅者发布 "Hello World" 消息。

策略模式

策略模式指的是定义一些列的算法,把他们一个个封装起来,目的就是将算法的使用与算法的实现分离开来,避免多重判断条件,更具有扩展性。

![image-20201011203533533](/Users/zhoupanpan/Library/Application Support/typora-user-images/image-20201011203533533.png)

![image-20201011203556813](/Users/zhoupanpan/Library/Application Support/typora-user-images/image-20201011203556813.png)

总结:在上面的代码中,通过策略模式,使得客户的折扣与算法解藕,又使得修改跟扩展能独立的进行,不影到客户端或其他算法的使用。

当我们的代码中有很多个判断分支,每一个条件分支都会引起该“类”的特定行为以不同的方式作出改变,这个时候就可以使用策略模式,可以改进我们代码的质量,也更好的可以进行单元测试。

链接:https://www.jianshu.com/p/0753baddf75e

原文地址:https://www.cnblogs.com/zppsakura/p/13799152.html