函数柯理化之提前确认 (惰性函数)

Posted 2021-07-25 web半晨

// 方案一
let on = function(element, event, handler) {
    if (document.addEventListener) {
        if (element && event && handler) {
            element.addEventListener(event, handler, false);
        };
    } else {
        if (element && event && handler) {
            element.attachEvent('on' + event, handler);
        };
    };
};

// 方案二
// ()(); => ~function() {.. ..}();
let on = (function() {
    if (document.addEventListener) {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            };
        };
    } else {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.attachEvent('on' + event, handler);
            };
        };
    };
})();

// 方案三
// 换一种写法可能比较好理解一点，
// 上面就是把 isSupport 这个参数给先确定下来了
let on = function(isSupport, element, event, handler) {
    isSupport = isSupport || document.addEventListener;
    if (isSupport) {
        return element.addEventListener(event, handler, false);
    } else {
        return element.attachEvent('on' + event, handler);
    };
};

在做项目的过程中，封装一些 dom 操作可以说再常见不过，上面第一种写法也是比较常见，但是看看第二种写法，它相对于第一种写法就是自执行然后返回一个新的函数，这样其实就是提前确定了会走哪一个方法，避免每次都进行判断。