从 URL 导入 API 而不是 <head>答案

【问题标题】：Importing an API from URL instead of in <head>从 URL 导入 API 而不是 <head>
【发布时间】：2016-10-17 00:24:16
【问题描述】：

通过在头部添加脚本标签可以使用许多Web API：

<html lang="en">
<head>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
</head>
<body>
  <div id="root" style="height: 100%"></div>
</body>
</html>

但是当使用像 React 这样的库和像 ES6 这样的新特性时，这似乎不合适。就像让我们保持模块化一样——导入应该接近使用它的代码。

我们如何在 ES6 文件中做同样的事情？

我想这样获取它：

var request = require('request');
request('https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places', function (error, response, body) {
  if (!error && response.statusCode == 200) {
     ...
  }
})

应该如何处理返回的内容？将其附加到头部？

更新：

错误：ReferenceError: google is not defined

我是否在错误的时间加载脚本？

const loadScript = (src) => {
  const script = document.createElement("script")
  script.type = "text/javascript"
  script.src = src
  document.getElementsByTagName("head")[0].appendChild(script)
}


class Geosuggest extends React.Component {

  constructor(props) {
    super(props)
    loadScript('https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places')
  }

  componentWillMount() {
    this.autocompleteService = new google.maps.places.AutocompleteService();
  }

}

【问题讨论】：

你会以完全相同的方式来做，ES6 不会改变在 HTML 中添加脚本的方式。
我的意思是在 JS 中做这一切。
呃，那你会用JS插入一个脚本标签吗？您无法使用客户端 JS 获取跨域资源，并且在服务器端获取它似乎没有多大意义？你似乎在使用require，这意味着需要一些 Require.js 的实施？
所以你想重新发明轮子，因为它“看起来不合适”？这里有解决实际问题吗？
' 用 JS 插入一个脚本标签' 说得通，就是漏掉了明显的东西。 Scott，在使用分形项目结构时，将一个组件所需的代码放在该组件目录范围之外的 html 文件中是非常不合适的。

标签： javascript ecmascript-6

【解决方案1】：

http://jsfiddle.net/doktormolle/7cu2f/

html:

<div id="map_canvas" style="height:200px"></div>

javascript：

function loadScript(src, callback) {

  var script = document.createElement("script");
  script.type = "text/javascript";
  if (callback) script.onload = callback;
  document.getElementsByTagName("head")[0].appendChild(script);
  script.src = src;
}


loadScript('http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize',
  function() {
    log('google-loader has been loaded, but not the maps-API ');
  });


function initialize() {

  log('maps-API has been loaded, ready to use');
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
}

function log(str) {
  document.getElementsByTagName('pre')[0].appendChild(document.createTextNode('[' + new Date().getTime() + ']\n' + str + '\n\n'));
}

【讨论】：

【解决方案2】：

react-helmet 来救援！

class Geosuggest extends React.Component {
  componentWillMount() {
    this.autocompleteService = new google.maps.places.AutocompleteService();
  }
}

const wrap = () => <div>
  <Helmet script={[{"src": GoogleMapsApiUrl}]}/>
  <Geosuggest />
</div>

export default wrap

【讨论】：