在js文件中调用另外一个js 加载顺序

在js文件中调用另外一个js 加载顺序

作者:myadmin |  时间:2014-07-04 |  浏览:3316 |  0 条评论

在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文件了。哈哈~~

在js文件中调用另外一个js 加载顺序

标签:

相关推荐
更多

发表评论