理解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 相关文章推荐
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
js实现上传图片到服务器
Apr 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新手NOTICE错误常见解决方法
2011/12/07 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
Bootstrap表单布局样式代码
2016/05/31 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
盘点提高 Python 代码效率的方法
2014/07/03 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
python 有效的括号的实现代码示例
2019/11/11 Python
python中必要的名词解释
2019/11/20 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
送货司机岗位职责
2013/12/11 职场文书
银行求职信个人范文
2013/12/16 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
职位证明模板
2015/06/23 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书