怎么监听异步加载 js

要监听异步加载的JS，可以使用以下方法：通过Promise、MutationObserver、事件监听器。其中，使用MutationObserver是一个较为高级且有效的方法。MutationObserver可以监控DOM树的变化，从而检测到异步加载的JS文件。下面将详细展开这一点。

一、使用Promise

Promise是一种异步编程解决方案，可以有效地监听异步加载的JS文件。通过创建一个Promise对象，可以在JS文件加载完成时触发相应的回调函数。

function loadScript(src) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.onload = () => resolve(script);
        script.onerror = () => reject(new Error(`Script load error for ${src}`));
        document.head.append(script);
    });
}
loadScript('path/to/your/script.js').then(
    script => console.log(`${script.src} is loaded!`),
    error => console.log(`Error: ${error.message}`)
);

在这个示例中，通过loadScript函数加载JS文件，并在加载成功或失败时分别触发回调函数。

二、使用MutationObserver

MutationObserver是一种高效的监听DOM变化的方法。它可以监控DOM树的变化，并在检测到新的JS文件插入时触发回调函数。

1、创建MutationObserver实例

首先，需要创建一个MutationObserver实例，并指定一个回调函数，该函数将在DOM发生变化时被调用。

const observer = new MutationObserver((mutationsList, observer) => {
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(node => {
                if (node.tagName === 'SCRIPT') {
                    console.log(`Script loaded: ${node.src}`);
                }
            });
        }
    }
});

2、配置观察选项

接下来，配置观察选项，指定要观察的DOM节点及变化类型。

const config = { childList: true, subtree: true };

3、开始观察

最后，调用observe方法，开始观察指定的DOM节点。

observer.observe(document.head, config);

4、完整示例

const observer = new MutationObserver((mutationsList, observer) => {
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(node => {
                if (node.tagName === 'SCRIPT') {
                    console.log(`Script loaded: ${node.src}`);
                }
            });
        }
    }
});
const config = { childList: true, subtree: true };
observer.observe(document.head, config);

这个示例中，当新的JS文件被插入到DOM中时，回调函数会被触发，并输出该JS文件的URL。

三、使用事件监听器

在某些情况下，可以通过事件监听器来检测JS文件的加载情况。常见的事件监听器包括load和error事件。

1、监听单个JS文件的加载

可以为单个JS文件添加事件监听器，以便在其加载完成时执行相应的操作。

const script = document.createElement('script');
script.src = 'path/to/your/script.js';
script.onload = () => console.log('Script loaded successfully');
script.onerror = () => console.log('Script failed to load');
document.head.append(script);

2、监听多个JS文件的加载

对于需要加载多个JS文件的情况，可以为每个JS文件添加事件监听器，并在所有JS文件加载完成后执行相应的操作。

const scripts = ['script1.js', 'script2.js', 'script3.js'];
let loadedScripts = 0;
scripts.forEach(src => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => {
        loadedScripts++;
        if (loadedScripts === scripts.length) {
            console.log('All scripts loaded successfully');
        }
    };
    script.onerror = () => console.log(`Failed to load script: ${src}`);
    document.head.append(script);
});

在这个示例中，使用一个计数器loadedScripts来跟踪已加载的JS文件数量，并在所有JS文件加载完成后触发回调函数。

四、结合多种方法

在实际应用中，可以结合多种方法来监听异步加载的JS文件。例如，可以同时使用Promise和MutationObserver，以确保在各种情况下都能检测到JS文件的加载。

1、结合Promise和MutationObserver

function loadScript(src) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.onload = () => resolve(script);
        script.onerror = () => reject(new Error(`Script load error for ${src}`));
        document.head.append(script);
    });
}
const observer = new MutationObserver((mutationsList, observer) => {
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(node => {
                if (node.tagName === 'SCRIPT') {
                    console.log(`Script loaded: ${node.src}`);
                }
            });
        }
    }
});
const config = { childList: true, subtree: true };
observer.observe(document.head, config);
loadScript('path/to/your/script.js').then(
    script => console.log(`${script.src} is loaded!`),
    error => console.log(`Error: ${error.message}`)
);

在这个示例中，通过loadScript函数加载JS文件，并使用MutationObserver监控DOM变化，以确保在各种情况下都能检测到JS文件的加载。

五、实际应用中的注意事项

1、处理错误

在实际应用中，可能会遇到JS文件加载失败的情况。因此，在监听异步加载的JS文件时，需要处理错误。可以通过Promise的catch方法或事件监听器的error事件来处理错误。

loadScript('path/to/your/script.js')
    .then(script => console.log(`${script.src} is loaded!`))
    .catch(error => console.log(`Error: ${error.message}`));

2、兼容性问题

不同浏览器对MutationObserver和Promise的支持情况不同。在使用这些方法时，需要考虑浏览器兼容性问题。可以使用Polyfill来提供对旧版浏览器的支持。

3、性能优化

在实际应用中，频繁监控DOM变化可能会影响页面性能。因此，需要在合理的范围内使用MutationObserver，避免性能问题。

const observer = new MutationObserver((mutationsList, observer) => {
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(node => {
                if (node.tagName === 'SCRIPT') {
                    console.log(`Script loaded: ${node.src}`);
                }
            });
        }
    }
});
const config = { childList: true, subtree: true };
observer.observe(document.head, config);
// 在必要时停止观察
// observer.disconnect();

在这个示例中，可以在必要时调用disconnect方法停止观察，从而避免性能问题。

六、推荐的项目管理系统

在实际项目中，管理和跟踪JS文件的加载情况是项目管理的一部分。为了更好地管理项目，可以使用专业的项目管理系统。推荐以下两个系统：

1、研发项目管理系统PingCode

PingCode是一个强大的研发项目管理系统，提供了丰富的功能来管理项目进度、任务分配和团队协作。通过PingCode，可以更好地跟踪和管理JS文件的加载情况，提高项目效率。

2、通用项目协作软件Worktile

Worktile是一个通用的项目协作软件，适用于各种类型的项目管理。通过Worktile，可以轻松管理任务、团队协作和项目进度。在管理JS文件加载情况时，Worktile提供了便捷的工具和功能。

总结

监听异步加载的JS文件是一个常见的需求，可以通过Promise、MutationObserver和事件监听器来实现。在实际应用中，可以结合多种方法，并注意处理错误、兼容性问题和性能优化。为了更好地管理项目，推荐使用PingCode和Worktile这两个项目管理系统。