如何使用字符串测试JS库是否已加载

How to test if a JS library has loaded, using a string

本文关键字:是否 加载 JS 何使用 字符串 测试      更新时间:2023-09-26

我正在尝试编写一个简单的依赖加载程序,在对库进行测试以查看初始加载是否成功时遇到了问题。主要的障碍似乎是由于我将每个库的var名称存储为字符串。

var libraries = [
    {
        libvar: 'jQuery',
        cdn: '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js',
        fileName: 'jquery-2.1.4.min'
    }, {
        libvar: '_', // Underscore.js
        cdn: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js',
        fileName: 'underscore-1.8.3.min'
    }
];
var checkLoad = function(library) {
    if (!library || !library.fileName.length) return;
    document.addEventListener('DOMContentLoaded', function() {
        var thisLib = eval(library.libvar);
        if (!thisLib) {
            script = document.createElement('script');
            script.setAttribute('src', 'js/fallback/' + library.fileName + '.js');
            script.setAttribute('type', 'text/javascript');
            document.body.appendChild(script);
            console.warn(library.libvar + ' loaded via fallback', thisLib); // Testing
        } else {
            console.warn(library.libvar + ' is loaded!'); // Testing
        }
    });
};
for (var i = 0; libraries.length > i; i++) {
    document.write(unescape("%3Cscript src='" + libraries[i].cdn + "' type='text/javascript'%3E%3C/script%3E"));
    checkLoad(libraries[i]);
}

我得到的错误是:

未捕获引用错误:jQuery未定义

其中"jQuery"只是我手动断开的链接的eval(library.libvar)的名称。

如果脚本从cdn成功加载,则初始加载和测试工作正常。但是,如果我手动断开cdn链接,脚本会尝试回退,但会抛出一个js错误并停止。

我正在努力想办法写一个合适的测试,在不考虑错误和停止一切的情况下正确地失败。


根据dbrin的解决方案,固定的DOMContentLoaded函数如下所示:

document.addEventListener('DOMContentLoaded', function() {
    if (!window[library.libvar]) {
        var script = document.createElement('script');
        script.setAttribute('src', 'js/fallback/' + library.fileName + '.js');
        script.setAttribute('type', 'text/javascript');
        document.body.appendChild(script);
    }
});

下面是一个例子:

if(window['jQuery']) {
  // Hooray jQuery is loaded!
}
注意到库根对象(通常)是如何成为全局window对象的属性的,我建议您执行以下操作:
var thisLib = eval("window." + library.libvar);

这样if检查就不会失败。