这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要帮助大家理解 Javascript 文件动态加载,解决了 Javascript 文件动态加载时出现的错误,感兴趣的小伙伴们可以参考一下
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>
代码加载完后, 会出现下图的错误:
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");
- });
- })
- })
- });
刷新页面, 就会直接显示弹出框:
动态加载的代码, 往往容易在这里花费很多时间调试. 大家最好的办法就是写一个最简单的例子, 理解其中的原因. 这里的代码都可以进行封装, 还可以加入 CSS 文件的加载. 作为自己的插件使用。
来源: http://www.phperz.com/article/17/0407/267280.html