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

前端设计模式应用

浏览器中的设计模式

单例模式：

• 定义：全局唯一访问对象(常用--Window)
• 应用场景：缓存，全局状态管理等

eg：用单例模式实现请求缓存

实现：
Request类{
    1.静态方法存储全局唯一实例 
    2.缓存对象存储缓存值
    3.初始化空的缓存内容
    4.静态方法创建对象()--对象存在则返回，否则新建自身后返回。
    5.缓存实现(URL)--以URL参数获取添加相应缓存,缓冲池中有URL的内容则返回缓存内容，否则调用api后写入缓存
}
测试：
无缓存场景：调用一次
有缓存场景：调用两次相同的URL

发布订阅模式

• 定义：一种订阅机制，可以在被订阅对象发生变化时通知订阅者。
• 应用场景：从系统架构之间的解耦(消息队列、数据库、缓存等)，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用官方。

eg:用发布订阅模式实现用户上线订阅

实现：
User类{
    1.定义--名字、上线状态、订阅人的数组
    2.初始化User
    3.订阅(订阅人，订阅人上线时的通知函数)--把自己的信息和通知订阅人的通知函数放入订阅人数组中
    4.上线()--1.修改自己的状态 2.调用订阅人的通知函数
}

JavaScript中的设计模式

原型模式：

• 定义：复制已有对象来创建新的对象
• 应用场景：JS中对象创建的基本模式

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

1.定义baseUser对象
2.创建用户(name)--基于baseUser返回新对象(继承关系)

代理模式

• 定义：可自定义控制原对象的访问方式，并且允许在更新前后做一些额外处理
• 应用场景：监控，代理工具，前端框架实现等等

eg:用代理模式创建上线订阅中的用户

1.上线()--修改为只改变上线状态(不再有额外操作)
2.通知()-- 1)创建正常User 
           2)创建代理用户--new Proxy(用户对象,代理人操作)
           代理人操作：set()--对象设置属性名称=新值;当设置为status时，处理状态变化notifyStatusHandlers()
3.处理状态变化()--判断状态变更为上线后，调用通知函数进行处理

迭代器模式

• 定义：在不暴露数据类型的情况下访问集合中的数据
• 应用场景：数据结构中有多种数据类型，列表，树，等，提供通用操作接口
  • const number of numbers
  • const [key, value] of map
  • const key of set

eg:用for of迭代所有组件

Dom类{
    1.定义-传入标签&子组件
    2.初始化
    3.获取子组件()
    4.[Symbol.iterator]()--可迭代方法
        实现
            1)初始化自己的子组件数组list
            2)每次拿到list子组件的一个独立node：
                如果node有children，就将node的children放入我们整体的list上，返回node并标注迭代未完成done:false。
                重复执行直至list中无内容后修改迭代完成done:true。
}

引用参考

前端设计模式应用-吴立宁.pptx