JS里如何动态加载其它JS并保持依赖关系

/** * 动态加载JS文件（支持顺序加载和依赖管理） * @param {Array} scripts - JS文件配置数组，每个元素包含url和deps属性 * @param {Function} callback - 所有文件加载完成后的回调函数 */ function loadScriptsWithDependencies(scripts, callback) { const loaded = new Set(); const loading = new Set(); let completed = 0; function canLoad(script) { // 检查依赖是否都已加载 if (!script.deps || script.deps.length === 0) { return true; } return script.deps.every(dep => loaded.has(dep)); } function loadScript(scriptConfig) { if (loaded.has(scriptConfig.url) || loading.has(scriptConfig.url)) { return; } if (!canLoad(scriptConfig)) { return; } loading.add(scriptConfig.url); const script = document.createElement('script'); script.type = 'text/javascript'; script.src = scriptConfig.url; script.onload = function () { loading.delete(scriptConfig.url); loaded.add(scriptConfig.url); completed++; checkAllLoaded(); }; script.onerror = function () { loading.delete(scriptConfig.url); completed++; checkAllLoaded(); }; document.head.appendChild(script); } function checkAllLoaded() { if (completed >= scripts.length) { if (typeof callback === 'function') { callback(); } return; } // 尝试加载所有未加载且满足依赖条件的脚本 scripts.forEach(script => { loadScript(script); }); } // 初始化加载 scripts.forEach(script => { loadScript(script); }); }

// 加载顺序：jquery.js → bootstrap.js → custom.js loadScriptsWithDependencies([ { url: '/js/jquery.js', deps: [] }, { url: '/js/bootstrap.js', deps: ['/js/jquery.js'] }, { url: '/js/custom.js', deps: ['/js/bootstrap.js'] } ], function() { console.log('所有脚本加载完成，可以开始使用了！'); });