了解一下前端设计模式应用 | 青训营笔记

53 阅读3分钟

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

设计模式

首先先来说一下什么是设计模式?

其实就是软件设计中常见问题的解决方案模型。 也就是两个点,分别是常见问题解决方案

1.常见问题

就是历史经验的总结

2.解决方案

与特定的语言无关,是一个思想。

设计模式背景

在1977年有一本书提到了这个词,是在建筑方面首次提出。

1.模式语言:城镇、建筑、建造(A Pattern Language:Towns,Buildings,Construction)

紧接着在1994年的时候,提出了软件方面的设计模式。

2.设计模式:可复用面向对象软件的基础(Design Patterns:Elements of Reusable Object-Oriented Software)

设计模式的趋势

image.png

在中国的变化趋势是热度逐渐升高。

image.png

在全球的变化趋势是热度逐渐降低。

设计模式的分类

23种设计模式

1.创建型

如何创建一个对象

2.结构型

如何灵活的讲对象组装成较大的结构

3.行为型

负责对象间的高效通信和职责划分

浏览器当中的设计模式

1.单例模式

先来说一下单例模式,单例模式其实就是全局唯一访问对象,在它的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中,使用单例模式的类只有一个对象实例。

应用场景

  1. Windows系统的任务管理器。
  2. Windows系统的回收站。
  3. 操作系统的文件系统,一个操作系统只能有一个文件系统。
  4. 数据库连接池的设计与实现。
  5. 多线程的线程池设计与实现。
  6. Spring中创建的Bean实例默认都是单例。
  7. Java-Web中,一个Servlet类只有一个实例。

2.发布订阅模式

发布订阅模式就是一种订阅机制,可在被订阅对象发生变化时通知订阅者。

image.png

基本概念:

  1. Publisher :发布者,当消息发生时负责通知对应订阅者
  2. Subscriber :订阅者,当消息发生时被通知的对象
  3. SubscriberMap :持有不同 type 的数组,存储有所有订阅者的数组
  4. type :消息类型,订阅者可以订阅的不同消息类型
  5. subscribe :该方法为将订阅者添加到 SubscriberMap 中对应的数组中
  6. unSubscribe :该方法为在 SubscriberMap 中删除订阅者
  7. notify :该方法遍历通知 SubscriberMap 中对应 type 的每个订阅者

image.png

Javascript当中的设计模式

1.原型模式

定义:复制已有对象来创建新的对象

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

2.代理模式

定义:可自定义控制对原对象的访问方式,并允许在更新前后做一些额外处理

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

3.迭代器模式

定义:在不暴露数据类型的情况下访问集合中的数据

应用场景:数据结构中有多种数据类型,列表,树等,提供通用操作接口

前端框架中的设计模式

1.代理模式

2.组合模式

前端框架中对DOM操作的代理

image.png

总结

今天所学习的前端设计模式应用主要是一种思想,而不是具体方法,有这样的思想可以让自己的代码变得更为有条理,变得更好。