为何JavaScript在<script>标签中可运行，放入外部.js文件却无法执行？

我帮你梳理了几个可能导致外部JS文件不生效的原因，你可以逐一排查：

1. 确保jQuery先于你的外部JS加载 #

你的代码用到了jQuery的$(document).ready()，所以必须让jQuery脚本先加载完成。一定要把jQuery的引入标签放在你的外部JS标签前面，比如：

<!-- 先加载jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- 再加载你的外部JS -->
<script src="http://website.com/download/others/wiredtriangle.js" type="text/javascript"></script>

如果顺序反了，$会被识别为未定义，ready函数自然无法生效。

2. 把所有依赖DOM的代码完整包裹进ready函数 #

要确保你的业务逻辑（比如获取DOM元素、初始化绘图等）全部放在$(document).ready()内部，比如：

$(document).ready(function() {
  // 这里放所有代码，包括函数定义和调用
  function drawTriangle() {
    const canvas = document.getElementById('triangleCanvas');
    if (!canvas) return; // 先判断元素是否存在
    const ctx = canvas.getContext('2d');
    // ...你的绘图逻辑
  }
  // 调用函数
  drawTriangle();
});

如果把函数定义或者执行逻辑放在ready外面，可能DOM还没加载完成就执行了，导致找不到目标元素，代码直接报错中断。

3. 检查外部JS文件的路径是否正确 #

打开浏览器开发者工具（按F12），切换到Console标签页，看看有没有404错误——如果有，说明你的src路径写错了，浏览器找不到这个外部文件。

• 如果是本地文件，建议用相对路径（比如./wiredtriangle.js），避免绝对路径的坑；
• 如果是线上文件，确认URL可以正常访问（直接在浏览器地址栏输入URL，看能不能下载到JS文件）。

4. 查看控制台的错误提示定位问题 #

很多时候代码不运行都是因为有语法错误或者DOM操作错误，打开Console标签页，红色的错误信息会告诉你具体哪里出问题：

• 如果提示$ is not defined：回到第一步，检查jQuery的加载顺序；
• 如果提示Cannot read property 'xxx' of null：说明你在DOM未加载时就尝试获取元素，回到第二步确认代码是否在ready函数内；
• 如果有语法错误：检查外部JS文件里的代码有没有拼写错误、缺少括号/分号等问题。

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