谈谈 jQuery 的 $.getScript 的细节和原理

作者:vkvi 来源:ITPOW(原创) 日期:2020-6-19

jQuery 中有一个方法 getScript,它似乎可以动态加载脚本,示例如下:

$.getScript("itpow.js", function (){
	foo(); // foo() 是 itpow.js 中的一个方法
});

说明一、第一个参数的路径问题

可以相对路径,也可以绝对路径。但是如果是相对路径,那么它是相对于当前 HTML 文件的路径,而不是相对于 JS 文件的路径。

说明二、跨域问题

这个 getScript 实际上就是 $.ajax,指定参数 dataType 为 "script",实际上还是 Ajax 加载。

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

那么,是否存在跨域问题呢?jQuery 1.2 以前的确是存在,但是 jQuery 1.2 及以后,就不存在了。

说明三、外部可以使用动态加载的 JS 中的方法吗?

由于是 Ajax,所以它并没有创建 script 标签,所以出了回调方法,我们可以使用动态加载的 JS 中的方法吗?

答案是可以的。

$(window).ready(function (){
	$.getScript("itpow.js", function (){
		foo(); // foo() 是 itpow.js 中的一个方法
		setTimeout(foo, 3000); // YES
	});

	setTimeout(foo, 3000); // NO
	setTimeout(function () { // YES
		foo();
	}, 3000);
});

在上述代码中,有 3 个 setTimeout,其中有一个注释为 NO 的不能执行,因为它过早地告诉浏览器有个 foo,虽然 JavaScript 是解释型语言,虽然要 3 秒后才执行,但是由于它在“根”下面,浏览器首次“过”脚本的时候,遇到它要出错。

相关文章