在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的影响
相关推荐
- windows下将MongoDB加入系统服务
- Posted on 05月08日
- mongoDB常用操作命令 终端常用操作命令
- Posted on 07月15日
- Linux系统自带logtotate 实现日志切分
- Posted on 08月21日
- 在js文件中调用另外一个js 加载顺序
- Posted on 07月04日