前端设计模式应用学习(1) | 青训营笔记

1,006 阅读4分钟

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

什么是设计模式

设计模式(Design Pattern) 是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。
使用设计模式是为了可重用代码、让代码更容易被他人理解、提高代码的可靠性。
设计模式一般有如下几个基本要素:模式名称、问题、目的、解决方案、效果、实例代码和相关设计模式。
其中的关键元素包括以下四个方面:模式名称 ,问题 ,解决方案 ,效果 。

软件设计中常见问题的解决方案模型

  • 历史经验的总结
  • 与特定语言无关

设计模式的背景

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

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

设计模式趋势与分类

23种设计模式

  • 创建型 – 如何创建一个对象
  • 结构型 - 如何灵活的将对象组装成较大的结构
  • 行为型 - 负责对象间的高效通信和职责划分

根据范围,即模式主要是处理类之间的关系还是处理对象之间的关系,可分为类模式对象模式两种。类模式处理类和子类之间的关系,这些关系通过继承建立,在编译时刻就被确定下来,是一种静态关系;对象模式处理对象间的关系,这些关系在运行时变化,更具动态性。

浏览器中的设计模式

单例模式

定义:
属于创建类型的一种常用的软件。通过单例模式的方法创建的类在当前进程中只有一个实例(根据需要,也有可能一个线程中属于单例,如:仅线程上下文内使用同一个实例)。就是采取一定的方法保证在整个的软件系统中,对某个类只能存在一个对象实例,并且该类只提供一个取得其对象实例的方法。

应用场景:

  1. 日志记录
    使用一个日志类的对象,将多项服务的日志信息按照顺序转存到一个特定的日志文件中
  2. 数据库操作
    我们可能希望使用一个数据库对象对数据库进行操作,以维护数据的一致性;
  3. 打印机后台处理程序
    该程序运行过程中只能生成一个实例,以避免对同一资源产生相互冲突的请求。

eg:用单例模式实现请求缓存
① 直接在单例类里创建一个map,key是 类名方法名参数列表和实参组合,value为值
②在单例类里创建两个map嵌套,外层map的key 是service层全限定名,内层key 是方法名形参,value为值

发布订阅模式

定义:
—种订阅机制,可在被订阅对象发生变化时通知订阅者。

应用场景:
从系统架构之间的解耦,到业务中一些实现模式,像邮件订阅,上线订阅等等,应用广泛。

eg:用发布订阅模式实现用户上线订阅 发布—订阅模式的优点非常明显,一为时间上的解耦,二为对象之间的解耦。它的应用非常广泛,既可以用在异步编程中,也可以帮助我们完成更松耦合的代码编写。发布—订阅模式还可以用来帮助实现一些别的设计模式,比如中介者模式。从架构上来看,无论是 MVC 还是 MVVM,都少不了发布—订阅模式的参与,而且 JavaScript 本身也是一门基于事件驱动的语言。

Javascript中的设计模式

原型模式

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

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

eg:用原型模式创建上线订阅中的用户\

代理模式

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

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

eg:使用代理模式实现用户状态订阅

迭代器模式

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

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

eg:用for of 迭代所有组件

小结:课堂的知识介绍了前端设计模式的框架,据我课后知识的补充可知:现有的设计模式就有大约50中,常见的也有20种左右,所以设计模式是一门宏大而深奥的学问需要我们不断的去学习和在实践中总结。