让我们制作可重用的Web组件：Google Maps

在使Web开发者前进的过程中，一项艰巨的努力是对Web组件缺乏完全的共识。

事实证明，到处都是框架，每个框架都有开销和自己的想法，一些通用的UI组件仍是从头开始开发的。

不过，这是可以预料的，因为框架迫使您进入其世界，所以当React或Vue组件可重用时，您必须提交该框架。 我们中有些人对承诺有疑问。

缩水了，但是他们通常什么都没解决。

有一个Web组件标准，其源于将HTML / JS / CSS组合在一起在概念上是令人不愉快的。

例如，我们可以按照其指南将Google Maps放在页面上。

<div id=”map”></div>

<script>
 function initMap() {
  // Create a map object and specify the DOM element for display.
  var map = new google.maps.Map(document.getElementById(‘map’), {
    center: {lat: -34.397, lng: 150.644}, zoom: 8
    });
 }
</script>
<script src=” https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap " async defer></script>

但是，这正是重点。 它在我们的页面上 ， 不在 我们的应用程序中 。

当然，这是在使用google.maps对象之前需要加载脚本的问题。 脚本标记应位于HTML之后。 不好

在我们可能需要页面上许多组件的世界中，我们将initMap用作入口点。 我们可能正在加载其他脚本等。变得混乱。

因此，让我们尝试另一种方法。 我们必须动态加载JS。

var e = document.createElement(‘script’)
e.src = s; 
document.body.appendChild(e)

为简单起见，我们将继续调用此函数加载。

const load = async (s) => {
  return new Promise(async r=>{
   for(i=0;i<document.scripts.length;i++)
     if(document.scripts[i].src == s) return r()
   let e = document.createElement('script')
   e.src = s 
   document.body.appendChild(e)
   e.onload = r
  })
}

脚本加载后即可实现此承诺。 它还首先检查脚本是否已经加载。

因此，现在我们可以使我们的可重用组件成为gmap函数：

const gmap = async (e) => {
  return new Promise(async r=>{
     e.style.height = e.style.width = e.getAttribute('size')
     let latlng = e.getAttribute('latlng').split(',')
     await load(' http://maps.googleapis.com/maps/api/js?v=3' )
     let map = new google.maps.Map(e, {
      center: new self.google.maps.LatLng(latlng[0], latlng[1]),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
     });
     r(map)
  })
}

这是一个异步功能，将等待加载脚本完成。 这将确保一切按顺序完成。 我们可能希望在一个页面上有多个地图。

<div control=gmap size=200px latlng=33.808678,-117.918921></div>
<div control=gmap size=200px latlng=28.3852377,-81.5660627></div>

并将Divs馈送到gmap“组件”以创建控件

(async () => {
  let controls = document.querySelectorAll(‘div[control=gmap]’)
  for (var i = 0; i < controls.length; i++)
    await gmap(controls[i])
})()

全部无依赖，并且在原始JS中。

重要的是，这里几乎没有什么可记住的。
Div，功能和语言功能。

不确定哪种模式会胜出，但是可以使用没有附加功能的语言，也很有趣。

From: https://hackernoon.com/lets-make-reusable-web-components-google-maps-8be7577d925