惰性函数实现高性能能力检测

在SPA、各种MV*框架如日中天，前后端分离、工程化大行其道的现如今来看，能力检测似乎已经不那么重要，因为大多产品已经不再需要去兼容老旧的IE，或者说是更多偏向移动端的开发，虽然一些兼容的坑依旧存在，但是通过层出不穷的自动化工具，我们已经不必事事躬亲了。然而今天要向大家分享的则是关于事件兼容性的能力检测，可能看上去没什么大的用场，却是我们理解惰性函数的好途径。

常规的检测方式

先看一则常见的事件监听封装

function addEvent(ele, type, cb, isCap) {
    
    if (window.addEventListener) {
        ele.addEventListener(type, cb, isCap);
    } else if (window.attachEvent) {
        ele.attachEvent(type, function () {
            var args            = [].prototype.slice(0);
            window.event[target] = window.event.srcElement;
            args.unshift(window.event);
            cb.apply(this, args);
        });
    } else {
        ele['on' + type] = cb;
    }

}

var body = document.body;

addEvent(body,'load',function () {
    console.log('onload') // onload
});

addEvent(body,'click',function () {
    console.log('onclick') // onclick
});

可以看的到，这是一个有着足够兼容性的的事件方法,能够应付常见的需求和场面。

只是细细想来，当我们将这个方法复用了很多次后，会发现每次复用都会重新进行一次能力检测，以便符合当前宿主环境。可能你会想，对于浏览器性能过剩的现如今来说，这点性能损耗并不算什么。

那么不妨做个假设，当我们在做一个高频操作，例如window.onresize的监听，鼠标随便轻轻一拖，就可能会触发无数次事件的重载。

面临这种状况，常规情况下，有经验的开发者大致会做两种处理来改善性能。

1. 函数节流，将方法限频，过滤一些线性重复性的操作。这方面，在loadash和underscore都有相应的方法。日后我也会分享出原生的实现方式。
2. 从源头找起，把不必要的能力检测去除，我们只在页面加载时检测一次不好吗？

惰性检测方式

函数节流我们日后再分享，那么，要如何把不必要的能力检测去除掉呢？下面有两种实现方式，代码如下：

//使用惰性函数


var addEvent = (function () {
    //立即执行    
    if (window.addEventListener) {
        return function (ele, type, cb, isCap) {
            ele.addEventListener(type, cb, isCap);
        }
    } else if (window.attachEvent) {
        return function (ele, type, cb) {
            ele.attachEvent(type, function () {
                var args             = [].prototype.slice(0);
                window.event[target] = window.event.srcElement;
                args.unshift(window.event);
                cb.apply(this, args);
            });
        }
    } else {
        return function (ele, type, cb) {
            ele['on' + type] = cb;
        }

    //初始判断过后，addEvent就无需再次判断，已经是正确的封装。
    }
}());

代码变化并不大，关键点在于，我们用到了立即执行函数，即方法在初始化完毕，便立即判断，判断后，返回适合当前场景的方法。

//常见的方法调用方式
function getName() {
    console.log('ives')
}

getName() // ives;

//立即执行 可以是声明函数 也可以是匿名函数 两种方式均可
(function getName() {
    console.log('ives') // ives
}());

在常见的高阶函数实践中，我们时常会接受函数，对函数的参数或者是上下文环境进行一些改造，并返回。在这种惰性判断里，我们利用了函数一等公民的身份和立即执行的便利，进行了初始判断，随后通过return语句进行变量的重赋值，进而达到了性能上的提高。

实际上，很多常用的检测，比如AJAX的封装、获取实际的CSS样式等，都可以使用惰性函数处理。

重载检测方式

然而，这种方法也并非是完美的，我们假设另外一种场景，即是在静态HTML中，我们引用的某个JS文件中有这个方法，但是这个HTML页面并没有事件性质的交互，那么我们可以基于吹毛求疵，鸡蛋里挑骨头的角度来断言，这次惰性加载是失败的，无用的。因为我们浪费了系统的资源，我们没有事件，你为什么要加载一次？

总而言之，惰性加载虽然性能有提升，却仍然不是最好的处理，只是有利于我们对于惰性函数的理解。

什么情景才是最完美的呢？即是初次调用时才做第一次判断，随后，无需判断，方法也很简单，只要简单的改动几行代码。

依旧是以事件为例，代码如下：

var addEvent = function (ele,type,cb,isCap) {
    //取消了立即执行 初次调用时进行方法重载
    if (window.addEventListener) {
        addEvent = function (ele, type, cb, isCap) {
            ele.addEventListener(type, cb, isCap);
        }
    } else if (window.attachEvent) {
        addEvent = function (ele, type, cb) {
            ele.attachEvent(type, function () {
                var args             = [].prototype.slice(0);
                window.event[target] = window.event.srcElement;
                args.unshift(window.event);
                cb.apply(this, args);
            });
        }
    } else {
        addEvent = function (ele, type, cb) {
            ele['on' + type] = cb;
        }
    }
    //初次调用时，手动执行重载的方法
    addEvent(ele,type,cb,isCap);
};

可以看到实现的方式异常简单，通过对方法的重载，并在初始执行时手动执行重载后的方法，满足了我们上述的条件。

结束语

可能大家会说，你个标题党，最后一种重载的方式才是相对完美的方式，今天又为什么要讲惰性函数呢？无外，抛砖引玉罢了，在钻研设计模式时，是绝对离不开闭包和惰性函数的，今天则算是小小的热身。