JavaScript高级程序设计学习笔记--高级技巧

2022-09-17 15:28:34

惰性载入函数

因为浏览器之间行为的差异，多数JavaScript代码包含了大量的if语句，将执行引导到正确的代码中，看看下面来自上一章的createXHR()函数。

        function createXHR(){
            if (typeof XMLHttpRequest != "undefined"){
                return new XMLHttpRequest();
            } else if (typeof ActiveXObject != "undefined"){
                if (typeof arguments.callee.activeXString != "string"){
                    var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                                    "MSXML2.XMLHttp"],
                        i, len;
            
                    for (i=0,len=versions.length; i < len; i++){
                        try {
                            new ActiveXObject(versions[i]);
                            arguments.callee.activeXString = versions[i];
                            break;
                        } catch (ex){
                            //skip
                        }
                    }
                }
            
                return new ActiveXObject(arguments.callee.activeXString);
            } else {
                throw new Error("No XHR object available.");
            }
        }

每次调用createXHR()的时候，它都要对浏览器所支持的能力仔细检查。每次调用该函数都是这样，即使每次调用时分支的结果不变：浏览器内置XHR，那么它就一直支持了，那么
这种测试就变得没必要了。即使只有一个If语句的代码，也肯定要比没有If语句慢，所以如果If语句不必要每次执行，那么代码可以运行地更快一些。解决方案就是称之为惰性载入
的技巧。
惰性载入表示函数执行的分支仅会发生一次。有两种实现惰性载入的方式。第一种就是在函数被调用时再处理函数，在第一次调用的过程中，该函数会被覆盖为另外一个按合适方式
执行的函数，这样第二次再调用的时候就不用再经过执行的分支了。

        function createXHR(){
            if (typeof XMLHttpRequest != "undefined"){
                createXHR = function(){
                    return new XMLHttpRequest();
                };
            } else if (typeof ActiveXObject != "undefined"){
                createXHR = function(){                    
                    if (typeof arguments.callee.activeXString != "string"){
                        var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                                        "MSXML2.XMLHttp"],
                            i, len;
                
                        for (i=0,len=versions.length; i < len; i++){
                            try {
                                new ActiveXObject(versions[i]);
                                arguments.callee.activeXString = versions[i];
                            } catch (ex){
                                //skip
                            }
                        }
                    }
                
                    return new ActiveXObject(arguments.callee.activeXString);
                };
            } else {
                createXHR = function(){
                    throw new Error("No XHR object available.");
                };
            }
            
            return createXHR();
        }
        
        var xhr1 = createXHR();
        var xhr2 = createXHR();

第二种实现惰性载入的方式是在声明函数时就指定适当的函数。这样，第一次调用函数时就不会损失性能了，而在代码首次加载时会损失一点性能。

        var createXHR = (function(){
            if (typeof XMLHttpRequest != "undefined"){
                return function(){
                    return new XMLHttpRequest();
                };
            } else if (typeof ActiveXObject != "undefined"){
                return function(){                    
                    if (typeof arguments.callee.activeXString != "string"){
                        var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                                        "MSXML2.XMLHttp"],
                            i, len;
                
                        for (i=0,len=versions.length; i < len; i++){
                            try {
                                new ActiveXObject(versions[i]);
                                arguments.callee.activeXString = versions[i];
                                break;
                            } catch (ex){
                                //skip
                            }
                        }
                    }
                
                    return new ActiveXObject(arguments.callee.activeXString);
                };
            } else {
                return function(){
                    throw new Error("No XHR object available.");
                };
            }
        })();
        
        var xhr1 = createXHR();
        var xhr2 = createXHR();

重复的定时器

        setTimeout(function(){
        
           var div = document.getElementById("myDiv"),
               left = parseInt(div.style.left) + 5;
           div.style.left = left + "px";
        
           if (left < 200){
               setTimeout(arguments.callee, 50);
           }
        
        }, 50);

函数节流

函数节流背后的基本思想是指，某些代码不可以在没有间断的情况下连续重复执行。第一次调用函数创建一个定时器，在指定的时间间隔之后运动代码。当第二次调用该函数时，
它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。
目的是只有在执行函数请求停止了一段时间之后才执行。以下是该模式的基本形式：

 var processor={
   timeoutId:null,
    //实际进行处理的方法
   performProcessing:function(){
     //实际执行的代码
   },
   process:function(){
    clearTimeout(this.timeoutId);
    
    var that=this;
    this.timeoutId=setTimeout(function(){
      that.performProcessing();
    },100
   }
 };

当调用了process(),第一步是清除存好的timeoutId,来阻止之前的调用被执行。然后，创建一个新定时器调用performProcessing()。由于setTimeout()中用到的函数环境总是
window，所以有必要保存this的引用以方便以后使用。
时间间隔设为了100ms，这表示最后一次调用process()之后至少100ms后才会调用performProcessing()。所以如果100ms之间内调用了process()共20次，performanceProcessing()
仍只会被调用一次。
这个模式可以用throttle()函数来简化，这个函数可以自动进行定时器的设置和消除，如下例所示：

         function throttle(method, scope) {
            clearTimeout(method.tId);
            method.tId= setTimeout(function(){
                method.call(scope);
            }, 100);
        }
    
        function resizeDiv(){
            var div = document.getElementById("myDiv");
            div.style.height = div.offsetWidth + "px";
        }
        
        window.onresize = function(){
            throttle(resizeDiv);
        };

JavaScript高级程序设计学习笔记--高级技巧,布布扣,bubuko.com

JavaScript高级程序设计学习笔记--高级技巧

码农公寓

惰性载入函数

重复的定时器

函数节流

相关文章