前端设计模式应用 | 青训营笔记

55 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第1天。

什么是设计模式?

一句话概括,就是 “*软件设计中**常见问题****解决方案模型***”。
常见问题是对历史经验的总结;解决方案模型是一种解决问题的思想,与特定语言无关。

设计模式分类:

23种(基于《设计模式:可复用面向对象软件的基础》 注释*)
创造型:如何创建一个对象
结构型:如何灵活将对象组装成较大的结构
行为型:负责对象间的高效通信和职责划分

浏览器中的设计模式:单例模式,发布订阅模式

单例模式:
        定义:全局唯一访问对象
        应用场景:缓存,全局状态管理等

image.png

image.png

发布订阅模式:
            定义:一种订阅机制,可在被订阅对象发生变化是通知订阅者
            应用场景:从系统架构之间的解耦,到业务中一些实现模式,像邮件订阅,上线订阅等等,应用广泛。

image.png

image.png

javascript中的设计模式:原型模式,代理模式,迭代器模式

原型模式:
        定义:复制已有对象来创建新的对象
        应用场景:js中对象创建的基本模式

image.png

代理模式:
        定义:可自定义控制对原对象的访问方式,并且允许在更新前后做一些额外处理
        应用场景:监控,代理工具,前端框架实现等待

image.png

迭代器模式:
          定义:在不暴露数据类型的情况下访问集合中的数据
          应用场景:数据结构中有多重数据类型,列表,树等,提供通用操作接口

image.png

image.png

前端框架中的设计模式:代理模式,组合模式
                   代理模式:

image.png

image.png

image.png

 组合模式:
                           定义:可多个对象组合使用,也可单个对象独立使用
                           应用场景:dom,前端组件,文件目录,部门

image.png

总结:设计模式不是绝对完美的

   总结出抽象的模式相对比较简单,但是想要将抽象的模式套用到场景中非常困难
   现代编程语言的多编程范式带来的更多可能性
   真正优秀的开源项目学习设计模式并不短时间
注释
*《设计模式:可复用面向对象软件的基础》:
1994年出版,其中的面向对象软件指传统的面向对象语言,如java,c++,与目前前端广泛使用的javascript有区别。
因年代久远,部分设计模式现已不适用或在某些语言内内置,很多新的设计模式还需要我们进一步学习。