怎么判断js脚本加载完成了

如何判断JS脚本加载完成了：使用回调函数、监听load事件、使用Promise和async/await。

在前端开发中，判断JavaScript脚本是否加载完成至关重要，确保代码执行的顺序和依赖关系。使用回调函数是一种常见方法，确保在脚本加载完成后执行特定代码。下面详细描述如何使用回调函数：

回调函数是一种将函数作为参数传递给另一个函数的技术。在加载外部JS脚本时，可以将回调函数传递给加载函数，这样一旦脚本加载完成，回调函数就会被调用。

例如：

function loadScript(url, callback) {
    let script = document.createElement("script");
    script.type = "text/javascript";
    if (script.readyState) {  // 仅适用于IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  // 适用于其他浏览器
        script.onload = function () {
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

通过这种方式，可以确保在外部脚本加载完成后执行回调函数中的代码。

一、使用回调函数

回调函数是判断JavaScript脚本加载完成的经典方法之一。在处理异步操作时，回调函数是最常用的工具。

回调函数的基本原理

在JavaScript中，回调函数是指将一个函数作为参数传递给另一个函数，并在适当的时候调用它。通过这种方式，可以确保在某个操作完成后执行特定的代码。

实现加载脚本的回调函数

以下是一个使用回调函数加载外部脚本的示例：

function loadScript(url, callback) {
    let script = document.createElement("script");
    script.type = "text/javascript";
    if (script.readyState) {  // 仅适用于IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  // 适用于其他浏览器
        script.onload = function () {
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
// 使用示例
loadScript("https://example.com/script.js", function() {
    console.log("脚本加载完成");
    // 在这里执行依赖于脚本的代码
});

在这个示例中，我们创建了一个loadScript函数，该函数接受两个参数：要加载的脚本的URL和加载完成后的回调函数。通过检查脚本的加载状态，可以在脚本加载完成后调用回调函数。

二、监听load事件

除了使用回调函数，监听脚本元素的load事件也是一种判断脚本加载完成的方法。该方法适用于现代浏览器，并且代码更为简洁。

监听load事件的基本原理

在HTML文档中，<script>元素有一个load事件，当脚本加载完成时会触发该事件。通过监听这个事件，可以在脚本加载完成后执行特定代码。

实现监听load事件

以下是一个使用load事件监听脚本加载完成的示例：

function loadScript(url) {
    return new Promise((resolve, reject) => {
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.onload = () => {
            resolve();
        };
        script.onerror = () => {
            reject(new Error(`Script load error for ${url}`));
        };
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    });
}
// 使用示例
loadScript("https://example.com/script.js")
    .then(() => {
        console.log("脚本加载完成");
        // 在这里执行依赖于脚本的代码
    })
    .catch((error) => {
        console.error(error);
    });

在这个示例中，我们创建了一个loadScript函数，该函数返回一个Promise对象。通过监听script元素的load事件，可以在脚本加载完成时解析Promise，从而执行后续代码。

三、使用Promise和async/await

Promise和async/await是现代JavaScript中处理异步操作的强大工具。通过结合使用Promise和async/await，可以编写更为简洁和可读的代码。

Promise的基本原理

Promise是一个表示异步操作最终完成或失败的对象。通过使用Promise，可以将异步操作的结果传递给回调函数，从而实现更为灵活的异步操作处理。

实现基于Promise的脚本加载

以下是一个使用Promise加载外部脚本的示例：

function loadScript(url) {
    return new Promise((resolve, reject) => {
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.onload = () => {
            resolve();
        };
        script.onerror = () => {
            reject(new Error(`Script load error for ${url}`));
        };
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    });
}
// 使用示例
loadScript("https://example.com/script.js")
    .then(() => {
        console.log("脚本加载完成");
        // 在这里执行依赖于脚本的代码
    })
    .catch((error) => {
        console.error(error);
    });

使用async/await简化代码

通过结合使用async/await，可以进一步简化代码，使其更为直观和易读。

async function loadScriptAsync(url) {
    await loadScript(url);
    console.log("脚本加载完成");
    // 在这里执行依赖于脚本的代码
}
// 使用示例
loadScriptAsync("https://example.com/script.js")
    .catch((error) => {
        console.error(error);
    });

在这个示例中，我们创建了一个loadScriptAsync函数，并使用await关键字等待loadScript函数的执行结果。通过这种方式，可以更为简洁地处理异步操作。

四、使用模块化加载工具

随着前端开发技术的不断发展，模块化加载工具（如Webpack、RequireJS等）成为了管理和加载JavaScript模块的主流工具。这些工具可以帮助我们更好地管理依赖关系，确保脚本按正确的顺序加载。

Webpack

Webpack是一个强大的模块打包工具，可以将项目中的各种资源（JavaScript、CSS、图片等）打包成一个或多个文件。通过配置Webpack，可以轻松管理脚本的加载顺序和依赖关系。

使用Webpack加载脚本

以下是一个简单的Webpack配置示例：

// webpack.config.js
const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

在这个示例中，我们配置了Webpack，将src/index.js作为入口文件，并将打包后的文件输出到dist目录中。通过这种方式，可以轻松管理项目中的脚本和依赖关系。

RequireJS

RequireJS是一个JavaScript文件和模块加载器，可以帮助我们按需加载脚本和模块。通过使用RequireJS，可以更好地管理脚本的加载顺序和依赖关系。

使用RequireJS加载脚本

以下是一个使用RequireJS加载脚本的示例：

// main.js
require.config({
    paths: {
        "jquery": "https://code.jquery.com/jquery-3.6.0.min"
    }
});
require(["jquery"], function($) {
    console.log("jQuery加载完成");
    // 在这里执行依赖于jQuery的代码
});

在这个示例中，我们使用RequireJS配置了jQuery的路径，并在加载完成后执行依赖于jQuery的代码。通过这种方式，可以更好地管理脚本的加载顺序和依赖关系。

五、使用现代JavaScript模块（ES6 Modules）

现代JavaScript提供了原生的模块支持（ES6 Modules），可以帮助我们更好地管理脚本的加载顺序和依赖关系。通过使用ES6模块，可以更为简洁地编写和维护代码。

ES6模块的基本原理

ES6模块通过import和export关键字实现模块的引入和导出。通过这种方式，可以将代码拆分成多个模块，并按需加载。

使用ES6模块加载脚本

以下是一个使用ES6模块加载脚本的示例：

// module.js
export function hello() {
    console.log("Hello, ES6 Modules!");
}
// main.js
import { hello } from './module.js';
hello();

在这个示例中，我们创建了一个module.js文件，并导出了一个hello函数。在main.js文件中，我们使用import关键字引入了hello函数并调用它。通过这种方式，可以更为简洁地管理脚本的加载顺序和依赖关系。

六、项目管理系统的推荐

在团队协作开发中，使用项目管理系统可以帮助团队更好地管理任务和进度。以下是两个推荐的项目管理系统：

研发项目管理系统PingCode

PingCode是一款专业的研发项目管理系统，适用于敏捷开发和研发团队的协作。通过PingCode，可以轻松管理任务、缺陷、需求等研发过程中的各个环节，提高团队的工作效率。

通用项目协作软件Worktile

Worktile是一款通用的项目协作软件，适用于各种类型的团队和项目管理。通过Worktile，可以管理任务、日程、文档等，提高团队的协作效率和项目的执行力。

总结：通过结合使用回调函数、监听load事件、Promise和async/await、模块化加载工具以及现代JavaScript模块，可以有效判断和管理JavaScript脚本的加载顺序和依赖关系，确保代码的正确执行。同时，使用项目管理系统可以进一步提升团队的协作效率和项目管理能力。