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

什么是设计模式?

设计模式的背景

这是设计模式的趋势

23 种设计模式

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

在前端场景下的设计模式:

• 单例模式
• 发布订阅模式

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

用单例模式实现请求缓存

用发布订阅模式实现用户上线订阅

javaScript 中的设计模式

• 原型模式
• 代理模式
• 迭代器模式

原型模式: 复制已有对象来创建新的对象

应用场景: js 中创建对象的基本模式

代理模式: 可以自定义口直对原对象的访问方式,并且允许在更新前后做一些额外的处理

应用场景: 监控 代理工具 前端框架实现等等

使用代理实现用户状态订阅

单一值原则:

一个方法或者一个对象只做一个事件

模块化处理是最好的

便于维护

迭代器模式

用 for of 迭代所有组件

• 工厂模式
• 抽象工厂
• 建造者
• 原型
• 单例模式(*)

惰性单例

惰性单例才是单例模式的重点!它所指的是,在需要的时候才创建实例对象;这模式在真实开发极其有用!

我们来模拟一个场景,我们正在开发一个网站,网站类型是一个视频网站,网站有个登录按钮,点击登录会弹出一个登录框进行登录,你现在可能已经联想到,这个登录框一定是页面唯一的一个dom节点,一个页面存在两个登录框是不存在的!

其实观察者模式对于前段来说应用很广,一个普通dom绑定一个事件其实也算观察者模式,区别就在于你能否在这模式核心基础上考虑到更多的东西,而不单单仅仅的发布监听,Vue,React等等框架都大范围使用了这种设计模式,优点很明显,一是时间解耦,二是对象之间的解耦,例子就能很好体现,能帮助我们完成很轻松的解耦代码编写,但是无论是啥模式都会有缺点,观察模式如果过度使用,会造成对象代码关联弱化,导致程序代码难以理解于跟踪维护。

总结

以上四个模式就是我认为在前端会经常使用到的设计模式,如果你在阅读本文过程当中如有不理解可以评论区或者私信交流都可以,这篇文章是博主处女文,所以有一些地方描述或者举的例子不是特别恰当,可以骂我菜什么的,都能接受,目的只为的是能帮到阅读文章的你能理解一点设计模式的使用及了解~