如何让页面内联script在外部framework.js加载完成后再执行

报错根因 #

1. 语法错误：value?是TypeScript的可选参数语法，原生JavaScript不支持，导致framework.js执行中断，Framework全局对象未挂载。
2. 执行顺序错误：
   • 原代码先执行DOM遍历逻辑，此时body未解析、fStore未初始化，既找不到f-text属性的元素，也会触发未定义报错。
   • 全局Framework对象定义在DOM遍历逻辑之后，即使没有语法错误，执行顺序也不符合预期。
3. 全局状态池未初始化：window.fStore没有赋初始空数组，首次存入状态时解构会报错。

修复步骤 #

1. 修改 framework.js 代码 #

// 初始化全局状态池
window.fStore = []

// 优先挂载全局Framework对象，保证内联脚本可以直接调用
window.Framework = {
  store: (key, value) => {
    if (!value) {
      const foundKey = window.fStore.find(x => x.key === key);
      return foundKey ? foundKey.value : undefined;
    }
    window.fStore = [...window.fStore, { key, value }];
  }
}

// 监听DOM加载完成事件，此时所有元素和内联脚本都已执行完成，再处理指令渲染
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[f-text]').forEach(element => {
    const textKey = element.getAttribute('f-text');
    const matched = window.fStore.find(x => x.key === textKey);
    if (matched) element.textContent = matched.value;
  });
})

2. index.html 无需额外修改 #

当前你把framework.js放在head中用同步方式加载，会阻塞HTML解析，执行完成后才会解析body内容，所以body中的内联<script>执行时，Framework已经挂载到全局，不会出现未定义报错。

可选优化：如果后续给framework.js加了async/defer属性 #

如果为了性能给框架脚本加了异步加载属性，需要调整内联脚本的执行逻辑，监听框架加载完成的自定义事件即可：

• framework.js末尾加一行触发自定义事件：document.dispatchEvent(new Event('FrameworkLoaded'))
• 内联脚本改成监听事件后执行：

<script>
document.addEventListener('FrameworkLoaded', () => {
  Framework.store('name', 'Joe');
})
</script>

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