functions.js第1行出现Uncaught SyntaxError，拆分JS代码后功能失效

嘿，这个问题我之前也碰到过！你遇到的报错根源其实很明确：原本在HTML里的JS代码依赖后端模板引擎（比如Django）来渲染{{ labels|tojson|safe }}这个变量，但把代码移到单独的functions.js文件后，服务器不会对JS文件做模板解析，浏览器拿到的就是原始的{{ labels|tojson|safe }}字符串，JS引擎完全不认识这种语法，所以直接在第1行抛出了Unexpected token {的错误。

问题拆解 #

原来的代码里，var labels = {{ labels|tojson|safe }};这一行是靠后端把模板标签替换成真实的JSON数据后，才变成合法的JS代码的。但单独的JS文件不会经过后端模板渲染，所以这行代码在浏览器眼里就是无效的语法，自然报错。

几种可行的解决方案 #

方案1：把模板变量注入全局作用域

在你的HTML文件里，先通过模板语法把数据放到全局变量中，再引入functions.js：

<!-- 先在HTML里定义全局变量 -->
<script>
// 把后端数据挂载到window对象上，让JS文件能访问到
window.labelsData = {{ labels|tojson|safe }};
</script>
<!-- 再引入你的functions.js -->
<script src="functions.js"></script>

然后修改functions.js的第一行：

var labels = window.labelsData;
// 剩下的代码完全不变
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var drawLabels = function(id, xMin, xMax, yMin, yMax) {
  ctx.strokeStyle = "red";
  ctx.fillStyle = "red";
  ctx.rect(xMin, yMin, xMax - xMin, yMax - yMin);
  ctx.lineWidth="3";
  ctx.stroke();
  ctx.font = "10px Arial";
  ctx.fillText("id: " + id, xMin,yMin);
};
function redraw() {
  ctx.canvas.width = image.width;
  ctx.canvas.height = image.height;
  c.width = image.width;
  c.height = image.height;
  ctx.drawImage(image, 0, 0);
  for (i = 0; i < labels.length; i++){
    drawLabels(labels[i].id, labels[i].xMin, labels[i].xMax, labels[i].yMin, labels[i].yMax);
  }
}

方案2：用HTML元素的data属性传递数据

在HTML里加一个隐藏的元素，把数据存在它的data属性里：

<!-- 隐藏元素用来存储数据 -->
<div id="labels-container" style="display: none;" data-labels="{{ labels|tojson|safe }}"></div>

然后在functions.js里读取并解析这个数据：

// 从HTML元素的data属性中获取数据并解析成JSON
var labelsContainer = document.getElementById('labels-container');
var labels = JSON.parse(labelsContainer.dataset.labels);
// 后续代码保持不变
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
// ... 你的绘图函数和redraw函数

方案3：通过AJAX请求获取数据

如果你的后端能提供API接口，也可以在JS文件里主动请求数据：

// 使用fetch API请求后端数据
fetch('/your-api-endpoint/labels') // 替换成你的实际接口地址
  .then(response => response.json())
  .then(labels => {
    // 拿到数据后再执行绘图逻辑
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    
    var drawLabels = function(id, xMin, xMax, yMin, yMax) {
      ctx.strokeStyle = "red";
      ctx.fillStyle = "red";
      ctx.rect(xMin, yMin, xMax - xMin, yMax - yMin);
      ctx.lineWidth="3";
      ctx.stroke();
      ctx.font = "10px Arial";
      ctx.fillText("id: " + id, xMin,yMin);
    };
    
    function redraw() {
      ctx.canvas.width = image.width;
      ctx.canvas.height = image.height;
      c.width = image.width;
      c.height = image.height;
      ctx.drawImage(image, 0, 0);
      for (i = 0; i < labels.length; i++){
        drawLabels(labels[i].id, labels[i].xMin, labels[i].xMax, labels[i].yMin, labels[i].yMax);
      }
    }

    // 记得调用redraw或者绑定相关触发事件
  })
  .catch(err => console.error('加载标签数据失败:', err));

这个方案适合数据需要动态更新或者数据量较大的场景，但需要后端配合提供接口。

验证修改 #

改完之后，刷新页面看看控制台有没有报错，再确认labels变量是否正确拿到了数据，这样你的绘图功能应该就能正常运行啦！

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