js优化之惰性加载函数

js优化之惰性加载函数

直接上案例,copy后保存为html文件,打开浏览器控制台即可看到效果。未优化的addEvent,每调用一次都会进行一次判断。而优化后的addEvent只在首次被调用时进行判断,其后再次调用时,将不再进行浏览器支持的事件监听判断。

注意:调用时,记得注释其他两个addEvent

<body>

    <div id="div1">div1</div>
</body>
<script type="text/javascript">


/* 优化方案一:方法重写后再调用*/
function addEvent (type, element, fun) {
    if (element.addEventListener) {
        console.log(123);
        addEvent = function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }
    else if(element.attachEvent){
        addEvent = function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }
    else{
        addEvent = function (type, element, fun) {
            element['on' + type] = fun;
        }
    }
    addEvent(type, element, fun);
}


/* 优化方案二:匿名函数重写与执行*/
var addEvent = (function(type, element, fun) {
    if (window.addEventListener) {
        console.log(123);
        return function(type, element, fun) {
            element.addEventListener(type, fun, false) //webkit、os
        }
    }
    if (window.attachEvent) {
        return function(type, element, fun) {
            element.attachEvent('on' + type, fun) //IE浏览器
        };
    }
})();


/* 没有优化的添加事件方法:每次调用都会判断*/
function addEvent (type, element, fun) {
    if (element.addEventListener) {
        console.log(123);
        element.addEventListener(type, fun, false);


    }
    else if(element.attachEvent){
        element.attachEvent('on' + type, fun);
    }
    else{
        element['on' + type] = fun;
    }
}
var div = document.getElementById('div1');
addEvent( 'click',div, function() {
    alert(1);
})
addEvent( 'click',div, function() {
    alert(2)
})

</script>


惰性载入函数有两个主要优点:

第一是显而易见的效率问题,虽然在第一次执行的时候函数会意味赋值而执行的慢一些,但是后续的调用会因为避免的重复检测更快;

第二个是要执行的适当代码只有当实际调用函数是才执行,很多JavaScript库在在加载的时候就根据浏览器不同而执行很多分支,把所有东西实现设置好,而惰性载入函数将计算延迟,不影响初始脚本的执行时间。


惰性载入函数应用场景总结(以下2条件同时满足):

1 应用频繁,如果只用一次,是体现不出它的优点出来的,用的次数越多,越能体现这种模式的优势所在;

2 固定不变,一次判定,在固定的应用环境中不会发生改变;


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值