Question

所以我有两个<script> s。

根据我的理解，我可以通过复制和粘贴代码将它们放入external.js文件中。

我正在创建Google API：

<script>
  function initMap() {
    var uluru = {
      lat: -25.363,
      lng: 131.044
    };
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

我基本上想将这两个文件移到名为map.js的文件中。我把第一个脚本移到了下面：

function initMap() {
  var uluru = {
    lat: -25.363,
    lng: 131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

并链接此新文件并将第二个脚本保留为HTML格式。它仍然奏效。但是，当我将第二个脚本移动到文件中时：

function initMap() {
  var uluru = {
    lat: -25.363,
    lng: 131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

  async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"

它不再起作用了。我做错了什么？

Answer 1

您可以合并以下格式的两个内嵌脚本：

<script>
  function one() {
    // Something
  }
</script>

<script>
  function two() {
    // Something
  }
</script>

分为：

<script>
  function one() {
    // Something
  }

  function two() {
    // Something
  }
</script>

然而，您的第二个脚本：

<script async defer src="https://maps.googleapis.com/maps/api/js..."></script>

脚本是引用，因此不能合并; <script>代码 cannot have both 'content' and an src attribute ：

如果script元素指定了src属性，则不应在其代码中嵌入脚本。

如果您真的想要合并这些脚本，则需要下载Google API的本地副本并自行托管代码 - 然后您可以将它们合并为一个.js你加载的文件。

但请注意，这不是首选，因为Google通过CDN上的副本进行托管，这意味着他们正在为文件添加额外的机制以使其加载速度更快。

只需将两个文件分开并同时包含两者 - 随着HTTP/2的出现，它实际上是有益的，就像这样分割文件。

Answer 2

<强>答案否

<强>原因一个是HTML调用，包含一个外部javascript文件，并且您通过API密钥以使其正常工作。

您正在做的是从Google下载javascript文件以在您的网站上使用，如果您要在地址栏中输入https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap并按Enter，您将看到javascript文件的示例包括

我可以将两个JavaScript脚本放到一个.js文件中吗？

2 个答案: