兼容优化方案之惰性函数

什么是惰性函数？

首先看下专业术语吧，它表示函数的执行的分支只会在函数第一次执行调用的过程中该函数覆盖为另一个按照合适的方法执行的函数。简单的理解就是惰性函数执行后改变了自己。

简单案例

function changFn(num) {
    switch (num) {
        case 1:
            changFn = () => {
                console.log(1)
            }
            break;
        case 2:
            changFn = () => {
                console.log(2)
            }
            break;
        case 3:
            changFn = () => {
                console.log(3)
            }
            break;
    }
    return changFn()   > 返回这个被改变的函数
}
changFn(1);
changFn(2);    > 这里只会一直执行1 因为这个函数已经被改为一直输出1的函数了

使用场景

从上面的案例看到， 惰性函数是通过条件进行改写自己。比如我们在写兼容性判断的时候就可以使用惰性函数来简化判断流程。以下举一个浏览器绑定事件小案例，希望能给大家在以后工作上有一些启示。

<button class="btn">点击按钮</button>
<script>
    let btn = document.getElementsByClassName('btn')[0];
    function bind() {
    // 如果是新版浏览器
        if (window.addEventListener) {
            bind = function (el, type, fn, cap) {
                el.addEventListener(type, fn, cap)
            }
            // 如果是IE
        } else if (window.attachEvent) {
            bind = function (el, type, fn) {
                el.attachEvent('on' + type, function () {
                    fn.call(el)
                })
            }
        } else {
        // 很老版本的浏览器，只能支持句柄形式
            bind = function (el, type, fn) {
                el['on' + type] = fn
            }
        }
        return bind   //改写的方法return出去
    }
    let bindFn = bind()
    
    // 之后绑定事件用这个函数之需要判断一次
    bindFn (btn, 'click', function () {
        console.log(123);
    }, false)

总结

惰性函数主要是在条件相对固定的情况下进行使用， 例如兼容性判断。用好这个也能减少很多重复性的代码。把自己工作的一些经验分享给大家，写的不是很好但希望能给大家提供一些帮助。