JS中的惰性函数

最新推荐文章于 2022-01-13 17:18:29 发布

DayDay_Lee

最新推荐文章于 2022-01-13 17:18:29 发布

阅读量637

点赞数

分类专栏： JavaScript学习笔记文章标签：前端性能优化-惰性函数

本文链接：https://blog.csdn.net/qq_43127921/article/details/101291107

版权

JavaScript学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

惰性函数:

惰性函数表示，此函数有很多个分支判断，但这些分支判断只会在第一次调用时执行，执行后会修改此函数，再次调用时无须判断。

常用于：

针对于去优化频繁使用的函
常用于函数库的编写,单例模式中

实例：

function addEvent(type, element, fun) {
            if (element.addEventListener) {
                console.log((++time)+" time");
                element.addEventListener(type, fun, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, fun);
            } else {
                element['on' + type] = fun;
            }
        }

优化:

function addEvent(type,element, fun){
            if(element.addEventListener){
                // console.log((++time)+" time");
                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;
                }
            }
            return addEvent(type,element,fun);
        }

试一试是不是真得就判断一次：


<body>
    <div id="demo" style="background: red;width:100px;height:100px; ">
        
    </div>
    <script>
        var time = 0,tim2 = 0;
        // 经典例子
        function addEvent(type, element, fun) {
            if (element.addEventListener) {
                console.log((++time)+" time");
                element.addEventListener(type, fun, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, fun);
            } else {
                element['on' + type] = fun;
            }
        }
        // 下面我们来重写这个addEvent
        
        // function addEvent(type,element, fun){
        //     if(element.addEventListener){
        //         console.log((++time)+" time");
        //         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;
        //         }
        //     }
        //     return addEvent(type,element,fun);
        // }
        //  由上，第一次调用addEvent会对浏览器做能力检测，然后，重写了addEvent
        //  下次再调用的时候，由于函数被重写，不会再做能力检测
        var div = document.getElementById('demo');
        addEvent('click',div,function(){
            console.log(0);
        });
        addEvent('click',div,function(){
            console.log(1);
        });
        addEvent('click',div,function(){
            console.log(2);
        });
       
    </script>
</body>

第一种：
第一个
第二种,惰性函数：
在这里插入图片描述
总结： 有时候针对频繁使用的函数和多个条件判断的函数,可以尝试去使用这个惰性函数,也算是前端性能优化的一种方式!

DayDay_Lee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS中的惰性函数

惰性函数:惰性函数表示，此函数有很多个分支判断，但这些分支判断只会在第一次调用时执行，执行后会修改此函数，再次调用时无须判断。常用于：针对于去优化频繁使用的函常用于函数库的编写,单例模式中实例：function addEvent(type, element, fun) { if (element.addEventListener) { ...
复制链接

扫一扫