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

Question

所以我有两个<script> 。

根据我的理解，我可以通过复制和粘贴代码将它们放置到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>标签不能同时具有'content'和src属性 ：

如果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文件的示例

Answer 3

您不能将它们放在一个文件中，因为<script async defer src="..."></script>不是实际的JS脚本，它只是通过src属性指向外部脚本文件。 在这种情况下，浏览器将下载此外部脚本并执行它。

如果要将此脚本移动到map.js文件，则必须下载它。 但是在这种情况下，您不应该这样做，因为《 Google地图条款》说：

没有缓存或存储。 您不会预取，缓存，编制索引或存储要在服务之外使用的任何内容，但您可能会存储有限数量的内容，其唯一目的是由于网络延迟（和并非出于阻止Google准确跟踪使用情况的目的），并且仅在以下情况下存储：

• 是临时的（决不超过30个日历日）；

• 是安全的；

• 不操纵或聚合内容或服务的任何部分；

• 并且不会以任何方式修改归因。