惰性函数定义模式 使用方法

惰性函数定义模式指的是，函数在执行时并不会立即返回结果，而是通过一些技巧延迟了函数的执行，让函数具有了更高的灵活性和重复使用性。

下面是使用惰性函数定义模式的方法：

1. 简单的惰性函数定义模式

function addEvent(elem, type, handler) {
    if (elem.addEventListener) {
        elem.addEventListener(type, handler, false);
    } else if (elem.attachEvent) {
        elem.attachEvent('on' + type, handler);
    } else {
        elem['on' + type] = handler;
    }
}

function addEvent(elem, type, handler) {
    if (elem.addEventListener) {
        addEvent = function(elem, type, handler) {
            elem.addEventListener(type, handler, false);
        };
    } else if (elem.attachEvent) {
        addEvent = function(elem, type, handler) {
            elem.attachEvent('on' + type, handler);
        };
    } else {
        addEvent = function(elem, type, handler) {
            elem['on' + type] = handler;
        };
    }
    return addEvent(elem, type, handler);
}

上面的代码就是一个简单的惰性函数定义模式。

在第一个函数中，在执行每次 addEvent(elem, type, handler) 的时候，都需要判断浏览器是否支持 addEventListener 方法。这样就会影响到代码的性能，因为每次执行都会执行一遍判断。

在第二个函数中，我们通过一个闭包实现了惰性函数定义模式。在第一次执行 addEvent(elem, type, handler) 后，就已经将新定义的函数替换了原来的 addEvent 函数，以后每次执行 addEvent(elem, type, handler) 都不再需要再进行判断，直接执行对应的方法即可。

下面是一个完整的示例代码：

function addEvent(elem, type, handler) {
    if (elem.addEventListener) {
        addEvent = function(elem, type, handler) {
            elem.addEventListener(type, handler, false);
        };
    } else if (elem.attachEvent) {
        addEvent = function(elem, type, handler) {
            elem.attachEvent('on' + type, handler);
        };
    } else {
        addEvent = function(elem, type, handler) {
            elem['on' + type] = handler;
        };
    }
    return addEvent(elem, type, handler);
}

//使用示例
var elem = document.getElementById('elem');
addEvent(elem, 'click', function() {
    console.log('element clicked');
});

2. 延迟执行函数

var lazyLoad = function() {
    var imgList = document.querySelectorAll('img[data-src]');

    var onscroll = function() {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = 0; i < imgList.length; i++) {
            if (scrollTop + window.innerHeight > imgList[i].offsetTop) {
                imgList[i].src = imgList[i].getAttribute('data-src');
                imgList[i].removeAttribute('data-src');
            }
        }
    };

    window.addEventListener('scroll', onscroll);
    onscroll();
};

//使用示例
lazyLoad();

上面的代码就是一个利用惰性函数定义模式，实现图片懒加载的代码。

在这个函数中，先是获取到所有需要懒加载的图片元素，并获取到文档里滚动条滚动的距离。然后遍历每一个图片，当图片进入视线范围内时，再将图片的 data-src 属性赋值到 src 属性中。最后通过 window 的 onscroll 事件来触发图片懒加载。

这里使用惰性函数定义模式的好处在于，oncroll 事件只需要绑定一次，以后不需要再绑定，代码的性能也会更优。