设计模式
关注
分享
扫一扫
设计模式
静尾
前端开发工程师
展开
-
js——适配器模式
js——适配器模式该模式的作用是解决接口不兼容问题，比如我们需要一个框架的接口来实现一个功能，但这个接口和我们的浏览器不兼容，这时候我们就可以创建一个适配器，将接口传入适配器，适配器内部做一系列操作输出一个我们的浏览器兼容的接口，然后我们的浏览器就直接可适配器打交道即可。...原创 2021-02-25 18:10:33 · 191 阅读 · 0 评论 -
js——职责链模式（责任链模式）
js——职责链模式（责任链模式）使多个对象都有机会处理请求，从而避免请求的发送者和接受者之间的耦合关系，将这些处理请求的对象形成一个链，并沿着这个链传递请求，直到有一个对象处理它为止。如公交车：乘客就是请求，公交路线就是职责链，每个站点都是一个职责处理对象。乘客上车了，他只有一个目的地，但公交车并不知道是哪，所以公交车要做的就是一站挨着一站的开，等到乘客到了目的地，自然就下车了。放到程序上就是，接收到一个请求，但是有好几个对象都可以处理该请求，但不知道哪个最合适，所以就将这些对象连接起来形成一个职原创 2021-02-25 18:10:53 · 612 阅读 · 0 评论 -
js——享元模式
js——享元模式用于性能优化。核心是利用共享技术有效的支持大量细粒度的对象。如果系统中因为创建了大量的类似对象而导致内存占用过高，那么享元模式就会很有用了。在js中，浏览器特别是移动端的浏览器分配的内存并不多，所以节省内存就很有意义。比如有一个服装加工厂，生产了50件不同的男装，50件不同的女装，此时需要销售这100件衣服，要找模特穿上这些衣服来拍照进行展示，正常情况下需要100个模特各穿一件来拍照。但是这么多模特（对象）太费资金（内存）了，所以享元模式的理念就是，找一个男模特和一个女模特，分别穿原创 2021-02-23 16:07:38 · 176 阅读 · 0 评论 -
js——工厂模式
js——工厂模式提供创建对象的接口，把成员对象的创建工作转交给外部对象处理，消除对象之间的耦合。常见例子，框架中的弹窗，消息框等组件的创建，就是框架暴露出来一个API，然后需要的时候掉用一下API直接创建一个实例来使用，其他地方需要依然是调用一下API即可返回出来一个实例。...原创 2021-02-23 16:06:49 · 316 阅读 · 0 评论 -
js——外观模式
js——外观模式让多个方法一起被调用。如解决浏览器兼容性时的添加/去掉事件监听器的方法：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g原创 2021-02-23 16:06:18 · 89 阅读 · 0 评论 -
js——装饰器模式
js——装饰器模式在不改变对象自身的基础上，在程序运行期间给对象动态添加方法。如react中的HOC。原创 2021-02-23 16:04:42 · 158 阅读 · 0 评论 -
js——中介者模式
js——中介者模式通过一个中介者对象，其他所有相关对象都通过该中介者对象进行通信，而不是相互引用，当一个对象发生变化时，只需通知中介者对象。通过中介者模式可以解除对象之间的紧耦合关系。如vue中的vuex，react中的react-redux等。...原创 2021-02-23 16:04:08 · 201 阅读 · 0 评论 -
js——迭代器模式
js——迭代器模式这个不用多讲，数组的迭代方法就是，如forEach，map，some，every，filter等都是迭代器模式的体现。原创 2021-02-23 16:03:36 · 120 阅读 · 0 评论 -
js——代理模式
js——代理模式说白了就相当于明星的经纪人，如果想找某明星，就要先找他的经纪人，如果业务对该明星不利，那么在经纪人这里就被否决了，这就叫保护代理；如果明星同意合作业务了，那么经纪人就会把业务中的不好的条约过滤掉，然后交给明星，这就叫虚拟代理；如果再来一个同样的人来找这个明星，那么经纪人可以用以前的经验直接给他结果，因为经纪人知道怎么处理这个业务，这就叫缓存代理。...原创 2021-02-23 16:02:54 · 178 阅读 · 0 评论 -
js——策略模式
js实现策略模式定义一系列功能类似的算法并封装起来。将算法的实现和使用分离出来。比如：计算年终奖，基本奖金是5000元，评级分为S A B C D，S+5000， A+4000， B+3000， C+2000， D+1000，计算输入某评级的员工的年终奖金额。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co原创 2021-02-23 16:01:26 · 254 阅读 · 0 评论 -
js——单例模式
js实现单例模式确保一个类仅有一个实例。如弹窗效果，多次点击按钮也只弹出一个弹窗，程序会判断当前是否有弹窗，如果有则不弹，没有则弹；还有防抖效果，如果当前有定时器在执行，那么就不重新启用新的定时器，只有没有定时器了再打开一个新的定时器。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width原创 2021-02-23 16:00:18 · 258 阅读 · 0 评论 -
js——发布-订阅模式（观察者模式）
js实现发布-订阅模式（观察者模式）对象间的一种一对多的关系，当一个对象发生改变时，所有依赖它的对象都会得到通知。比如微博上的明星和其粉丝的关系，粉丝在微博上订阅了明星，所以当明星在微博上发表动态时所有粉丝都将得到通知。js具体实现：事件监听器有三个角色：发布者（publisher）发布功能（publish(发布内容)）订阅者（subscriber）订阅功能（distribute（订阅内容））消息分发器（msgDistributor）缓存 subscribers发布功能原创 2021-02-23 15:59:22 · 471 阅读 · 0 评论