一、观察者模式

1. 什么是观察者模式

当对象之间存在一对多的依赖关系时，其中一个对象的状态产生扭转，所有依赖它的对象都会收到告诉，这就是观察者模式。

2. 理论场景

1. DOM 事件

开发过程中，最常见的观察者模式场景就是 DOM 事件函数，先看看代码：

document.body.addEventListener('click', () => {alert(2)
}, false)

当 body 节点被点击时，触发 alert(2)，从观察者模式来解释，就是咱们订阅了 bdoy 节点的点击事件，当点击事件触发，咱们就会收到告诉。

2. 网站登录

网站登录性能，想必大多数做过平台需要的同学都实现过，当网站中的不同模块，如 Header 模块、Nav 模块、注释模块，都依赖登录后获取的用户数据时，该怎么去实现呢？

2.1 一般做法

先看代码：

login.succ((data => {header.setAvatar(data.avatar) // 设置头像
    nav.setAvatar(data.avatar) // 设置导航区的头像
    list.refresh() // 刷新列表})

这样的代码是不是特地相熟？把依赖的办法，放在回调函数中。上述就是在登录胜利的回调函数中，增加了各模块的办法。这么做导致各个模块和登录模块高度耦合，当新增了一个地址栏模块时，不得不再次批改登录模块的回调函数，违反了凋谢 - 关闭准则。

2.2 观察者模式

用观察者模式，优化上述需要。

登录模块是一个订阅对象，Header 模块、Nav 模块、注释模块增加对登录模块的订阅，当登录模块产生扭转时，告诉各个订阅了登录模块的模块。代码如下：

// 登录模块 js
// 登录胜利后，公布“loginSucc”登录胜利音讯，并传递 data 数据
login.succ(data=> {login.trigger('loginSucc', data)
})

// header 模块 js
// 订阅“loginSucc”登录胜利音讯
login.listen('loginSucc', () => {header.setAvatar(data.avatar)
})

// nav 模块 js
// 订阅“loginSucc”登录胜利音讯
login.listen('loginSucc', () => {nav.setAvatar(data.avatar)
})

上述代码用观察者模式重构了网站登录性能，后续不论新增多少业务模块，依赖登录性能，都只须要在模块内新增对登录胜利的订阅，无需再改变登录模块。

3. 双向数据绑定

双向数据绑定也能够通过观察者模式实现。

双向指的是视图 view 和模型 model，当视图产生扭转时，模型也发生变化，同样，当模型产生扭转，视图也跟着同步变动。

分为以下几个步骤实现：

3.1 新建公布 - 订阅对象

新建一个公布 - 订阅对象，用于公布音讯，订阅音讯。

• subscribe：订阅函数，当其余对象增加订阅音讯时，将回调函数 push 进 callbacks 对象数组中；
• publish：公布函数，当公布音讯时，触发 callbacks 中该音讯对应的 callback.

const Pubsub = {subscribe: function (ev, callback) {this._callbacks || (this._callbacks = {});
        (this._callbacks[ev] || (this._callbacks[ev] = [])).push(callback);
    },

    publish: function () {const args = [...arguments]
        const ev = args.shift()

        if (!this._callbacks) return
        if (!this._callbacks[ev]) return

        this._callbacks[ev].forEach(callback => {callback(...args)
        })
    }
}

3.2 ui 更新

3.2.1 公布 ui 更新音讯

注册 document 的 keyup / change 事件，当激活事件的 dom 元素领有 data-bind 属性时，阐明 ui 正在更新，公布 ui 更新音讯告诉订阅者。

function eventHander (e) {const { target} = e
    const {value: propValue} = target

    const propNameWhole = target.getAttribute('data-bind')
    if (propNameWhole) {
        // 公布 ui 更新音讯
        Pubsub.publish('ui-update-event', { propNameWhole, propValue})
    }
}

console.log(document.addEventListener)
document.addEventListener('change', eventHander, false)
document.addEventListener('keyup', eventHander, false)

3.2.2 订阅 model 更新音讯

所有蕴含 data-bind 属性的 dom 元素，订阅 model 更新音讯，当 model 更新时，ui 将会收到告诉。

// 订阅 model 更新音讯，更新后所有符合条件的 dom 节点都会收到告诉，进行更新
Pubsub.subscribe('model-update-event', function ({propNameWhole, propValue}) {const elements = document.querySelectorAll(`[data-bind="${propNameWhole}"]`)

    elements.forEach(element => {const elementTagName = element.tagName.toLowerCase()
        const formTypeTagNames = ['input', 'select', 'textarea']
        if (formTypeTagNames.includes(elementTagName)) {element.value = propValue} else {element.innerHTML = propValue}
    })
})

3.3 model 更新

3.3.1 订阅 ui 更新音讯

订阅 ui 更新音讯，当 ui 更新时，触发 modal 更新。

class Bind {constructor () {this.modelName = ''}

    initModel ({modelName}) {
        this.modelName = modelName

        // 订阅 ui 更新音讯
        Pubsub.subscribe('ui-update-event', ({propNameWhole, propValue}) => {const [ , _propName] = propNameWhole.split('.')
            this.updateModalData(_propName, propValue)
        })
    }
    
    // xxx 省略 xxx

    updateModalData (propName, propValue) {const propNameWhole = `${this.modelName}.${propName}`
        // 公布 model 更新音讯
        Pubsub.publish('model-update-event', { propNameWhole, propValue});
    }

}

3.3.2 公布 model 更新音讯

model 更新时，公布 model 更新音讯，此时，订阅了 model 更新音讯的 ui，将失去告诉。

class Bind {constructor () {this.modelName = ''}
    
    // xxx 省略 xxx

    loadModalData (modelData) {for (let propName in modelData) {this.updateModalData(propName, modelData[propName])
        }
    }

    updateModalData (propName, propValue) {const propNameWhole = `${this.modelName}.${propName}`
        // 公布 model 更新音讯
        Pubsub.publish('model-update-event', { propNameWhole, propValue});
    }

}

3. 总结

从上文的理论场景例子可见，观察者模式建设了一套触发机制，帮忙咱们实现更松耦合的代码编写。然而也不能适度应用，否则会导致程序难以追踪和了解。

二、装璜器模式

1. 什么是装璜器模式

简略来说，装璜器模式就是给对象动静减少性能。

有一个鸭子对象，它会发声 makeVoice，会睡觉 sleep，然而因为它还太小，不会走路，代码如下：

const duck =  {makeVoice: () => {console.log('我会嘎嘎嘎啦')
    },
    sleep: () => {console.log('谁又不会睡觉呢')
    },
    init: function () {this.makeVoice()
        this.sleep()}
}

duck.init()

当它 3 个月大的时候，忽然学会走路 walk 了，这个时候，怎么在代码中，为鸭子 duck 增加走路 walk 性能呢？大多数状况下，咱们会抉择间接批改鸭子 duck 办法，代码如下：

const duck =  {makeVoice: () => {console.log('我会嘎嘎嘎啦')
    },
    sleep: () => {console.log('谁又不会睡觉呢')
    },
    walk: () => {console.log('哈哈哈，我会走路啦')
    },
    init: function () {this.makeVoice()
        this.sleep()
        this.walk()}
}

duck.init()

高兴的时光总是短暂的，鸭子越长越大，性能也越来越多。有一天，你销假出去玩，托付敌人帮你关照这只鸭子，不巧，鸭子要下蛋了，敌人须要帮鸭子增加一个下蛋的性能，这就有点麻烦了因为这是他第一次关照这只鸭子，他放心如果间接在鸭子外部增加办法会影响到什么。

于是他想到了一个好办法，不间接批改鸭子外部，而是通过一个内部函数，援用这个鸭子，并为内部函数增加下蛋的性能。

代码如下：

const before = function (fn, beforeFn) {return function () {beforeFn.apply(this, arguments)
        return fn.apply(this, arguments)
    }
}

const after = function (fn, afterFn) {return function () {const __ = fn.apply(this, arguments)
        afterFn.apply(this, arguments)
        return __
    }
}

const duck =  {makeVoice: function () {console.log('我会嘎嘎嘎啦')
    },
    sleep: function () {console.log('谁又不会睡觉呢')
    },
    walk: function () {console.log('哈哈哈，我会走路啦')
    },
    init: function () {this.makeVoice()
        this.sleep()
        this.walk()}
}

after(duck.init, function egg () {console.log('生蛋高兴～')
}).apply(duck)

这就是装璜器模式，动静的为鸭子增加性能，而不间接批改鸭子自身。

2. 理论场景

1. 数据上报

自定义事件的数据上报个别都依赖于点击事件，那么这个点击事件既要承当本来的性能，又要承当数据上报的性能。

1.1 一般做法

先上代码：

const loginBtnClick = () => {
    console.log('去登录'）console.log('去上报')
} 

如同没故障，这样的代码中我的项目中随处可见，回避 (面向过程编程) 虽可耻但有用。

1.2 装璜器模式做法

能够通过装璜器模式来重构上述代码，将职责划分更细，代码松耦合，可复用性更高。

const after = function (fn, afterFn) {return function () {const __ = fn.apply(this, arguments)
        afterFn.apply(this, arguments)
        return __
    }
}

const showLogin = function () {console.log('去登录')
}

const log = function () {console.log('去上报')
}

const loginBtnClick = after(showLogin, log)

loginBtnClick()

2. 动静减少参数

一个惯例的 ajax 申请参数包含 type / url / param，当突发一个非凡状况，须要在 ajax 的参数中，新增一个 token 参数。

2.1 一般做法

先上代码：

const ajax = function (type, url, param) {
    // 新增 token 参数
    param.token = 'xxx'
    // ...ajax 申请... 省略
}

好了，又一次违反凋谢 - 关闭准则，间接批改了 ajax 函数外部.

2.2 装璜器做法

通过装璜器模式，在 ajax 调用之前，为 ajax 减少 token 参数，代码如下：

const before = function (fn, beforeFn) {return function () {beforeFn.apply(this, arguments)
        return fn.apply(this, arguments)
    }
}

let ajax = function (type, url, param) {console.log(arguments)
    // ...ajax 申请... 省略
}

ajax = before(ajax, function (type, url, param) {console.log(param)
    param.token = 'xxx'
})

ajax('type', 'url', {name: 'tj'})

这样做能够缩小 ajax 函数的职责，进步了 ajax 函数的可复用性，

3. 总结

本文通过给鸭子函数动静减少性能、数据上报、动静减少参数 3 个例子，讲述了装璜器模式的利用场景及带给咱们的益处。

装璜器模式，让对象更加稳固，且易于复用。而不稳固的性能，则能够在个性化定制时进行动静增加。

三、职责链模式

1. 什么是职责链模式

职责链模式就是当一个对象 a，有多种可能的申请对象 b、c、d、e 时，咱们为 b、c、d、e 别离定义一个职责，组成一条职责链，这样 a 只须要找到 b 发动申请，而后沿着职责链持续申请，直到找到一个对象来解决 a。

女孩子们都喜爱结伴吃饭，我当初要找一个人一起吃饭，代码如下：

嗯 ….. 女程序员的确是这样，吃个饭也要写代码发申请的。

const [astrid, brooke, calliope] = [{
    name: 'astrid',
    requirement: '我要吃湘菜'
},{
    name: 'brooke',
    requirement: '我要找 10 集体一起吃饭'
},{
    name: 'calliope',
    requirement: '我要和男朋友一起吃饭'
}]

// 是否满足 Astrid 的要求
function isSatisfyAstrid (user) {// ... 省略...}

// 是否满足 Brooke 的要求
function isSatisfyBrooke (user) {// ... 省略...}

// 是否满足 Calliope 的要求
function isSatisfyCalliope (user) {// ... 省略...}

function eatDinner () {if (isSatisfyAstrid()) {console.log(` 我能够和 astrid 一起吃晚饭啦 `)
    } else if (isSatisfyBrooke()) {console.log(` 我能够和 brooke 一起吃晚饭啦 `)
    } else if (isSatisfyCalliope()) {console.log(` 我能够和 calliope 一起吃晚饭啦 `)
    } else {console.log(` 哎呀，我要一个人吃晚饭啦 `)
    }
}

因为 astrid、brooke、calliope 吃晚饭的要求不同，我须要一个个去发动晚餐申请，直到找到许可和我一起吃晚饭的人。

在这里，我假如 astrid 的要求是要吃湘菜，brooke 的要求是要找 10 集体凑一桌一起吃，calliope 的要求是只想和男朋友一起吃饭。

上述代码用 if-else 的做法十分死板，如果我又多了个敌人 davi，我必须再次批改 eatDinner 办法，违反了凋谢 - 关闭准则，不易于保护。

上面应用职责链来优化上述代码，代码如下：

// 给每个人定义一个职责
const chainOrderA = new Chain(isSatisfyAstrid)
const chainOrderB = new Chain(isSatisfyBrooke)
const chainOrderC = new Chain(isSatisfyCalliope)

// 设置一下职责链的程序
chainOrderA.setNextSuccessor(chainOrderB)
chainOrderB.setNextSuccessor(chainOrderC)

// 发动申请，这时我只须要向职责链上的第一个人申请
function eatDinner () {chainOrder.passRequest() // 发动申请
}

将职责作为转入 Chain 函数，并通过 setNextSuccessor 定义该职责的下一个职责函数，组成一条 chainOrderA -> chainOrderB -> chainOrderC 职责链，这时，我只须要向 astrid 发动申请，如果申请失败，将会沿着职责链持续申请，直到找到和我一起吃晚饭的人。

上面将讲述在理论场景中怎么应用职责链模式，怎么实现 Chain 办法，请持续往下看。

2. 理论场景

1. 618 预售商品订单

电商网站免不得会推出商品预售流动，假如在 618 之前，预付 500 定金，可取得 100 元优惠券，预付 200 元定金，可取得 50 优惠券，未付定金则无优惠券。618 当天的购买事件如下：

1.1 一般做法

先上代码。

本文代码仅举例说明，和业务无关。

const order = function (orderType) {if (orderType === 500) {console.log('已预付 500 定金，享有 100 优惠券')
    } else if (orderType === 200) {console.log('已预付 200 定金，享有 50 元优惠券')
    } else {console.log('未付定金，无优惠')
    }
}

order(500) // '已预付 500 定金，享有 100 优惠券'

相熟的代码，一长段的 if-else 判断，不利于保护。

1.2 职责链模式

定义一个职责类 Chain。

• 接管一个职责函数 fn 作为参数；
• setNextSuccessor 指定该职责的下一个职责函数；

• passRequest 发动对职责函数 fn 的申请；

  • 如果返回后果是nextSuccesstor，阐明申请失败，持续申请职责链上的下一个职责函数；
  • 如果不是返回 nextSuccesstor，阐明找到了接管申请的对象，返回申请后果，不再继续执行职责链上的下一个职责函数。

代码如下：

const Chain = function(fn) {
  this.fn = fn;
  this.successor = null;
};

Chain.prototype.setNextSuccessor = function(successor) {return this.successor = successor;}

Chain.prototype.passRequest = function() {const ret = this.fn.apply(this, arguments)
  if (ret === 'nextSuccessor') {return this.successor && this.successor.passRequest.apply(this.successor, arguments);
  }
  return ret;
};

而后定义职责类实例，通过 setNextSuccessor 组成职责链，代码如下：

const order500 = function (orderType) {if (orderType === 500) {console.log('已预付 500 定金，享有 100 优惠券')
  } else {return 'nextSuccessor'}
} 

const order200 = function (orderType) {if (orderType === 200) {console.log('已预付 200 定金，享有 50 元优惠券')
  } else {return 'nextSuccessor'}
} 

const chainOrder500 = new Chain(order500)

const chainOrder200 = new Chain(order200)

chainOrder500.setNextSuccessor(chainOrder200)

chainOrder500.passRequest(200)

上述代码将 chainOrder500 和 chainOrder200 组成一条职责链，不论用户是哪种类型，都只须要向 chainOrder500 发动申请，如果 chainOrder500 无奈解决申请，就会持续沿着职责链发动申请，直到找到能解决申请的职责办法。

通过职责链模式，解耦了申请发送者和多个接收者之间的简单关系，不再须要晓得具体哪个接收者来接管发送的申请，只须要向职责链的第一个阶段发动申请。

3. 总结

职责链模式，帮忙咱们治理代码，升高发动申请和接管申请对象之间的耦合。

职责链模式中的节点数量和程序是能够自在变动的，能够在运行时决定链中蕴含哪些节点。

可通过 github 源码 进行实操练习。

心愿能对你有所帮忙，感激浏览❤️

· 往期精彩 ·

【简略易懂的设计模式（上）】

欢送关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。