《JS设计模式》读书笔记（二）

标签：JS 设计模式

---

读书笔记链接：

• 《JS设计模式》读书笔记（一）
• 《JS设计模式》读书笔记（三）
• 《JS设计模式》读书笔记（四）
• 《JS设计模式》读书笔记（五）
• 《JS设计模式》读书笔记（六）
• 《JS设计模式》读书笔记（七-完结）

---

策略模式

封装一系列的算法，并且各个可以替换；不只算法，规则架构也可以作为策略来封装。

使用场景：一个旅游类，接受各种出行策略类。
travel.setVehicle(new Car()) // new Bus(), new Plane();

事实上，在js中策略模式被广泛使用，例如事件的回调; 原因就在于JS中的函数可以当做变量来传递

结果：消除大片的条件分支语句(switch)

var tween = {
    linear: function(t,b,c,d) { return b + c*t/d },
    easeIn: function(t,b,c,d) { return b + c * (t/d) * (t/d)},
    easeOut: function(t,b,c,d) {return b + c * ((t/d -1) * (t/d -1) +1)}
}

var Animation = function(el) {
    this.el = el;
    this.startTime = 0;
    this.start = 0;
    this.end = 0;
    this.prop = '';
    this.easing = null; // 这里使用策略模式
    this.duration = 0;
}
Animation.prototype.run = function(prop, end, duration, easing) {
    this.startTime = Date.now();
    this.start = this.el.getBoundingClientRect()[prop]; // 针对位置大小
    this.duration = duration;
    this.easing = tween[easing];
    var that = this;
    var timeId = setInterval(function(){
        if(that.step() === false) clearInterval(timeId)
    }, 20);
}
Animation.prototype.step = function() {
    var elapse = Date.now() - this.startTime;
    if(elapse >= this.duration) {
        this.update(this.end)
        return false;
    }
    var pos = this.easing(elapse, this.start, this.end-this.start, this.duration);
    this.update(pos)
}
Animation.prototype.update = function(pos) {
    this.el.style[this.prop] = pos + 'px';
}

var div = document.getElementById('div');
var anim = new Animation(div);
anim.start('right', 500, 1000, 'easeOut');

---

代理模式

通过引入一个新的层，在不改动原有类的情况下为原有的类增加新功能，解耦。

使用场景：虚拟代理，汇总任务，例如HTTP请求；缓存代理，缓存结果；

结果：提高类的内聚性，新功能放在类的外面，以后不需要时也不用修改原类

注意：代理类与原类的API要保持一致，外部调用不能也不应该知道调用的是代理类还是原类

var cachedFn = function(fn) {
    var cache = {};
    return function() {
        var args = []
        for(var i=0,l=arguments.length;i