JavaScript设计模式

1. 单例模式

单例模式保证一个类仅有一个实例，并提供一个访问它的全局访问点

let singleton = (function(){let instance;return function(constructor){if (!instance){instance = new constructor();}return instance;}
})()

2. 策略模式

定义一系列算法，并将其封装为策略类，当环境类为了实现某个功能，调用策略类中的具体策略方案

策略模式将算法的使用以及算法的实现进行解耦

3. 代理模式

提供一个替身对象（代理）来控制对目标对象的访问，替身对象可以进行请求的拦截，处理，判断和转发

代理模式分为两种

保护代理：对向目标对象的请求进行拦截和判断，根据不同条件来决定是否转发给目标对象
虚拟代理：虚拟代理将开销较大的对象，延迟到其真正需要时才创建，能够遵守单一职责原则

4. 迭代器模式

迭代器模式提供一种方法来访问一个聚合对象中的各个元素，而又不暴露该对象的内部表示

迭代器模式分为

内部迭代器：内部已经定义好了迭代规则
外部迭代器：必须显示地请求迭代下一个对象

内部迭代器demo

let each = function(arr, cb) {for (let i = 0, l = arr.length; i < l; i++){cb.call(arr[i], i, arrp[i]);}
};
each([1,2,3], function(index, number) {console.log(index, number);
})

5. 发布订阅模式（也称观察者模式）

当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知

发布订阅模式中存在两种角色：发布者和订阅者

其中发布者必须实现的内容：

设置缓存列表，亦称订阅者列表，用于记录订阅者或者订阅者的回调函数
add订阅者方法，添加订阅者或其回调函数
notify发布消息方法，遍历缓存列表，通知所有订阅者或直接执行订阅者的回调函数

6. 组合模式

组合模式描述代码的部分—整体层次结构，组合对象中存在组合对象和叶对象，并且提供相同接口

用户在组合模式中只需要关心组合树的最顶层的组合对象，只需要触发顶层组合对象，请求便会沿树向下转运至叶对象

7. 模板方法模式

模板方法模式是一种基于继承的设计模式

通过抽象父类，父类封装子类算法的算法框架
通过具体实现子类，子类可以对父类中的“抽象”方法进行重写

JS设计模式—部分总结相关推荐

[js]设计模式小结对原型的修改
js设计模式小结工厂模式/构造函数--减少重复- 创建对象有new- 自动创建obj,this赋值- 无return原型链模式 - 进一步去重类是函数数据类型,每个函数都有prototypecons ...
js observer 添加_简单了解4种JS设计模式
阅读本文约需要5分钟大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈).上次老师跟大家分享了15款有用前端开发的ST插件的知识,今天跟大家分享下4种 ...
JS设计模式之Module（模块）模式、Revealing Module（揭示模块）模式
Module(模块)模式概念 Module模式最初被定义为一种在传统软件工程中为类提供私有和共有封装的方法. 通过这种方式,能够使一个单独的对象拥有共有/私有方法和变量,从而屏蔽来自全局作用局的特殊 ...
js设计模式——3.观察者模式
js设计模式--观察者模式 /*js设计模式--.观察者模式*/// 主题,保存状态,状态变化之后触发所有观察者对象 class Subject {constructor() {this.state ...
js 设计模式学习（1）
最近一个人外出旅行顺便在那座城市买了一本关于JS设计模式的书供无聊的时候阅读却发现小有收获旅游回来以后立马写下心得做了一个地图并以此总结此次旅行的经过的地方尝试1: 尝试写JS类 1 v ...
useRef与JS设计模式学习(一)
useRef与JS设计模式学习(一) useRef const refContainer = useRef(initialValue); 使用useRef Hook,你可以轻松的获取到dom的ref. ...
JS设计模式--组合模式
JS设计模式–组合模式昨天学习了白贺翔老师的JS组合模式,现在把我学到的分享出来叭O(∩_∩)O,直接看下面代码 <!DOCTYPE html> <html lang=" ...
js设计模式笔记小结
JS 设计模式面向对象搭建开发环境 npm / webapck / webpack-dev-server / babel babel-core babel-loader babel-polyfil ...
《Node.js设计模式》高级异步准则
本系列文章为<Node.js Design Patterns Second Edition>的原文翻译和读书笔记,在GitHub连载更新,同步翻译版链接. 欢迎关注我的专栏,之后的博文将在 ...
JS设计模式（2）策略模式
什么是策略模式? 定义:根据不同参数可以命中不同的策略主要解决:在有多种算法相似的情况下,使用 if...else 所带来的复杂和难以维护. 何时使用:有许多种情况,而区分它们的只是他们直接的行为. ...

JS设计模式—部分总结