前端设计模式应用|青训营笔记这是我参与「第五届青训营」笔记创作活动的第9天什么是设计模式软件设计中常用问题的解决方

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

什么是设计模式

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

定义：全局唯一访问对象

应用场景：缓存，全局状态管理等

单例模式请求缓存

getInstance保证每一次调用都是同一个Request类

this.cache以对象的形式存储url:response键值对的数据(请求的url:返回的数据)

当请求的url正好存储在this.cache中，那么就直接返回数据，而不重新发起请求

测试结果：

从缓存中获取数据所耗时间更短，针对重复获取不变的数据而言，这样性能更好

然而，以上的写法是Java、C++等的写法，JavaScript可以使用以下代码刚简单实现功能

定义：一种订阅机制，可在被订阅对象发生改变时通知订阅者

应用场景：从框架之间的解耦，到业务种一些实现方式，像邮件订阅，上线订阅等等，应用广泛

document.getElementById("button").addEventListener("click", function(){
    console.log('do....');
})

订阅函数subscribe(user:User,notify:Notify)，user为User类的实例，notify为回调函数，被订阅者的followers中加入信息

上线函数online()，将个人的状态的改为online，并执行订阅者subscribe订阅时传入的回调函数

该段代码最适合使用的场景：

关注某位博主，博主发了一篇新的文章，那么此时自己会收到对应的消息通知

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

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

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

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

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

因为之前的online方法中有两个行为：

一个函数中，实现了两个目的，但是这样的扩展性不强，一旦业务复杂，代码的可读性也会更差，所以我们可以将online方法用代理方式进行处理

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

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

用for of迭代所有组件测试：

定义：可多个对象组合使用，也可单个对象独立使用

应用场景：DOM，前端组件，文件目录，部门