JavaScript设计模式
新时代的弩力
搬砖崽一枚
展开
-
JavaScript-建造者模式
建造者模式 建造者模式(Builder Pattern)使用多个简单的对象一步一步构建成一个复杂的对象。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 关键代码:建造者Builder:创建和提供实例,导演Director:管理建造出来的实例的依赖关系 与工厂模式区别:建造者模式更加在意零件装配的顺序. JavaScript中的建造者模式 该实例没有使用传统的建造者模式. class Human { walk() { console.log("human is walkin原创 2022-06-29 19:21:18 · 105 阅读 · 0 评论 -
JavaScript-外观模式
外观模式 定义:为多个不同的方法提供一个统一的接口,一般设计到兼容性,对外暴露统一的api,外面只用一个函数,内部自己判断使用具体哪个函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="view原创 2022-06-29 19:21:02 · 42 阅读 · 0 评论 -
JavaScript-工厂模式
简单工厂模式 工厂模式 抽象工厂模式 简单工厂模式 专门定义一个工厂类,根据不同的参数值来创建其他类的实例,被创建的类通常具有相同的父类,也就是有相同的接口,如该工厂根据不同的参数来选择实例化戴尔鼠标或者惠普鼠标,MouseFacotry.createMouse() 工厂模式 定义一个用于创建对象的接口,让子类决定实例化哪一个类,使类的实例化延迟到子类中,如有一个鼠标工厂MouseFactory抽象类,其子类惠普鼠标工厂HpMouseFactory和戴尔鼠标工厂DellMouseFacotry负责.原创 2022-06-29 19:20:26 · 54 阅读 · 0 评论 -
JavaScript-访问者模式
访问者模式 在访问者模式(Visitor Pattern)中,我们使用了一个访问者类,它改变了元素类的执行算法。通过这种方式,元素的执行算法可以随着访问者改变而改变。这种类型的设计模式属于行为型模式。根据模式,元素对象已接受访问者对象,这样访问者对象就可以处理元素对象上的操作。 关键代码:在数据基础类里面有一个方法接受访问者,将自身引用传入访问者。 // 接收者类,拥有accept方法 class Employee { constructor(name, salary) { this.nam原创 2022-06-29 19:20:14 · 266 阅读 · 0 评论 -
JavaScript-代理模式
代理模式 代理提供与本体一致的接口,在js中可以是代理可以是对象或者函数,分为保护代理和虚拟代理,js中常用的是虚拟代理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" con原创 2022-06-29 19:19:49 · 84 阅读 · 0 评论 -
JavaScript-单例模式
通用的单例模式 使用闭包保存一个变量,如果该变量存在则返回该对象,否则调用函数返回一个对象并赋值到该对象上 /** * * @param {Function} fn 返回某一个对象的函数,不使用new来获取对象 * @returns */ const getSingle = function (fn) { let instance; return function () { return instance || (instance = fn.apply(this, argumen原创 2022-06-29 19:19:14 · 51 阅读 · 0 评论 -
JavaScript-职责链模式
职责链模式 顾名思义,责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链。这种模式给予请求的类型,对请求的发送者和接收者进行解耦。这种类型的设计模式属于行为型模式。 在这种模式中,通常每个接收者都包含对另一个接收者的引用。如果一个对象不能处理该请求,那么它会把相同的请求传给下一个接收者,依此类推。 function order500(orderType, pay, stock) { if (orderType === 1 &&原创 2022-06-29 19:18:56 · 223 阅读 · 0 评论 -
JavaScript-桥接模式
桥接模式 桥接模式是指将抽象部分与它的实现部分分离,使它们各自独立的变化,通过使用组合关系代替继承关系,降低抽象和实现两个可变维度的耦合度。 // Phone中,Brand品牌与Mode型号是两个独立互不影响的维度 class Phone { constructor(brand, mode) { this.brand = brand; this.mode = mode; } showPhone() { console.log( `手机品牌: ${this.原创 2022-06-27 10:01:29 · 191 阅读 · 0 评论 -
JavaScript-策略模式
策略模式 定义 定义一系列的算法,把他们封装成策略类,并使他们可以相互替换. 策略模式的目的就是把算法的使用和实现分离开来. 一个基于策略模式的至少由两部分组成.第一部分是一组策略类(可变),策略类封装了具体的算法,并负责具体的计算过程.第二个部分是环境类Context(不变),Context接受客户的请求,随后将请求委托给某一个策略类,要做到这一点,说明Context中要维持某个某个策略类的引用 基于类的策略模式 // 模拟策略类的接口 class Strategy { doOperation()原创 2022-06-27 10:00:17 · 58 阅读 · 0 评论 -
JavaScript-状态模式
状态模式 在状态模式(State Pattern)中,类的行为是基于它的状态改变的。这种类型的设计模式属于行为型模式。 在状态模式中,我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象。 何时使用:代码中包含大量与对象状态有关的条件语句。 如何解决:将各种具体的状态类抽象出来。 // JavaScript版本的状态机 // Light相当于环境类 // currState保存状态对象 class Light { constructor() { this.cur原创 2022-06-27 09:59:40 · 314 阅读 · 0 评论 -
JavaScript-组合模式
组合模式 组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象,用来表示部分以及整体层次。这种类型的设计模式属于结构型模式,它创建了对象组的树形结构。 何时使用: 1、您想表示对象的部分-整体层次结构(树形结构)。 2、您希望用户忽略组合对象与单个对象的不同,用户将统一地使用组合结构中的所有对象。 如何解决:树枝和叶子实现统一接口,树枝内部组合该接口。 关键代码:树枝内部组合该接口,并且含有内部属性 List,里面放原创 2022-06-27 09:59:15 · 149 阅读 · 0 评论 -
JavaScript-命令模式
命令模式 命令模式(Command Pattern)是一种数据驱动的设计模式,它属于行为型模式。请求以命令的形式包裹在对象中,并传给调用对象。调用对象寻找可以处理该命令的合适的对象,并把该命令传给相应的对象,该对象执行命令。 何时使用:在某些场合,比如要对行为进行"记录、撤销/重做、事务"等处理,这种无法抵御变化的紧耦合是不合适的。在这种情况下,如何将"行为请求者"与"行为实现者"解耦?将一组行为抽象为对象,可以实现二者之间的松耦合。 如何解决:通过调用者调用接受者执行命令,顺序:调用者→命令→接受者。原创 2022-06-27 09:55:32 · 256 阅读 · 0 评论 -
JavaScript-单例模式
单例模式 一个类只有一个实例,并提供一个访问它的全局访问点。 JavaScript可以使用闭包实现不基于类的单例模式 实现关键: 使用闭包缓存一个保存单例的变量,如果该变量存在则返回,否则返回一个新对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edg原创 2022-04-29 09:59:17 · 174 阅读 · 0 评论 -
JavaScript-发布订阅模式与观察者模式
发布订阅模式与观察者模式原创 2022-04-28 23:23:03 · 925 阅读 · 0 评论