【青训营】-🍉JavaScript中的设计模式

1,107 阅读3分钟

什么是设计模式?

在软件设计过程中,针对特定问题的简洁而优雅的解决方案。

经验总结 ——> 合理运用 ——> 解决问题

SOLID 五大设计原则

  • S 单一职责原则(一个程序只做好一件事)
  • O 开放封闭原则(对扩展开放,对修改封闭)
  • L 里氏置换原则(子类能覆盖父类,并能出现在父类出现的地方)
  • I 接口独立原则(保持接口的单一独立)
  • D 依赖导致原则(使用方法只关注接口而不关注具体类的实现)

为什么需要设计模式?

  1. 易读性(使用设计模式能够提升代码的可读性,提升后续开发效率)
  2. 可拓展性(使用设计模式对代码解耦,能很好地增强代码的易修改性和扩展性)
  3. 复用性(使用设计模式可以重用已有的解决方案,无需再重复相同工作)
  4. 可靠性(使用设计模式能够增加系统的健壮性,使代码编写真正工程化)

常见设计模式

单例模式,策略模式,代理模式,发布订阅模式,命令模式,组合模式,装饰器模式,适配器模式

单例模式

唯一 & 全局访问。保证一个类仅有一个实例,并提供一个访问它的全局访问点。 应用场景:能被缓存的内容,例如登录弹窗。

使用前:

image.png 使用后:

image.png

策略模式

定义一系列的算法,把它们一个个封装起来,并且使他们可以相互替换,把看似毫无联系的代码提取封装、复用,使之更容易被理解和拓展。 应用场景:要完成一件事情,有不同的策略。例如绩效计算,表单验证规则。

使用前:

image.png 使用后:

image.png

代理模式

为一个对象提供了一个代用品或占位符,以便控制对它的访问。替身对象可对请求预先进行处理。再决定是否转交给本体对象。

应用场景:当我们不方便直接访问某个对象使,或不满足需求时,可考虑使用一个替身对象来控制该对象的访问

使用前:

image.png 使用后:

image.png

发布订阅模式

对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。

应用场景:DOM事件,消息通知

image.png

命令模式

执行某些特定事情的指令 应用场景:富文本编辑工具栏

image.png

组合模式

用小的对象来构建更大的对象,将对象组合成树形结构,以表示“部分—整体”的层次结构 应用场景:从is——a到has——a

image.png

装饰器模式

能够再不改变对象自身的基础上,在程序运行期间给对象动态的添加职责。 应用场景:数据上报,统计函数执行时间

使用前: image.png 使用后:

image.png

适配器模式

解决两个软件实体间的接口哦不兼容问题,不需要改变已有的接口,它能够使它们协同作用。 应用场景:接口不兼容的情况。

使用前:

image.png 使用后:

image.png

总结

学习设计模式应该有以下四个阶段:

  1. 理解思想
  2. 合理使用
  3. 总结经验
  4. 融会贯通

最后

⚽这篇文章主要介绍了JavaScript中常见的设计模式,希望对你有帮助~
⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏,更多精彩知识正在等你!😘
🏀GitHub 博客地址: github.com/Awu1227
🏉笔者还有其他专栏,欢迎阅读~
🏐玩转CSS之美
🎱Vue从放弃到入门
🎳深入浅出JavaScript