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

60 阅读2分钟

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

什么是前端设计模式

设计模式(Design Pattern)是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。

  设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题,毕竟这是前人无数经验总结成的最佳实践,而代码实现则是对加深理解的辅助。

设计模式背景

1.模式语言

城镇 建筑 建筑

2.设计模式

可复用面向对象软件的基础

设计模式趋势

image.png

设计模式分类

有23种设计模式

创建型:如何创建一个对象

结构型:如何灵活的将对象组装成较大的结构

行为型:负责对象间的高效通信和职责划分

浏览器中的设计模式

单列模式

用单列模式实现请求缓存

image.png

image.png

发布订阅模式

定义

一种订阅机制,可在被订阅对象发生变化时通知订阅者

应用场景

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

image.png

JavaScript中的设计模式

  • 原型模式

  • 代理模式

定义:

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

应用场景:

监控,代理工具,前端框架实现等等

  • 迭代器模式

定义:

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

应用场景:

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

前端框架中的设计模式

  • 代理模式
  • 组合模式

定义:

可多个对象组合使用,也可单个对象独立使用

应用场景:

DOM,前端组件,文件目录,部门