【前端】jQuery动态加载JS文件方法

在jQuery中动态加载多个JS文件，可以通过以下两种常用方法实现。以下代码均考虑了加载顺序控制和加载完成回调：

---

方法一：递归顺序加载（确保顺序）

function loadScriptsSequentially(scripts, callback) {
    var index = 0;
    
    function loadNext() {
        if (index >= scripts.length) {
            if (typeof callback === 'function') callback();
            return;
        }
        
        $.getScript(scripts[index])
            .done(function() {
                console.log("Loaded: " + scripts[index]);
                index++;
                loadNext(); // 加载下一个
            })
            .fail(function() {
                console.error("Failed: " + scripts[index]);
                index++;
                loadNext(); // 即使失败也继续加载后续文件
            });
    }
    
    loadNext(); // 开始加载
}

// 使用示例
var scripts = [
    "https://cdn.example.com/lib1.js",
    "https://cdn.example.com/lib2.js",
    "https://cdn.example.com/app.js"
];

loadScriptsSequentially(scripts, function() {
    console.log("所有脚本加载完成！");
    // 在这里执行依赖这些脚本的代码
});

---

方法二：并行加载 + 顺序执行（推荐）

function loadScriptsParallel(scripts, callback) {
    var deferreds = [];
    
    // 1. 并行加载所有脚本
    $.each(scripts, function(i, src) {
        deferreds.push(
            $.ajax({
                url: src,
                dataType: "script",
                cache: true // 利用浏览器缓存
            })
        );
    });
    
    // 2. 等待所有加载完成
    $.when.apply($, deferreds)
        .done(function() {
            if (typeof callback === 'function') callback();
        })
        .fail(function(jqXHR) {
            console.error("脚本加载失败: ", jqXHR.url);
        });
}

// 使用示例（同上）
loadScriptsParallel(scripts, function() {
    console.log("所有脚本已加载完成！");
});

---

关键说明：

1. 顺序问题：
   • 方法一确保加载顺序（适合有依赖的脚本）
   • 方法二并行加载更快（适合独立脚本）
2. 错误处理：
   • 方法一：单个失败后继续加载后续文件
   • 方法二：任意失败会触发.fail()，但其他脚本仍会加载
3. 缓存控制：
   • cache: true 允许浏览器缓存（默认行为）
   • 禁用缓存可加参数：cache: false

---

增强版：带超时控制

// 在$.ajax参数中添加超时设置
$.ajax({
    url: src,
    dataType: "script",
    timeout: 5000, // 5秒超时
    cache: true
});

---

注意事项：

• 同源限制：跨域脚本需目标服务器支持CORS
• 执行顺序：并行加载时浏览器按响应顺序执行，而非数组顺序
• jQuery版本：需jQuery 1.5+（支持Deferred）

根据需求选择合适方案，通常推荐方法二（并行加载）以获得更好性能。