JavaScript设计模式

JavaScript design pattern

迭代模式

• 外部迭代器

var Iterator = function(obj){
     var current = 0;
     var next = function (){
          current ++;
     };
     var isDone = function (){
       return current >= obj.length;
     };
     var getCurrItem = function (){
         return obj[current]
     };
     return {
        next:next,
        isDone:isDone,
        getCurrItem:getCurrItem
    }
};
var compare = function(irerator1, iterator2){
    while(!iterator1.isDone() && !iterator2.isDone()){
        if(iterator1.getItem() !== iterator2.getItem()){
            throw new Error('iterator1和iterator2不相等');
        }
        iterator1.next();
        iterator2.next();
    }
    alert('iterator1和iterator2不相等');
};
var iterator1 = Iterator([1, 2, 3]);
var iterator2 = Iterator([1, 2, 3]);
compare(iterator1, iterator2);//输出：iterator1和iterator2相等

• 内部迭代器

var each = function(aty, callback) {
    for(var i = 0, l = ary.length; i < l;  i++){
        callback.call(ary[i], i, ary[i]);
    }
};
each([1, 2, 3], function(i, n){
    alert([i, n]);
});

• 倒序迭代器和中止迭代器

//迭代器模式提供了循环访问一个聚合对象中每个元素的方法，但是并没有限制访问的顺序。
//上面的内部迭代器默认的迭代顺序是顺序的，我们可以很简单得实现一个倒序的迭代器（中序也是很简单的，这里就不实现了）。
//倒序 + 中止 迭代器
var reverseEach = function(ary, callback) {
    for(var l = ary.length - 1; l >= 0; l --){
        if(callback(l, ary[l]) === false) {    
            break;
        }
    }
};
//在迭代器中加一个判断，提供一个跳出循环的方法。仿JQuery1.4节的each函数中的if(value === false) {break;}

装饰者模式

用AOP装饰函数的优点：

1. 不必维护中间变量。
2. 解决this被劫持的问题。
   说明：被包装函数内部使用了this指针的，需要在apply的时候重定向this

• AOP装饰函数

//两种方式
//1.函数作为参数传递的方式
//2.修改Function原型对象的方式
//1.
var before = function(fn, beforefn) {
    return function() {
        beforefn.apply(this, argumnets);
        return fn.apply(this, argumnets);
    }
};
var a = before(
    function(){alert(3);},
    function(){alert(2);}
);
a = before(a, function(){alert(1);});
a();
//2.
//该方法会污染原型，根据个人喜好以及实际需求来使用。
Function.prototype.before = function(beforefn) {
    var _self = this; //保存原函数的引用
    return function() { //返回包含了原函数和新函数的“代理”函数
        beforefn.apply(this, arguments);  //执行新函数,且保证this不被劫持，新函数接受的参数
                                          //也会被原封不动地传入原函数，新函数在原函数之前执行
        return _self.apply(this, arguments); //执行原函数并返回原函数的执行结果
                                            //并且保证this不被劫持
    }
}
Function.prototype.after = function(afterfn) {
    var _slef = this;
    return function {
        var ret = _slef.apply(this, arguments);
        afterfn.apply(this, arguments);
        return ret;
    }
}