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

70 阅读1分钟

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

前端设计模式应用

本堂课重点内容

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

### 历史经验总结

### 与特定语言无关

设计模式背景

### 01模式语言

### 02设计模式:可复用面向对象软件的基础

设计模式趋势

image.png

设计模式分类

### 23种设计模式

        #### 创建型-如何创建一个对象

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

        #### 行为型-负责对象间的高校通信和职责划分

浏览器中的设计模式

#### 单例模式

    定义:全局唯一访问对象

    应用场景:缓存全局状态管理

#### 发布订阅模式

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

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

JS中设计模式

### 原型模式

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

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

### 代理模式

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

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

### 迭代器模式

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

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

用FOR OF迭代所有组件

### 前端框架中的设计模式

    代理模式

    组合模式

vue组件实现计数器

image.png

\