Return 来自 AMD 回调的值

Question

我正在使用 ArcGIS javascript api，它建立在 require 和异步模块定义之上。要创建地图，您可以在 AMD require 语句的回调中定义所有操作：

require([
  "esri/Map", 
  "esri/views/MapView"
], function(Map, MapView){
   
  const map = new Map({ ... })
  const view = new MapView({ ... })
   
})

我希望能够根据来自另一个模块的命令初始化此行为，以及访问在 AMD 回调中定义的 map 和 view 对象。为了能够根据命令初始化它，我可以将它包装在一个函数中，然后导出该函数：

export const makeMap = () => {

   require([esri modules], function(Map, MapView){
   
      map = new Map({ ... })
      view = new MapView({ ... })
   
   })

}

我可以将 makeMap 导入我的代码中的其他模块，然后调用它。这很好用。但是，我试图找出如何访问 map 和 view 对象，以便能够通过 UI 来操作它们。首先我尝试了这个：

// mapMap.js
export const makeMap = () => {

   let mapInstance;
   let viewInstance;

   require([esri modules], function(Map, MapView){
   
      map = new Map({ ... })
      view = new MapView({ ... })

      mapInstance = map   
      viewInstance = view
   
   })

   return { mapInstance, viewInstance }

}

// some other module
import { makeMap } from './makeMap'

const { mapInstance, viewInstance } = makeMap()

这显然不起作用 - mapInstance 和 viewInstance 未定义，因为在 AMD 回调中定义它们的函数运行 after 它们是 return来自 makeMap() 电话。

我不确定如何从 AMD 回调中获取 returned 值。这可能吗？我需要另一个范例吗？

我尝试的另一件事是传入一个引用持有者对象，将引用应用到该对象，然后在需要时从那里检索它们。它有效，但我觉得它不那么干净：

// maprefs.js
export const maprefs = {}

// makeMap.js
import { maprefs } from './maprefs'

export const makeMap = (maprefs, mapname) => {

   require([esri modules], function(Map, MapView){
   
      map = new Map({ ... })
      view = new MapView({ ... })

      maprefs[mapname] = { map, view }
   
   })

}

// some module
import { maprefs } from './maprefs'
import { makeMap } from './makeMap'

makeMap(maprefs, "map1")

someButton.addEventListener('click', () => {
  // maprefs.map1 is properly defined as { mapInstance, viewInstance } and I can take action on it
  maprefs.map1.doSomething
})

我查看了 How do I return the response from an asynchronous call?，它是关于从 ajax 调用中重新调整值的，但我正在努力将其与 AMD 回调联系起来。

是否可以return AMD 回调中的值用于其他地方？我希望有一个 const { map, value } = makeMap() 类型的语法。

Answer 1

在你提到的场景中，我认为最好的解决方案是使用esri-loader。 ESRI 正是为此目的而构建的一个微型库，即在运行时加载 ArcGIS JS API 库模块。

ArcGIS Docs - esri-loader

Github ESRI - esri-loader usage

Return 来自 AMD 回调的值

Return value from AMD callback

javascript

asynchronous

requirejs

amd

arcgis-js-api