JavaScript设计模式之状态模式

 w候人兮猗
介绍 一个对象有状态的变化 每次状态变化都会触发一个逻辑 不能总是用if..else控制 实例 交通信号灯不同颜色的变化 UML类图 代码演示 class State { constructor(color) { this.color = color } handle(conte ...

JavaScript设计模式之迭代器模式

 w候人兮猗
介绍 顺序访问一个集合(有序的:Array) 使用者无需知道集合的内部结构 实例 使用jQ演示 <p>jq each</p> <p>jq each</p> <p>jq each</p> var arr = [1,2,3] var nodeList = document.getElementsB ...

JavaScript设计模式之观察者模式

 w候人兮猗
介绍 发布订阅 一对多 实例 肯德基点餐后等着被叫号 订报纸后每天等着送报纸 UML 代码演示 // 主题 保存状态 状态变化之后触发所有观察者 class Subject{ constructor() { this.state = 0 this.obsevers = [] ...

JavaScript设计模式之外观模式

 w候人兮猗
介绍 为子系统中的一组接口提供了一个高层接口 使用者使用这个高层接口 - 原来的系统中用户对接每一个子系统 - 使用外观模式之后用户只需要对接外观那个高层接口即可 UML 代码演示 function bindEvent(elem,type,selector,fn) { if(fn == n ...

JavaScript设计模式之代理模式

 w候人兮猗
介绍 使用者无权直接访问目标对象 中间使用代理,通过代理的方式做授权和控制 实例 科学上网 明星经纪人 UML 代码演示 class RealImg{ constructor(fileName){ this.fileName = fileName; this.loadFromDisk() ...

JavaScript设计模式之装饰器模式

 w候人兮猗
介绍 为对象添加新功能 不改变其原有的结构和功能 实例 手机壳(只是增加装饰、防摔功能) UML - 通过Decortor为Circle新增setRedBorder()方法 代码演示 //圆 class Circle{ draw(){ console.log('画一个圆') } ...