JavaScript惰性载入函数实例分析

 更新时间£º2019年03月27日 11:39:21   作者£ºJohnny丶me   我要评论

这篇文章主要介绍了JavaScript惰性载入函数,结合实例形式分析了JavaScript惰性载入函数的概念¡¢原理¡¢实现方法及相关操作注意事项,需要的朋友可以参考下

本文实例讲述了JavaScript惰性载入函数¡£分享给大家供大家参考£¬具体如下£º

惰性载入函数

惰性载入函数表示函数执行的分支仅会发生一次£¬有两种实现惰性载入函数的方式£¬第一?#36136;?#22312;函数被调用时再处理£¬在第一次调用中£¬该函数会覆盖为另外一个按合适方式执行的函数£¬这样任何对函数的调用都不用再经过执行的分支了¡£第二种实现惰性载入的方式是在声明函数?#26412;?#21046;定?#23454;?#30340;函数£¬这样£¬第一次调用函数?#26412;?#19981;会损失性能了£¬而在代码首次加载时会损失一点儿性能¡£

载入方式一

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常用函数技巧汇总¡·¡¢¡¶javascript面向对象入门教程¡·¡¢¡¶JavaScript错误与调试技巧总结¡·¡¢¡¶JavaScript数据结构与算法技巧总结¡·及¡¶JavaScript数学运算用法总结¡·

希望本文所述?#28304;?#23478;JavaScript程序设计有所帮助¡£

相关文章

  • cnblogs 代码高亮显示后的代码复制问题解决实现代码

    cnblogs 代码高亮显示后的代码复制问题解决实现代码

    cnblogs是比较有名的技术博客基地£¬很多技术达人都在里面发?#25216;?#26415;文章£¬ 不过由于代码不利于复制£¬因为页面里面有pre标签?#20219;?#39064;
    2011-12-12
  • Bootstrap整体框架之JavaScript插件架构

    Bootstrap整体框架之JavaScript插件架构

    这篇文章主要介绍了Bootstrap整体框架之JavaScript插件架构的相关资?#24076;?#20855;有一定的参?#25216;?#20540;£¬?#34892;?#36259;的小伙伴们可以参?#23478;?#19979;
    2016-12-12
  • js中document.referrer实现移动端返回上一页

    js中document.referrer实现移动端返回上一页

    本文主要介绍了document.referrer实现移动端返回上一页的方法£¬具有很好的参?#25216;?#20540;£¬下面跟着小编一起来看下吧
    2017-02-02
  • js DIV滚动条随机位置的设置技巧

    js DIV滚动条随机位置的设置技巧

    刚才一个朋友告诉我他的blog友情链接太多了£¬所以把所有链接放到一个DIV中£¬加了个滚动条£¬可是他又不想每次别人来看£¬看到的都是前面几个链接£¬于是问我有没有什么办法£¬想了一个£¬呵呵£¬正好有个办法
    2008-11-11
  • JS兼容所有浏览器的DOMContentLoaded事件

    JS兼容所有浏览器的DOMContentLoaded事件

    这篇文章主要介绍了JS兼容所有浏览器的DOMContentLoaded事件的相关资?#24076;?#26631;?#38388;?#35272;器中£¬使用DOMContentLoaded事件即可实现我们的要求£¬注册事件处理函数?#24067;?#20026;简单£¬?#34892;?#36259;的朋友一起学习吧
    2018-01-01
  • javascript 得到文件后缀名的思路及实现

    javascript 得到文件后缀名的思路及实现

    在上传文件时£¬常常要对文件的类型即对文件的后缀名进?#20449;ж希?#29992;javascript可以很容易的做到这一点¡£用Javascript解析一个带绝?#26376;?#24452;的文件名并得到后缀名的方法有很多种£¬这里列出一种£¬以供参考¡£
    2013-07-07
  • js 固定悬浮效果实现思路代码

    js 固定悬浮效果实现思路代码

    悬浮效果想必大家都不陌生吧£¬本文为大家介绍下使用js固定悬浮的实现思路及代码£¬?#34892;?#36259;的朋友可以参考下
    2013-08-08
  • JS+CSS实现Div弹出窗口同时背景变暗的方法

    JS+CSS实现Div弹出窗口同时背景变暗的方法

    这篇文章主要介绍了JS+CSS实现Div弹出窗口同时背景变暗的方法,是一款比?#31995;?#22411;的javascript操作弹出窗口的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 自己动手写的javascript前端等待控件

    自己动手写的javascript前端等待控件

    等待控件在网上搜有好多种£¬但是都很复杂£¬不一定用的顺手£¬再说我的项目是bootstrap的原因£¬又不敢轻易使用第三方控件£¬怕不兼容£¬于是自己动手写了个等待控件£¬有需要的朋友可以参考下
    2015-10-10
  • JavaScript 错误处理与调试经验总结

    JavaScript 错误处理与调试经验总结

    在Web开发过程中£¬编写JavaScript程序时或多或少会遇到各种各样的错误£¬有语法错误£¬逻辑错误¡£如果是一小段代码£¬可以通过仔细检查来排除错误£¬但如果程序稍微复杂点£¬调试JS便成为一个令Web开发者很头痛的问题¡£
    2010-08-08

最新评论

ÁÉÄþ35Ñ¡7¿ª½±½á¹û