外观模式(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' }) |
|
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 58 59 60 61 |
/** * 比较两个时间的时间差 * @param startTime 开始时间 * @param endTime 结束时间 * @demo compareTime(new Date('2019-12-24 16:02').getTime(), new Date().getTime()) */ function compareTime (startTime, endTime) { var retValue = {} var compareTime = endTime - startTime // 时间差的毫秒数 // 计算出相差天数 var days = Math.floor(compareTime / (24 * 3600 * 1000)) retValue.Days = days // 计算出相差年数 var years = Math.floor(days / 365) retValue.Years = years // 计算出相差月数 var months = Math.floor(days / 30) retValue.Months = months // 计算出小时数 var leaveHours = compareTime % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数 var hours = Math.floor(leaveHours / (3600 * 1000)) retValue.Hours = hours // 计算相差分钟数 var leaveMinutes = leaveHours % (3600 * 1000) // 计算小时数后剩余的毫秒数 var minutes = Math.floor(leaveMinutes / (60 * 1000)) retValue.Minutes = minutes // 计算相差秒数 var leaveSeconds = leaveMinutes % (60 * 1000) // 计算分钟数后剩余的毫秒数 var seconds = Math.round(leaveSeconds / 1000) retValue.Seconds = seconds var resultSeconds = 0 if (years >= 1) { resultSeconds = resultSeconds + years * 365 * 24 * 60 * 60 } if (months >= 1) { resultSeconds = resultSeconds + months * 30 * 24 * 60 * 60 } if (days >= 1) { resultSeconds = resultSeconds + days * 24 * 60 * 60 } if (hours >= 1) { resultSeconds = resultSeconds + hours * 60 * 60 } if (minutes >= 1) { resultSeconds = resultSeconds + minutes * 60 } if (seconds >= 1) { resultSeconds = resultSeconds + seconds } retValue.resultSeconds = resultSeconds return retValue } |
|
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 58 59 60 61 |
/** * 监听浏览器标签页的显示与隐藏 */ class ListenerPageVisibility { constructor () { // 设置隐藏属性和改变可见属性的事件的名称 this.hidden = '' this.visibilityChange = '' if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support this.hidden = "hidden" this.visibilityChange = "visibilitychange" } else if (typeof document.msHidden !== "undefined") { this.hidden = "msHidden" this.visibilityChange = "msvisibilitychange" } else if (typeof document.webkitHidden !== "undefined") { this.hidden = "webkitHidden" this.visibilityChange = "webkitvisibilitychange" } this.handleChange = (callBackHidden, callBackVisibility) => { if (document[this.hidden]) { // 页面是隐藏状态 callBackHidden && callBackHidden() } else { // 页面是展示状态 callBackVisibility && callBackVisibility() } } } /** * 全局访问点 * @param callBackHidden 页面隐藏执行的回调方法 * @param callBackVisibility 页面显示执行的回调方法 */ linsternVisibility (callBackHidden, callBackVisibility) { // 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告 if (typeof document.addEventListener === "undefined" || typeof document[this.hidden] === "undefined") { console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.") } else { // 处理页面可见属性的改变 document.addEventListener(this.visibilityChange, () => { this.handleChange(callBackHidden, callBackVisibility) }, false) } } } // 调用实例 let navChange = new ListenerPageVisibility() navChange.linsternVisibility( // 页面是隐藏状态执行方法 () => { // TODO 浏览器标签页处于隐藏状态时,执行的方法 }, // 页面是可见状态执行方法 () => { // TODO 浏览器标签页处于显示状态时,执行的方法 } ) |
单例模式(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 } })() |