如何在JavaScript中惰性载入函数

这期内容当中小编将会给大家带来有关如何在JavaScript中惰性载入函数，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

创新互联公司专业为企业提供上街网站建设、上街做网站、上街网站设计、上街网站制作等企业网站建设、网页设计与制作、上街企业网站模板建站服务，十年上街做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

定义

惰性载入函数表示函数执行的分支仅会发生一次，有两种实现惰性载入函数的方式，第一种是在函数被调用时再处理，在第一次调用中，该函数会覆盖为另外一个按合适方式执行的函数，这样任何对函数的调用都不用再经过执行的分支了。第二种实现惰性载入的方式是在声明函数时就制定适当的函数，这样，第一次调用函数时就不会损失性能了，而在代码首次加载时会损失一点儿性能。

功能

由于现在浏览器之间的差异，为了实现跨浏览器工作，很多函数要书写大量if语句或者try…catch…语句。当每次调用函数时，都要对每个if分支或try语句进行检查，这样会使得浏览器反应变慢。实际上，当我们用某个浏览器打开网页时，就决定了某个if分支或try语句是可用的，没有必要每次调用都检查。为了解决以上问题，JavaScript中出现一种名为惰性载入的技巧。

示例

载入方式一

var flag = 1;
function test1() { 
if(typeof flag === 'undefined') { 
test1 = function() {  
return 0; 
} 
} else if(flag === 1) { 
test1 = function() {  
return 1; 
} 
} else { 
test1 = function () {  
return -1; 
} 
} 
return test1();
}

这里if语句的每个分支都会为test1变量赋值，有效覆盖了原有的函数，最后一步便是调用新赋的函数，下一次调用test1()的时候就会直接调用被分配的函数，就不会再走if语句了，这样就可以提高性能。

载入方式二

var flag = 1;
var test2 = (function() { 
if(typeof flag === 'undefined') { 
return function() {  
return 0; 
} 
} else if(flag === 1) { 
 return function () {  
 return 1; 
 } 
 } else { 
 return function () {  
 return -1; 
 } 
 }
 })();

不同点是使用了立即执行函数，通过var来定义函数，在每个if分支中return一个函数。

优势

惰性载入函数有两个主要优点，第一是显而易见的效率问题，虽然在第一次执行的时候函数会意味赋值而执行的慢一些，但是后续的调用会因为避免的重复检测更快；第二个是要执行的适当代码只有当实际调用函数是才执行，很多JavaScript库在在加载的时候就根据浏览器不同而执行很多分支，把所有东西实现设置好，而惰性载入函数将计算延迟，不影响初始脚本的执行时间。

JavaScript有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

上述就是小编为大家分享的如何在JavaScript中惰性载入函数了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。