JS设计模式
不承认自己菜的菜鸡前端
这个作者很懒,什么都没留下…
展开
-
JS设计模式(访问者模式和解释器模式)
访问者模式概念将数据操作和数据结构进行分离适用场景不多解释器模式概念描述语言语法如何定义,如何解释和编译用于专业场景(例如sass 、less)原创 2020-12-18 11:12:37 · 136 阅读 · 0 评论 -
JS设计模式(中介者模式)
中介者模式概念演示设计原则验证各关联对象通过中介者隔离符合开放封闭原则原创 2020-12-18 11:08:53 · 131 阅读 · 0 评论 -
JS设计模式(备忘录模式)
备忘录模式概念随时记录一个对象的状态变化随时可以恢复之前的某个状态(如撤销功能)未找到js中经典应用,除了一些工具(如编辑器)演示设计原则验证状态对象与使用者分开,解耦符合开放封闭原则...原创 2020-12-18 10:42:07 · 181 阅读 · 0 评论 -
JS设计模式(命令模式)
命令模式概念执行命令时,发布者和执行者分开中间加入命令对象,作为中转站演示JS中的应用网页富文本编辑器操作,浏览器封装了一个命令对象document.execCommand(“blod”)document.execCommand(“undo”)设计原则验证命令对象与执行对象分开,解耦符合开放封闭原则...原创 2020-12-18 10:26:21 · 101 阅读 · 0 评论 -
JS设计模式(模板方法模式和职责链模式)
模板方法模式和职责链模式模板方法模式职责链模式概念一步操作可能分为多个职责角色来完成把这些角色都分开,然后用一个链串起来将发起者和各个处理者进行隔离演示js中的链式操作职责链模式 和 业务结合较多,JS中能联想到链式操作jQuery的链式操作 Promise.then 的链式操作设计原则验证发起者与各个处理者进行隔离符合开放封闭原则...原创 2020-12-17 11:39:31 · 130 阅读 · 0 评论 -
JS设计模式(策略模式)
策略模式概念不同策略分开处理避免出现大量if…else 或者 switch…case(JS 中未找到经典应用场景)演示青铜写法:王者写法:(摆脱很多的if…else写法)设计原则验证不同策略,分开处理,而不是混在一起符合开放封闭原则...原创 2020-12-17 11:19:33 · 134 阅读 · 0 评论 -
JS设计模式(享元模式)
享元模式概念共享内存(主要考虑内存,而非效率)相同的数据,共享使用(JS中未找到经典应用场景)演示采用共享数据的思想设计原则验证将相同的部分抽象出来符合开放封闭原则...原创 2020-12-17 11:10:59 · 96 阅读 · 0 评论 -
JS设计模式(组合模式)
组合模式概念生成树形结构,表示“整体-部分”关系让整体和部分都具有一致的操作方式演示JS经典应用中,未找到这么复杂的数据类型虚拟DOM中的vnode是这种形式,但数据类型简单小结:整体和单个节点的操作是一致的整体和单个节点的数据接口也保持一致总结将整体和单个节点的操作抽象出来符合开放封闭原则...原创 2020-12-17 11:03:55 · 173 阅读 · 0 评论 -
JS设计模式(桥接模式)
桥接模式概念用于把抽象化与实现化解耦使得二者可以独立变化(在JS中未找到实际应用)演示青铜写法:王者操作:设计原则验证抽象和实现分离,解耦符合开放封闭原则原创 2020-10-30 11:32:34 · 213 阅读 · 0 评论 -
JS设计模式(原型模式)
原型模式概念clone自己,生成一个新对象java默认有clone接口,不用自己实现应用js中的应用 - Object.create对比JS中的原型prototypeprototype可以理解为ES6 class的一种底层原理而class是实现面向对象的基础,并不是服务于某个模式Object.create 会长久存在...原创 2020-10-30 11:18:24 · 238 阅读 · 1 评论 -
JS设计模式(状态模式)
JS设计模式(状态模式)介绍一个对象有状态变化每次状态变化都会触发一个逻辑不能总用 if…else 来控制演示UML类图传统UML类图简化后的UML类图示例:交通信号灯不同颜色的变化// 状态class State { constructor(color) { this.color = color } // 设置 handle(context) { console.log(`turn to ${this.colo原创 2020-10-29 16:19:58 · 596 阅读 · 0 评论 -
JS设计模式(迭代器模式)
JS设计模式(迭代器模式)介绍顺序访问一个集合使用者无需知道集合的内部结构(封装)演示jQuery的多种遍历方式修改后UML类图代码class Iterator { constructor(container) { this.list = container.list this.index = 0 } next() { if(this.hasNext()) { return thi原创 2020-10-28 18:24:14 · 259 阅读 · 0 评论 -
JS设计模式(观察者模式)
观察者模式介绍发布 & 订阅(将某件事说好之后只需等待,如:订报纸,订牛奶)一对多演示UML类图场景网页时间绑定PromisejQuery callbacknodejs自定义事件在node的stream中用到了自定义事件readline 中也用到了自定义事件其他场景1、nodejs中:处理http请求;多进程通讯2、vue 和 react 组件生命周期触发3、vue watch总结主题和观察者分离,不是主动触原创 2020-10-27 18:31:51 · 221 阅读 · 0 评论 -
JS设计模式(外观模式)
外观模式介绍为子系统中的一组接口提供了一个高层接口使用者使用这个高层接口UML类图场景设计原则验证不符合单一职责原则和开放封闭原则,因此谨慎使用,不可滥用。(出现胖接口)...原创 2020-10-04 17:50:38 · 106 阅读 · 0 评论 -
适配器模式VS装饰器模式VS代理模式
适配器模式、装饰器模式、代理模式比较代理模式 VS 适配器模式适配器模式:提供一个不同的接口(如不同版本的插头)代理模式:提供一模一样的接口代理模式 VS 装饰器模式装饰器模式:扩展功能,原有功能不变且可以直接使用代理模式:显示原有功能,但是经过限制或阉割之后的...原创 2020-10-03 22:27:04 · 205 阅读 · 0 评论 -
JS设计模式(代理模式)
代理模式无法直接访问一个对象,通过代理间接访问。介绍使用者无权访问目标对象中间加代理,通过代理做授权和控制示例科学上网,如访问github.com,模拟代理class RealImg { constructor(fileName) { this.fileName = fileName this.loadFormDisk() //初始化即从硬盘中加载,模拟 } loadFormDisk() { console.log('原创 2020-10-30 14:30:38 · 103 阅读 · 0 评论 -
JS设计模式(装饰器模式)
装饰器模式介绍为对象添加新功能不改变其原有的结构和功能可以借助第三方库 core-seractors,具体查看文档比较常 用的有 readonly(只读)、deprecate(即将要废弃的api)示例原有接口实现了画一个圆功能,现需要在圆上加一个红色边框UML类图传统UML类图简化之后UML类图demo代码class Circle { draw() { console.log('画一个圆') }}class Decorator {原创 2020-10-02 12:19:33 · 241 阅读 · 0 评论 -
JS设计模式(适配器模式)
适配器模式介绍旧接口格式和使用者不兼容中间加一个适配转化接口示例登录框class SingleObject { login() { console.log('login...') }}SingleObject.getInstance = (function() { let instance return function() { if(!instance) { instance = new Si原创 2020-10-01 19:21:13 · 175 阅读 · 0 评论 -
JS设计模式(单例模式)
单例模式避免多次初始化,影响性能介绍系统中被唯一使用一个类只有一个实例示例登录框class SingleObject { login() { console.log('login...') }}SingleObject.getInstance = (function() { let instance return function() { if(!instance) { instance =原创 2020-09-25 18:15:14 · 238 阅读 · 1 评论 -
JS设计模式(工厂模式)
工厂模式介绍将new单独封装遇到new时,就要考虑是否该使用工厂模式示例购买汉堡,只需点餐、取餐,无需自己亲手做商店哟啊“封装”做汉堡的工作,做好直接给顾客UML类图demo代码class Product { constructor(name) { this.name = name } init() { console.log('生产一个' + this.name) } fn1() { con原创 2020-09-22 16:33:38 · 791 阅读 · 0 评论 -
JS设计原则 + 设计模式 + demo环境搭建
设计原则S:单一职责原则(重点)O:开放封闭原则(重点)对扩展开放,对修改封闭L:李氏置换原则I:接口独立原则D:依赖导致原则设计模式创建型:工厂模式、单例模式、原型模式结构型:适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式行为型:JS设计模式环境搭建初始化项目 npm initwebpack配置1、webpack安装cnpm i webpack webpack-cli --save-dev2、根目录下新建webpack.dev.con原创 2020-09-22 14:47:05 · 166 阅读 · 0 评论