外观模式(Facade Pattern)
|
1 2 3 |
定义：隐藏系统的复杂性，并向客户端提供了一个客户端可以访问系统的接口。 目的：为子系统中的一组接口提供一个一致的界面，外观模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。 场景：客户端不需要知道系统内部的复杂联系，整个系统只需提供一个"接待员"即可。 |
|
1 2 3 4 5 6 7 |
// 通过一个接口封装其他接口 let mobileEvent = { stop: (e) => { e.preventDefault() e.stopPropagation() } } |
组合模式(Composite Pattern)
|
1 2 3 |
定义：又叫部分整体模式，是用于把一组相似的对象当作一个单一的对象。 目的：将对象组合成树形结构以表示"部分-整体"的层次结构。 场景：您想表示对象的部分-整体层次结构(树形结构),如：文件系统。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
// 指令 let directive = { eat: { excute: () => { console.log('eat') } }, sleep: { excute: () => { console.log('sleep') } }, code: { excute: () => { console.log('Get out there and write code!') } } } const callDirective = () => { let result = { directiveList: [], add: (directive) => { result.directiveList.push(directive) }, excute: () => { for (let ele of result.directiveList.values()) { ele.excute() } } } return result } let command = callDirective() command.add(directive.eat) command.add(directive.sleep) command.add(directive.code) command.excute() |
Github地址：https://github.com/skillnull/Design-Mode-Example[……]
桥接模式(Bridge Pattern)
|
1 2 3 |
定义：是用于把抽象化与实现化解耦，使得二者可以独立变化。 目的：将抽象部分与实现部分分离，使它们都可以独立的变化。 场景：实现系统可能有多个角度分类，每一种角度都可能变化。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let each = (arr, fn) => { for (let i = 0; i < arr.length; i++) { let val = arr[i] if (fn.call(val, i, val, arr)) { return false } } } let arr = [1, 2, 3, 4] each(arr, (i, v) => { arr[i] = v * 2 }) |
适配器模式(Adapter Pattern)
|
1 2 3 |
定义：将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的那些类能一起工作。 目的：主要解决在软件系统中，常常要将一些"现存的对象"放到新的环境中，而新环境要求的接口是现对象不能满足的。 场景：系统需要使用现有的类，而此类的接口不符合系统的需要。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
class Target { small () { throw new Error('Please overwritten function!') } } class newTarget { big () { console.log('新的适配') } } class Adapter extends Target { constructor (newTarget) { super() this.newTarget = newTarget } small () { this.newTarget.big() } } let NT = new newTarget() let AD = new Adapter(NT) AD.small() |
原型模式(Prototype Pattern)
|
1 2 3 |
定义：用于创建重复的对象，同时又能保证性能。 目的：用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。 场景：在运行期建立和删除原型。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
let productPrototype = { init: (type) => { this.type = type }, getType: () => { return this.type } } let prototype = (type) => { function F () { } F.prototype = productPrototype let f = new F() f.init(type) return f } let car = prototype('丰田CHR') console.log(car.getType()) |
Github地址：https://github.com/skillnull/Design-Mode-Example[……]
抽象工厂模式(Abstract Factory Pattern)
|
1 2 3 |
定义：抽象工厂模式提供了一种方式，可以将一组具有同一主题的单独的工厂封装起来。或者说，是其他工厂的工厂。 目的：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。 场景：系统的产品有多于一个的产品族，而系统只消费其中某一族的产品。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
class User { constructor (type) { if (new.target === User) { throw new Error('抽象类不能实例化！') } this.type = type } } class UserOfWechat extends User { constructor (name) { super('wechat') this.name = name this.viewPage = ['首页', '通讯录', '发现页'] } } class UserOfQQ extends User { constructor (name) { super('qq') this.name = name this.viewPage = ['首页', '通讯录', '发现页'] } } function getUser (type) { switch (type) { case 'wechat': return UserOfWechat break case 'qq': return UserOfQQ break default: throw new Error('参数错误') break } } let WechatUserClass = getUser('wechat') let QQUserClass = getUser('qq') let wechatUser = new WechatUserClass('卡卡罗特') let qqUser = new QQUserClass('贝吉塔') |
建造者模式(Builder Pattern)
|
1 2 3 |
定义：使用多个简单的对象一步一步构建成一个复杂的对象。 目的：将一个复杂的构建与其表示相分离，使得同样的构建过程可以创建不同的表示。 场景：一些基本部件不会变，而其组合经常变化的时候。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
// 声明一个产品类 class Product { constructor () { } } // 声明一个建造者类 class BuilderProduct { constructor () { // 建造产品名称 this.nameBuilder = (name) => { this.name = name || null } // 建造产品版本 this.versionBuilder = (version) => { this.version = version || null } // 建造产品生产日期 this.createTimeBuilder = (createTime) => { this.createTime = createTime || null } // 组合建造产品 this.getProduct = () => { let product = new Product() if (this.name) { product.name = this.name } if (this.version) { product.version = this.version } if (this.createTime) { product.createTime = this.createTime } return product } } } // 声明一个需求类 class Demand { constructor (demands) { let builderProduct = new BuilderProduct() builderProduct.nameBuilder(demands.name) builderProduct.versionBuilder(demands.version) builderProduct.createTimeBuilder(demands.createTime) return builderProduct.getProduct() } } let demand = new Demand({ name: 'SKILL.NULL' }) |
单例模式(Singleton Pattern)：
|
1 2 3 |
定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。 目的：阻止其他对象实例化其自己的单例对象的副本，从而确保所有对象都访问唯一实例。 场景：如一个系统中可以存在多个打印任务，但是同时只能有一个正在工作的任务。 |
例：JS代码实现
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// 惰性单例 let lazySingle = (() => { let _instance = null // 单例 Single = () => { let privateAttribute = '我是私有属性' privateMethod = () => { // 私有方法 } return { publicMethod: () => { // 对外暴露方法 }, publicAttribute: '我是对外暴露属性' } } // 提供一个全局访问点 return () => { if (!_instance) { _instance = Single() } return _instance } })() |
装饰模式(Decorator Pattern)：
|
1 2 3 4 |
定义：在不改变原对象的情况下，动态的给对象添加一些额外的职责。就功能而言，装饰模式相比生成子类更为灵活。 目的：把类的核心职责和装饰功能区分开。可以去除相关类中重复的逻辑。 场景：当系统需要扩展一个类的功能，或者客户端需要动态的给一个对象添加功能，并且使用继承或生成子类会很复杂的时候。 装饰模式体现了"多用组合，少用继承"这一设计原则。 |
例：JS代码实现
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// 一辆小汽车 的构造函数 function ACar () { // 一辆原味小汽车的价格是 99 元 this.price = function () { return 99 } } // 装饰器 —— 汽车喇叭 function carTrumpet (car) { let price = car.price() car.trumpet = function () { console.log('滴 滴滴') } // 一个喇叭加价 10 元 car.price = function () { return price + 10 } } // 装饰器 —— 行车记录仪 function carRecorder (car) { let price = car.price() car.recorder = function () { console.log('让一让啊 让一让 我有行车记录仪') } // 一个行车记录仪加价 9.9 元 car.price = function () { return price + 9.9 } } // 初始化一辆小汽车 let car = new ACar() // 给小汽车装上喇叭 carTrumpet(car) // 给小汽车装上行车记录仪 carRecorder(car) // 最后小汽车的价格是 118.9 元 console.log(car.price()) |
策略模式(Strategy Pattern)：
|
1 2 3 |
定义：定义了一族算法； 封装了每个算法； 这族的算法可互换代替。 目的：将算法的使用与算法的实现分离开来。 场景：可用来消除大量的条件分支语句。 |
例：JS代码实现
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// 策略算法封装 let strategy = { add (number1, number2) { return number1 + number2 }, sub (number1, number2) { return number1 - number2 }, mul (number1, number2) { return number1 * number2 }, div (number1, number2) { return number1 * number2 } } // 策略算法调用封装 function callStratery (strategyType, number1, number2) { return strategy[strategyType](number1, number2) } // 策略算法调用 callStratery(add, 1, 2) // return 3 |