在js文件中调用另外一个js 加载顺序
在写一个以js为入口的小插件(以a.js为例,以下称a.js)。无奈要引入jquery库,引入后要在a.js中调用jquery库中的内容。
如下在a.js第一行引入
document.write("<script type='text/javascript' src='./jquery-1.8.1.min.js'></script>"); $(document).ready(function(){ alert('我正在被执行!'); });
调用a.js的html代码如下
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <title>js文件加载顺序测试文件</title> <!-- <script type='text/javascript' src='./jquery-1.8.1.min.js'></script> --> <script type='text/javascript' src='./a.js'></script> <script type="text/javascript"> function clickme(){ var val = $('#my_link').html(); alert(val); } </script> </head> <body id="top"> <a id="my_link" href="javascript:clickme()">点我</a> </body> </html>
这两段代码自然没错。下面运行一下test.html 结果如下
加载完成test.html的时候报如下错误
Uncaught ReferenceError: $ is not defined
点击‘点我’按钮,能正常显示 alert对话框,里面的内容是 ‘点我’。
说明:
刚加载完成test.html后,报错 Uncaught ReferenceError: $ is not defined 说明jquery库没有加载进来。
页面加载完成后,点击按钮能正常显示alert中的内容,说明$对象可用,也就是说jquey库加载进来了。
由以上分析可见,a.js先加载完成了,然后再引入jquery库。当a.js加载完成后会自动调用ready()函数,但是此时jquery库
还没有加载进来,所以会报 Uncaught ReferenceError: $ is not defined 的错误。
而在页面中点击按钮的,根据html的加载顺序,此时js文件早已经加载完毕,所以点击按钮时会正常显示。
小结:
在js中,当a.js中要加载b.js时,要等a.js加载完成后,才会载入b.js。所以在a.js载入完成后不能立刻执行b.js中的任何代码,他们之间的相互调用,也要等b.js加载完成后才可以。
在以上相互引入js文件中,建议直接使用函数定义,避免使用变量赋值匿名函数,这样可以避免变量变量重复定义,函数失效。
以上遇到的问题如何解决呢?
1、其实很好解决,我们知道了这个特性,可以利用这个特性解决问题。将a.js中要运行的代码,封装到c.js中,然后在a.js中先引入jquery然后
再引入c.js 问题自然后解决
a.js
document.write("<script type='text/javascript' src='./jquery-1.8.1.min.js'></script>"); document.write("<script type='text/javascript' src='./c.js'></script>");
c.js
$(document).ready(function(){ alert('我正在被执行!'); });
保存运行,一切正常。哈哈~~~
2、这第二种方法,当然是把代码写到一个js文件了。哈哈~~
- 下一篇: linux双网卡配置内网
- 上一篇: html中alt和title的用法以及区别 对seo的影响
相关推荐
- linux双网卡配置-内网网卡通过外网网卡联网
- Posted on 07月09日
- js中arguments对象详解
- Posted on 05月09日
- 在js文件中调用另外一个js 加载顺序
- Posted on 07月04日
- linux查看cpu个数、核心数、进程数、内存大小、硬盘大小、网卡信息等信息
- Posted on 05月29日