理解Javascript文件动态加载


Posted in Javascript onJanuary 29, 2016

Javascript文件动态加载一直是比较困扰的一件事情,像网络上传的比较常见的做法:

function loadjs(fileurl){
 var sct = document.createElement("script");
 sct.src = fileurl;
 document.head.appendChild(sct);
}

然后我们来测试一下结果:

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>
    function loadjs(fileurl){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     document.head.appendChild(sct);
    }
    loadjs("http://code.jquery.com/jquery-1.12.0.js");
    loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")
    
    loadjs("http://bootboxjs.com/bootbox.js")
    </script>
  </body>
</html>

代码加载完后,会出现下图的错误:

理解Javascript文件动态加载

jquery明明是加载在第一个处理,为什么还是报jQuery不存在的对象呢?

因为这样加载,相当于开启了三个线程,只是jquery这个文件先启动线程,而jquery执行完这个线程的时间,超过了后面两个时间. 因此后面执行完的,可能没能找到jquery这个对象。

然这种方式怎么处理呢?

其实文件的加载是有个状态处理的.文件的加载有个onload事件,就是可以监听文件是否加载完成的事件.

因此我们可以考虑这个方法来处理我们想要的结果.我们用直观的方式来处理.改进后的代码如下:

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>
    
    function loadjs(fileurl, fn){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     if(fn){
      sct.onload = fn;
     }
     document.head.appendChild(sct);
    }


    loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
     loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
        loadjs("http://bootboxjs.com/bootbox.js")
     })
    });
      
    
    </script>
  </body>
</html>

OK,执行完这个代码之后,加载文件都是在前一个加载完成后,才会加载另外一个,这样就不会造成找不到用到的对象了.

然后我们来执行一个弹出框的效果,代码里面使用了 Bootbox.js 插件. 加载代码如下:

loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
  loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
       loadjs("http://bootboxjs.com/bootbox.js",function(){
          bootbox.alert("Hello world!", function() {
           Example.show("Hello world callback");
          });
       })
   })
 });

刷新页面,就会直接显示弹出框:

理解Javascript文件动态加载

动态加载的代码,往往容易在这里花费很多时间调试.大家最好的办法就是写一个最简单的例子,理解其中的原因. 这里的代码都可以进行封装,还可以加入CSS文件的加载.作为自己的插件使用。

Javascript 相关文章推荐
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 #Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 #Javascript
Angularjs中UI Router全攻略
Jan 29 #Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 #Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 #Javascript
JavaScript数据结构与算法之链表
Jan 29 #Javascript
动态创建按钮的JavaScript代码
Jan 29 #Javascript
You might like
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
php命令行模式代码实例详解
2021/02/26 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
简单三步,搞掂内存泄漏
2007/03/10 Javascript
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
node.js入门教程
2014/06/01 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
python文本数据处理学习笔记详解
2019/06/17 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Python如何实现的二分查找算法
2020/05/27 Python
python MD5加密的示例
2020/10/19 Python
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
大学生入党思想汇报
2014/01/14 职场文书
党校培训自我鉴定
2014/02/01 职场文书
大学生社会实践方案
2014/05/11 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
设备收款委托书范本
2014/10/02 职场文书
信访稳定工作汇报
2014/10/27 职场文书
2014年公务员工作总结
2014/11/18 职场文书
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技