Jquery动态加载js文件方法

Jquery动态加载js文件的三种方法，一般在偏小项目中抽象出来的模块化开发中适用：

一、$.getScript()

$.getScript() 是jquery封装的一个高级方法，和$.get()、$.post()类似，相当于如下ajax函数：

1
2
3
4
5
$.ajax({
    url: url,
    dataType: 'script',
    success: successFn
});

用法：

$.getScript(url, [callback]);

示例：

1
2
3
4
5
6
7
if(item === "js"){
    $.getScript('test.js',function(data,textstatus){
        console.log("JS loading is OK!");
    });
}else{
    console.log("JS loading is fail!");
}

二、利用script标签

直接上示例：

1
2
3
4
function importJS(path){
    var head = $('head');
    $("<script></script>").attr({src: file, type: "text/javascript", id: "loadjs"}).appendTo(head);
}

三、利用document.write()

貌似也是间接的利用script标签，个人还是比较喜欢第一种，直接上例子：
我们有第一个js文件test01.js

1
2
3
function testOne(){
    console.log("test01");
}

我们写第二个js文件test02.js

1
2
3
4
document.write("<script src='test01.js' type='text/javascript'></script>");
function testTwo(){
    console.log("test02");
}

我们只需要html页面中这样使用

1
2
3
4
5
<script type="text/javascript" src="test02.js"></script>
<script type="text/javascript">
    testOne();
    testTwo();
</script>

对$.getScript()补充

因为$.getScript()是封装ajax的异步处理，所以对该函数的几个坑点做补充。
1. 错误处理：
jquery 1.5开始，可以用.file()来处理错误：

1
2
3
4
5
$.getScript("test.js").done(function(data, textstatus){
    console.log(textstatus);
};).fail(function(jqxhr, settings, exception){
    console.log("Data exception！");
});

3. 缓存处理：
浏览器默认情况下会对请求频繁的文件进行缓存，但是$.getScript()函数在会在js文件的URL后面添加一个时间戳参数后缀，从而避免浏览器获取缓存的js文件。如果需要启用缓存，可以通过对全部ajax请求设置缓存默认置，也可以自己定义ajax方法。

1
2
3
$.ajaxSetup({
    cache: true
});

2. 文件函数变量调用：

1
2
3
4
5
6
$.getScript('test.js',function(data,textstatus){
    console.log("JS loading is OK!");
    testFn(); //成功调用
});

testFn();  //testFn is not defined!

因为$.getScript()是异步加载的，在你访问其中的某个变量或函数时，可能该js文件尚未完全加载完毕。建议你最好在success回调函数中处理，或者你能够确认此时该js文件已经加载完毕。