理解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 相关文章推荐
URL地址中的#符号使用说明
Feb 12 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
微信小程序 标签传入数据
May 08 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
原生JS运动实现轮播图
Jan 02 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开发工具之vs2005图解
2008/01/12 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
PHP对象相关知识总结
2017/04/09 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
Python解析json文件相关知识学习
2016/03/01 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
超市重阳节活动方案
2014/02/10 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
医生个人年终总结
2015/02/28 职场文书
求职简历自我评价范文
2015/03/10 职场文书
走进毛泽东观后感
2015/06/04 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS