前端需要理解的设计模式知识

前端需要理解的设计模式知识_第1张图片

设计模式的原则:1. 单一职责原则(一个对象或方法只做一件事) 2. 最少知识原则(尽可能少的实体或对象间互相作用) 3. 开放封闭原则(软件实体具有可扩展且不可修改)

设计模式是通过代码设计经验总结出的解决问题的一系列套路。

1 单例模式

保证只有一个实例且提供全局访问点。

优点是避免频繁创建和销毁实例,减少内存占用。缺点是不适合需动态扩展对象或创建多个相似对象的场景。

应用于:1. 第三方库的引入 2. 弹窗 3. 购物车 4.全局状态管理(vuex) 5. 连接数据库的线程池。

JavaScript单线程,不涉及同步锁的问题。

模式实现:

前端需要理解的设计模式知识_第2张图片

惰性弹窗:

前端需要理解的设计模式知识_第3张图片 

2 发布-订阅模式

基于一个事件(主题)通道,接收对象subscriber通过自定义事件订阅主题,被激活的对象publisher通过发布主题通知订阅该主题的subscriber。常规是订阅后,发布才通知,也可订阅后,获取之前发布的通知。

优点是时间解耦(实现异步)、空间解耦,弱化对象实体间的引用关系,事件中心可更细粒度处理。缺点是复杂场景不易追踪维护和理解,事件中心等额外时间内存开销。

应用:1. JQuery的on 2. vue的响应式 3. vue父子组件通信$on / $emit

模式实现:

前端需要理解的设计模式知识_第4张图片 

你可能感兴趣的:(前端,面试,设计模式,单例模式,发布订阅模式)