《JS设计模式》读书笔记（七-完结）

标签：JS 设计模式

---

其他读书笔记链接：

• 《JS设计模式》读书笔记（一）
• 《JS设计模式》读书笔记（二）
• 《JS设计模式》读书笔记（三）
• 《JS设计模式》读书笔记（四）
• 《JS设计模式》读书笔记（五）
• 《JS设计模式》读书笔记（六）

---

职责链模式

解除任务请求者与任务执行者之间的复杂关系，任务从任意请求者开始逐级传递，直至到达最终执行者或者不再传递。类似

不变：有一系列任务要执行，并且需要逐级筛选。
变化：具体任务的细节，任务的执行顺序。

结果：消除大片的switch语句；实现AOP

var Chain = function(fn) {
    this.fn = fn;
    this.successor = null;
}
Chain.prototype.setNext = function(successor){
    this.successor = successor;
    return chain
}
Chain.prototype.next = function(){
    this.successor && this.successor.start.apply(this.successor, arguments);
}
Chain.prototype.start = function(){
    this.fn.apply(this, arguments);
}

var first = new Chain(function(){
    console.log('node 1')
    this.next();
})
var second = new Chain(function(){
    console.log('node 2')
    var that = this
    var pause = 0
    console.log('pause at:', pause =  Date.now())
    setTimeout(function(){
        console.log('start again after 1s:', Date.now() - pause)
        that.next();
    }, 1000)
})
var third = new Chain(function(){
    console.log('node 3')
    })

first.setNext(second).setNext(third);
first.start();

---

装饰者模式

不修改原函数的前提下，在函数执行的前后增加新功能，适用于只针对特定场景的功能。使用装饰器，原函数就可以保持高内聚。

不变：原函数。
变化：新功能。

结果：原函数保持高内聚，可以各处通用；对于特殊的功能通过装饰器来增加，不影响原函数。与职责链相似，同样可以实现AOP

注意：this的正确传递

var before = function(originFn,beforeFn) {
    return function(){
        // 因为这个返回的函数会被Obj调用，因此这里写this就可以正确取得上下文
        beforeFn.apply(this, arguments);
        return originFn.apply(this, arguments);
    }
}
var after = function(originFn, afterFn) {
    return function() {
        var ret = originFn.apply(this, arguments);
        afterFn.apply(this, arguments);
        return ret;
    }
}

var obj = {msg: 'hello', say: function(){console.log(this.msg)}}
obj.say = before(obj.say, function(){console.log('before')})
obj.say = after(obj.say, function(){console.log('after')})

obj.say();

---

结语

设计模式是好东西，可以使我们的代码更加容易维护与扩展，虽然有各种各样的模式，但核心只有一个是不变的，就是分离变化与不变。平时写代码的时候时刻注意只一点，那么自然而然就会想到运用某一种设计模式了。

《设计模式》还有更多的精彩内容，比起看我这几篇草稿，看原著更有收获，再次推荐。

丸！