程序的bug王

请不要被标题所迷惑,这样说bug王,只是为了吸睛。 在程序的世界里,我们要多喝茶,慢慢聊。回归正题,这里想说的bug王指的是条件的分支语句。 比如: if...else if...else if... else if.........esle... 。想这样的。
看个实例:

var model = function(flag){
    if(flag===0){
        return "this is zero";
    }else if(flag === 1){
        return "this is first";
    }else if(falg === 2){
        return "this is second";
    }else {
        ...
    }
}

像这样的。 因为每一次条件判断都是对性能的一次rape。而事实上为了消除这个现象,衍生出来的模式有很多,比如: 策略模式,单例模式,迭代器模式等。这里主要想讲一下,迭代器模式.

迭代器模式

迭代器其实就是一个遍历,能够顺序遍历一个聚合对象中的一些属性. 比如数组中的.Array.prototype.forEach。
其实就是遍历,然后将获得的参数进行回调处理(!!!注意,迭代器最重要的一点就是将循环中的遍历数组的参数传给回调函数处理.)

var arr = [1,2,3,4,5];
arr.forEach(function(val,index,arr){
    ...
})

而且迭代器模式你可以自定义迭代,比如内部迭代,外部迭代,顺序迭代,倒序迭代等等. 由于懒,所以就列一个比较常见的顺序迭代吧。
通常也就是使用了for循环来构建的。 比如自己定义一个迭代器

var each = function(arr,fn){
    for(var i = 0,val;val = arr[i++];){
        if(val==false){
            break;
        }
        fn(val,index,arr);
    }
}

这就是一个简单的内部迭代器。即将数组类型进行简单的遍历,然后如果遍历完成则返回。

迭代器的应用

说了迭代器的基本原理后,应该来点干货了。
迭代器在各种语言中,差不多都已经普及了,所以重构已有的方法是没有什么价值的。但迭代器最主要的功能是自定义一些系列算法,将所需要的提取出来. 比如: 事件模型事件的获取。


var bind = (function() {
    if (document.addEventListener) {
        return function(ele, fn, type) {
            ele.addEventListener(type, fn, false);
        }
    } else if (document.attachEvent) { //检测低版本的IE
        return function(ele, fn, type) {
            ele.attachEvent(type, fn);
        }
    } else {
        return function(ele,fn,type){
            ele[`on${type}`] = fn;
        }
    }
})();

可以看出里面充斥着分支语句,为了消除分支。可以将不同的方法包装起来,然后使用迭代器统一遍历.

var bind = (function(){
    var DOM2 = (function(){
         if (document.addEventListener) {
             return function(ele,fn,type){
                 ele.addEventListener(type,()=>{fn();},false);
             }
         }else {
             return false;
         }
    })();
    var IE = (function(){
        if(document.attachEvent){
            return function(ele,fn,type){
                ele.attachEvent(type,fn);
            }
        }else{
            return false;
        }
    })();
    var DOM0 = function(ele,fn,type){
        ele[`on${type}`] = ()=>{fn();};
    }
    //添加迭代器
    var Itera = function(){
        for(var i = 0,val;val = arguments[i++];){
            if(typeof val === 'function'){
                return val;
            }
        }
    }
    return Itera(DOM2,IE,DOM0);
})();
console.log(bind);  ////function (ele,fn,type){ele.addEventListener(type,()=>{fn();},false);}

接着你就可以使用bind()函数进行事件的绑定处理。但是这个应该算是将原来简单的变复杂了,因为现在事件模式几乎只有这3种(原生). 拓展性我就不说了。 所以一般用来判断事件绑定的话,推荐还是使用上面那个方式,来得更直接.
但可以从上面的例子可以看出,迭代器模式只是提供一种思想,提取最精华的部分,通过遍历选出最优解。模式这么多,关键要找到最适合你的。还是那句话,如果这个坑 坑不死我,我一定会踩更多的坑。 所以多实践,多学习,多踩坑才是进步的证明。


villainhr
7.8k 声望2.2k 粉丝