博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS编程建议——72:惰性载入函数
阅读量:6952 次
发布时间:2019-06-27

本文共 2549 字,大约阅读时间需要 8 分钟。

建议72:惰性载入函数

惰性载入函数主要解决的问题也是兼容性,原理跟分支函数类似,下面是简单的示例。
var addEvent = function(el, type, handle) {

addEvent = el.addEventListener ? function(el, type, handle) {    el.addEventListener(type, handle, false);} : function(el, type, handle) {    el.attachEvent("on" + type, handle);};//在第一次执行addEvent函数时,修改了addEvent函数之后,必须执行一次addEvent(el, type, handle);

}

从代码上看,惰性载入函数也是在函数内部改变自身的一种方式,这样在重复执行的时候就不会再进行兼容性方面的检测了。
惰性载入表示函数执行的分支仅会发生一次,即第一次调用的时候。在第一次调用的过程中,该函数会被覆盖为另一个按合适方式执行的函数,这样任何对原函数的调用都不用再经过执行的分支了。其优点如下:
要执行的适当代码只有在实际调用函数时才执行。
尽管第一次调用该函数会因额外的第二个函数调用而稍微慢点,但后续的调用都会很快,因为避免了多重条件。
由于浏览器之间的行为差异,多数JavaScript代码包含了大量的if语句,将执行引导到正确的代码中。
在下面惰性载入的createXHR()中,if语句的每个分支都会为createXHR()变量赋值,有效覆盖了原有的函数,最后一步便是调用新赋函数。下次调用createXHR()的时候,就会直接调用被分配的函数,这样就不用再次执行if语句。
function createXHR() {

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

}

每一次调用createXHR()时都要对浏览器所支持的功能仔细检查,这样每次调用createXHR()时都要进行相同的测试就变得没有必要了。减少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') { ver            versions=["MSXML2.XMLHttp","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp.6.0"];            for(var i = 0, len = versions.length; i < len; i++) {                try {                    var xhr = new ActiveXObject(versions[i]);                    arguments.callee.activeXString = versions[i];                    return xhr;                } catch(ex) {                    //跳过                }            }        }        return new ActiveXObject(arguments.callee.activeXString);    };} else {    createXHR = function() {        throw new Error("No XHR object available.");    };}return createXHR();

}

如前面所述,if语句的每一个分支都会为createXHR变量赋值,有效覆盖了原有函数。最后一步便是调用新赋函数,下次调用creatXHR()的时候就会直接调用被分配的函数,这样就不用再次执行if语句。

转载地址:http://xrjil.baihongyu.com/

你可能感兴趣的文章
mysql之 mysql 5.6不停机主从搭建(一主一从基于GTID复制)
查看>>
面试流程
查看>>
gdal以GA_Update方式打开jpg文件的做法
查看>>
yii2弹出层
查看>>
OSSSME - 开源软件助力中小企业发展
查看>>
基础才是重中之重~值类型和引用类型
查看>>
通过php动态传数据到highcharts
查看>>
正则表达式全部符号解释
查看>>
百度eCharts体验
查看>>
使用python实现用微信远程控制电脑
查看>>
JavaScript 的 WebAssembly
查看>>
2016-我的前端之路:工具化与工程化
查看>>
vue 短信验证码
查看>>
20145129实验报告(一)
查看>>
mssql表分区
查看>>
静态方法工厂模式
查看>>
该是总结沉淀的时候了
查看>>
正则表达式学习笔记
查看>>
sublime text笔记
查看>>
MySQL中,修改表的某一字段的部分值
查看>>