理解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 相关文章推荐
js螺旋动画效果的具体实例
Nov 15 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
window.location.hash知识汇总
Nov 09 Javascript
Jquery 效果使用详解
Nov 23 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
详解angular中的作用域及继承
May 31 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
使用JS实现动态时钟
Mar 12 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 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通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
js中top的作用深入剖析
2014/03/04 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
Python中关于字符串对象的一些基础知识
2015/04/08 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
python解析xml简单示例
2019/06/21 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
python实现快递价格查询系统
2020/03/03 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
企业环保标语
2014/06/10 职场文书
新学期感想
2015/08/10 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
Python list去重且保持原顺序不变的方法
2021/04/03 Python
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python