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

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

什么是设计模式?


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


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


SOLID 五大设计原则


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


为什么需要设计模式?


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


常见设计模式


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


单例模式


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


使用前:


eb9f254f49c24e9cb2f3c767d07ea27d_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


使用后:


8f812fae4ffc4266a027ab30984ceb11_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


策略模式

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

使用前:


f26d02bd24a44be194d0074a0baa958d_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


使用后:


c99eca4c5cf046eeaca9b8ec810b59af_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


代理模式


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

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


使用前:


9d8fb85819be41d188109e3c4646ce94_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


使用后:


569dabe8846d4a13b11e93b7e789bc4c_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

发布订阅模式


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

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


518ba3eb06624b6e9b51a74955908566_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


命令模式

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


29c7ea4fdf354cf99616c370ea426ac7_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


组合模式


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


e7dc8b2306f94044b25b150901b9965e_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


装饰器模式


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

使用前:


142e916a7fc84566b8e9c9da099cc328_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


使用后:


ed8fd586090346fcb95461a123f9fc09_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


适配器模式


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


使用前:


d8ad25fe43784d52894f9c723693d4e4_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


使用后:


65c93f18b5c04b2fbc5c1b1348aaa099_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


总结


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


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


最后


⚽这篇文章主要介绍了JavaScript中常见的设计模式,希望对你有帮助~

⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏,更多精彩知识正在等你!😘

相关文章
|
5月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 职责链模式
js设计模式【详解】—— 职责链模式
77 8
|
2月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
33 3
|
4月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
57 1
|
4月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
5月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
83 7
|
5月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
73 6
|
5月前
|
设计模式 JavaScript
js设计模式【详解】—— 原型模式
js设计模式【详解】—— 原型模式
52 6
|
5月前
|
设计模式 JavaScript 算法
js设计模式【详解】—— 模板方法模式
js设计模式【详解】—— 模板方法模式
48 6
|
5月前
|
设计模式 JavaScript 前端开发
JavaScript进阶 - JavaScript设计模式
【7月更文挑战第7天】在软件工程中,设计模式是解决常见问题的标准解决方案。JavaScript中的工厂模式用于对象创建,但过度使用可能导致抽象过度和缺乏灵活性。单例模式确保唯一实例,但应注意避免全局状态和过度使用。观察者模式实现了一对多依赖,需警惕性能影响和循环依赖。通过理解模式的优缺点,能提升代码质量。例如,工厂模式通过`createShape`函数动态创建对象;单例模式用闭包保证唯一实例;观察者模式让主题对象通知多个观察者。设计模式的恰当运用能增强代码可维护性。
82 0
|
5月前
|
设计模式 缓存 JavaScript
js设计模式实例
【7月更文挑战第2天】JavaScript设计模式包含工厂、单例、建造者、抽象工厂和代理模式等,它们是最佳实践和可重用模板,解决创建、职责分配和通信等问题。例如,工厂模式封装对象创建,单例确保全局唯一实例,建造者模式用于复杂对象构建,抽象工厂创建相关对象集合,而代理模式则控制对象访问。这些模式提升代码质量、可读性和灵活性,是高效开发的关键。
41 0