引入外部JavaScript文件与内嵌Script的差异及表格不显示问题排查

1. 检查JS执行时机 #

内嵌JS能正常运行，大概率是因为内嵌代码在DOM渲染完成后执行，而外部JS在DOM未加载时就运行了，导致无法获取目标DOM元素创建网格。

• 解决方案A：把引入外部JS的script标签移到</body>标签的前面，确保DOM先渲染完毕再执行JS代码：

<body>
  <!-- 页面内容 -->
  <script src="main.js"></script>
</body>

• 解决方案B：给script标签添加defer属性，让浏览器在DOM解析完成后再执行JS：

<head>
  <script src="main.js" defer></script>
</head>

• 解决方案C：在main.js里用DOM加载事件包裹网格创建代码，确保DOM就绪后再执行：

document.addEventListener('DOMContentLoaded', () => {
  // 你的网格生成逻辑代码全部放在这里
});

2. 验证JS文件路径是否正确 #

如果浏览器找不到main.js文件，自然不会执行网格生成代码：

• 打开浏览器开发者工具（按F12），切换到「Network」标签，刷新页面，查看main.js的请求状态：
  • 如果显示404错误，说明路径错误，修正路径：
    • 若main.js和index.html在同一目录，用<script src="./main.js"></script>
    • 若main.js在js子目录，用<script src="./js/main.js"></script>
• 检查文件名拼写，比如是否把main.js写成了Main.js（区分大小写的系统会报错）

3. 清除浏览器缓存 #

浏览器可能缓存了旧的main.js文件，导致新代码未生效：

• 按Ctrl+F5（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存
• 可以给JS文件添加版本号后缀，避免缓存问题：

<script src="main.js?v=20240520"></script>

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