无需修改所有页面，如何实现加载page_specific.js前获取后端数据？

我有一批结构基本一致的网页，都是按以下方式加载JavaScript文件：

<!-- page.html -->
<script src="js/common.js"></script>
<script src="js/page_specific.js"></script>

现在需要调整逻辑：在page_specific.js执行前，先从后端服务器加载部分数据。

目前我用的方案是：移除HTML中的page_specific.js脚本标签，在common.js里创建一个Promise（loadOptions），等获取到后端数据后再resolve；然后在每个page.html里写这段代码，等待Promise完成后动态加载脚本：

// Load the options first (in common.js) and then load page specific js.
loadOptions.then(() => {
    var js = document.createElement("script");
    js.onload = () => {
        page_specific.Init();
    }
    js.src = "js/page_specific.js";
    document.body.appendChild(js);
});

这个方案能正常运行，但需要修改每一个页面。想请教：

1. 有没有不用修改所有页面就能实现相同效果的方法（比如在common.js内搞定）？
2. 如果没有，当前方案存在哪些弊端？

补充说明：每个页面还有一个从HTML中调用的专属初始化函数，函数名称各不相同，上述代码已经通过onload处理了调用逻辑。

一、无需修改所有页面的实现方法 #

可以在common.js中拦截页面中已有的page_specific.js脚本标签，延迟到后端数据加载完成后再执行，全程不用修改页面HTML：

具体实现步骤 #

1. 在common.js中先定义获取后端数据的Promise：

// common.js
// 替换成你的实际后端请求逻辑
const loadOptions = fetch('/api/required-data')
    .then(res => {
        if (!res.ok) throw new Error('数据加载失败');
        return res.json();
    });

2. 捕获页面中所有的page_specific.js脚本标签，记录它们的地址和对应的初始化函数，然后移除原标签避免自动加载：

// common.js 续
// 筛选出所有page_specific相关的脚本标签
const pageScripts = Array.from(document.querySelectorAll('script[src*="page_specific.js"]'));

// 记录每个脚本的信息：推荐给HTML里的script加data属性存初始化函数名，比如 <script src="js/page_specific.js" data-init="page_specific.Init"></script>
const scriptTasks = pageScripts.map(script => {
    const initFuncPath = script.dataset.init || '';
    const src = script.src;
    // 移除原标签，阻止浏览器默认加载执行
    script.remove();
    return { src, initFuncPath };
});

3. 等后端数据加载完成后，动态加载脚本并执行对应的初始化函数：

// common.js 续
loadOptions.then(() => {
    scriptTasks.forEach(task => {
        const script = document.createElement('script');
        script.onload = () => {
            // 执行初始化函数，支持命名空间格式（比如page_specific.Init）
            if (task.initFuncPath) {
                const funcSegments = task.initFuncPath.split('.');
                let func = window;
                funcSegments.forEach(seg => func = func[seg]);
                typeof func === 'function' && func();
            }
        };
        script.src = task.src;
        document.body.appendChild(script);
    });
}).catch(err => {
    console.error('后端数据加载失败，无法初始化页面:', err);
});

额外优化（可选） #

如果不想给每个页面的script标签加data-init属性，可以通过页面URL路径或**页面专属标识（比如body的id）**来映射对应的初始化函数，比如：

// 示例：根据页面URL判断初始化函数
const getInitFuncName = () => {
    const path = window.location.pathname;
    if (path.includes('/user')) return 'userPage.Init';
    if (path.includes('/order')) return 'orderPage.Init';
    // 其他页面的映射规则
};

// 在scriptTasks里替换成：
const initFuncPath = getInitFuncName();

二、当前方案的弊端 #

如果必须使用你当前的方案（每个页面都要修改），会存在以下问题：

• 维护成本高：页面数量多的时候，逐个修改容易漏改，后续新增页面也容易忘记添加这段代码，导致功能异常；
• 逻辑分散：页面的初始化逻辑拆分在HTML和common.js中，后期排查问题时需要跨文件查找，增加调试难度；
• 耦合性强：初始化函数名硬编码在HTML中，一旦函数名变更，需要同时修改对应的HTML代码，容易出现不一致的错误；
• 扩展性差：如果后续需要调整加载逻辑（比如新增加载前置条件），需要再次修改所有页面的代码，无法统一批量更新。

内容的提问来源于stack exchange，提问作者SimpleOne