标签：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<l;i++){
args.push(arguments[i])
}
if(cache[args.toString()]) return cache[args.toString()];
return cache[args.toString()] = fn.apply(this, args)
}
}
function fatorial(num) {
if(num === 0) return 1;
var result = num;
for(var i=1,l=num;i<l;i++){
result = result * i;
}
return result;
}
var cachedFactorial = cachedFn(fatorial);
