Question

背景

我正在寻求实施一个磁通存储来管理异步第三方脚本（当前用例是谷歌地图API）

我希望能够让我的地图组件检查api状态的商店并以这种方式管理外部脚本，而不是将它们内联到总是加载，只在需要时加载脚本第一个组件

它会做类似的事情：

script         = document.createElement('script')
script.async   = 'async'
script.src     = src
script.onload  = () =>
  // update state and emmit change event

document.getElementsByTagName('head')[0].appendChild(@script)

问题

谷歌地图脚本接受一个回调，该回调将在脚本初始化后运行，这是我想要更新商店的地方。

此回调需要全局存在于窗口中，但是，我并不想直接将任何Actions暴露给窗口。

问题

是否有任何推荐的模式来公开google地图的全局回调以点击init，然后可以更新我的Stores状态，同时仍然通过我的AppDispatcher？

Answer 1

您可以随时在商店中创建全局变量。

类似的东西：

function createStore() {
  window.initializeGoogleMaps = function () {
    window.initializeGoogleMaps = null;

    // Tell the world that Google Maps loaded
  };

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
               '&signed_in=true&callback=initializeGoogleMaps';
  document.body.appendChild(script);

  return {
    doStuff: function () {

    }
  };
}

这样，全局包含在该函数中，并且在调用回调时将其删除。您应用的其余部分无法看到它，您也无需触摸任何其他文件即可进行更改。

全局窗口Flux模式中的操作

1 个答案: