怎么判断所有js文件加载完成

判断所有JS文件加载完成的方法有多种，常见的包括使用“DOMContentLoaded”事件、使用“load”事件、利用Promise.all()结合动态加载脚本。其中，利用“DOMContentLoaded”事件是最为常用的一种方法，它能够确保在DOM树完成解析后，立即执行JavaScript代码，而不必等待样式表、图片等资源的加载完成。下面将详细描述如何使用“DOMContentLoaded”事件。

DOMContentLoaded事件

使用“DOMContentLoaded”事件是判断所有初始JS文件加载完成的常用方法。这个事件在HTML文档完全加载和解析完成之后触发，但不会等待样式表、图片和子框架的完全加载。这使得它非常适合用于在文档结构加载完成后立即执行JavaScript代码。

document.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
    // Your code to run after the DOM is fully loaded
});

一、利用“load”事件

“load”事件会在页面的所有资源，包括样式表、图片等，都加载完毕后触发。因此，如果你想确保所有资源完全加载后再执行JavaScript代码，可以使用“load”事件。

window.addEventListener('load', (event) => {
    console.log('All resources finished loading!');
    // Your code to run after all resources are loaded
});

这个方法虽然能确保所有资源都加载完毕，但通常会导致JavaScript代码执行延迟，影响用户体验，因此在实际开发中不常用。

二、使用Promise.all()结合动态加载脚本

对于动态加载的JavaScript文件，可以使用Promise.all()来判断所有文件是否加载完成。这种方法非常适合于模块化开发，特别是在需要按需加载多个JS文件时。

function loadScript(src) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.onload = () => resolve(src);
        script.onerror = () => reject(new Error(`Failed to load script ${src}`));
        document.head.append(script);
    });
}
const scripts = [
    'script1.js',
    'script2.js',
    'script3.js'
];
Promise.all(scripts.map(loadScript))
    .then(() => {
        console.log('All scripts loaded successfully');
        // Your code to run after all scripts are loaded
    })
    .catch((error) => {
        console.error(error);
    });

三、使用MutationObserver

在一些复杂的单页应用（SPA）中，可能需要监控DOM的变化来判断新的JS文件是否加载完成。此时，可以使用MutationObserver。

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.addedNodes.length) {
            mutation.addedNodes.forEach((node) => {
                if (node.tagName === 'SCRIPT') {
                    node.addEventListener('load', () => {
                        console.log(`Script ${node.src} loaded`);
                        // Your code to run after this script is loaded
                    });
                }
            });
        }
    });
});
observer.observe(document.head, { childList: true });

四、结合现代前端框架

在使用现代前端框架如React、Vue、Angular时，这些框架自带的生命周期钩子函数也可以帮助判断JS文件是否加载完成。例如，在React中，可以使用componentDidMount生命周期函数。

import React, { useEffect } from 'react';
function App() {
    useEffect(() => {
        console.log('Component mounted and all initial JS files are loaded');
        // Your code to run after component is mounted
    }, []);
    return (
        <div className="App">
            <h1>Hello World</h1>
        </div>
    );
}
export default App;

结论

在实际开发中，选择哪种方法取决于具体的需求和应用的复杂程度。对于大多数情况，使用“DOMContentLoaded”事件是最简洁和高效的选择，因为它能在DOM树解析完成后立即执行JavaScript代码，从而提高页面的响应速度和用户体验。然而，在某些特定情况下，可能需要结合“load”事件、Promise.all()、MutationObserver或框架自带的生命周期钩子来实现更复杂的逻辑判断。

在团队协作和项目管理中，使用合适的项目管理工具也是非常重要的。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们能够帮助团队更高效地管理任务和资源，从而确保项目顺利进行。

通过以上介绍，相信你已经能够掌握判断所有JS文件加载完成的多种方法，并能够根据不同场景选择合适的解决方案。