来自外部 js 文件的脚本问题

Question

我正在尝试将这部分 html 代码移动到 js 文件中，并在我的 html 中使用例如 onload 函数调用它，但它不起作用，我以前从未这样做过，我不明白它100%。我试图将下面的代码转换为外部文件中的函数并在 html 中调用它但它失败了，我想将它移动到 js 文件并创建几种不同类型的图表，它在 html 文件中看起来很糟糕......或者也许有人知道将一些有趣的图表放到我的 html 中的更好更简单的方法

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>

我必须将该部分包含到我的 js 文件中还是可以保留在 html 头中？？

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

感谢您的帮助

Answer 1

我假设您没有使用像 gulp 或 webpack 这样的构建工具，而只是将文件上传到静态文件服务器。

在这种情况下，您可以将第二个脚本标签内的部分移动到单独的文件中，例如mycharts.js。然后，您必须包含带有<script src="mycharts.js" defer></script> 标记的文件。留在第一个脚本标签中。

另见https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#external_javascript。

这种设置对于只需要一点 javascript 的简单网页就足够了。对于更复杂的页面，我建议您查看构建工具。