JavaScript惰性载入函数

因为各大浏览器所使用的JS引擎不同，所以在实现某一个功能时都或多或少的存在差异，导致在写代码时要针对每一个功能给出兼容浏览器的不同实现方式，这样在运行代码时就会造成性能的损耗。所以就出现了惰性载入函数的概念。原理就是：当前浏览器第一次支持以该方法实现某功能，那么在这个页面运行期间会一直都支持该方法。

一般在写兼容性较好的代码时，我们会使用多个if分支语句来判断当前浏览器支持哪种方法，这时如果每次调用函数都把if分支走一遍显然是损耗性能的。下面来看一个简单的例子：

function addEventHandler(element, eventType, func){if (element.addEventListener){element.addEventListener(eventType, func, false);}else if (element.attachEvent){element.attachEvent('on' + eventType, func);}else{element['on' + eventType] = func;}}

上面的函数，是一个简单的兼容各大浏览器的一个事件注册函数，如果采用上面的这种方式来定义函数，那么函数会在每次执行时都把if分支走一遍，显然不是明智的选择。下面来看一下如何用惰性载入函数来处理中情况吧！

一. 第一种实现方法：函数覆盖

function addEventHandler(element, eventType, func){if (typeof addEventListener == 'function'){addEventHandler = function (element, eventType, func){element.addEventListener(eventType, func, false);}}}else if (typeof attachEvent == 'function'){addEventHandler = function (element, eventType, func){element.attachEvent('on' + eventType, func);}}else{addEventHandler = function (element, eventType, func){element['on' + eventType] = func;}}return addEventHandler(element, eventType, func);}

将代码改为如上的方式，就可以在整个页面运行期间如果多次调用该函数，只走一遍if分支，因为在第一次运行函数时，if分支中的函数就覆盖了外部的函数。比如在Chrome浏览器中，第一次执行代码后，打印addEventHandler函数将变为如下这样：

function (element, eventType, func){element.addEventListener(eventType, func, false);
}

可以看出分支中的同名函数覆盖了外部的函数。

二. 第二种实现方法：自执行函数

var addEventHandler = (function (element, eventType, func){if (typeof addEventListener == 'function'){return function (){element.addEventListener(eventType, func, false);   }}else if (typeof attachEvent == 'function'){return function (){element.attachEvent('on' + eventType, func);}}else{return function (){element['on' + eventType] = func;}}})();

用自执行函数的方法，函数定义在全局环境的话，当页面一经载入将针对该浏览器的实现方法赋给了addEventHandler函数，只是在第一次载入时耗费资源，将页面载入后，打印addEventHandler函数如下：

function (){element.addEventListener(eventType, func, false);
}

以上是惰性载入函数的实现方式，两种方式都可以避免执行不必要的代码。具体使用根据自己的需求而定。

JavaScript惰性载入函数相关推荐

【JavaScript】自定义函数
函数函数是一个可重用的代码块,用来完成某个特定功能.每当需要反复执行一段代码时,可以利用函数来避免重复书写相同代码. 函数包含着的代码只能在函数被调用时才会执行,就可以避免页面载入时执行该脚本在J ...
浅析 JavaScript 中的函数 uncurrying 反柯里化
柯里化柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...
如何用JavaScript的回调函数做出承诺
by Adham El Banhawy 由Adham El Banhawy 如何用JavaScript的回调函数做出承诺 (How to make a Promise out of a Callbac ...
javascript的匿名函数
古人有"授之以鱼,不如授之以渔" ,没有老师,就只能自己学"渔"了.还是从简单的开始吧! 下面的这几句代码是最熟悉不过的了,但是你知道为什么这么写吗?为什么在页 ...
JavaScript与Java函数的比较
JavaScript与Java函数的比较学习了两天的JavaScript,会觉得这是一门和Java类似但又有很大不同的语言.很想将这种感受写下来并举例做一些分享. 函数成为了对象? 你很难想到,在学 ...
Javascript中的函数重载-最佳做法
用JavaScript伪造函数重载的最佳方法是什么? 我知道不可能像其他语言一样重载Javascript中的函数. 如果我需要两个函数一起使用foo(x)和foo(x,y,z) ,这是最佳/首选方式: ...
JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
彻底理解JavaScript中回调函数（推荐）
在javascript中回调函数非常重要,它们几乎无处不在.像其他更加传统的编程语言都有回调函数概念,但是非常奇怪的是,完完整整谈论回调函数的在线教程比较少,倒是有一堆关于call()和apply() ...
JavaScript中Exists函数
JavaScript中Exists函数是如果 Dictionary 对象中存在所指定的主键则返回 true,否则返回 false.使用方法: object.Exists(key) 其中object是必 ...

JavaScript惰性载入函数

JavaScript惰性载入函数相关推荐

最新文章

热门文章