需要创建一个需要一些其他 AMD 模块的 UI5 自定义控件答案

【问题标题】：Need to create a UI5 custom control which need some other AMD modules需要创建一个需要一些其他 AMD 模块的 UI5 自定义控件
【发布时间】：2017-01-24 01:33:55
【问题描述】：

我需要创建一个 UI5 自定义控件，我需要在其中加载 ESRI 地图。

sap.ui.define([
"sap/ui/core/Control"
], function (Control) {
"use strict";
return Control.extend("custom.map.ESRIMap", {
    init : function(){
        this._map = new Map('mapDiv',esriMapOptions);
    }
});
});

这就是我想要编写自定义控件的方式。

我在哪里加载了 ESRI javascript API

jQuery.sap.includeScript({
                     url : "https://js.arcgis.com/3.18/init.js",
                     id : 'esriApi' 
                 });

我面临的问题是 ESRI 库加载，如果我加载如下，

sap.ui.define([
    "sap/ui/core/Control"
    "esri/map
    ], function (Control,Map) {

它不会加载，因为它不是ui5模块

我必须做如下要求

require(["esri/map"],function(Map){

我需要帮助来编写 UI5 自定义控件或模块，我必须在返回第一个代码之前一起加载 UI5 模块和 ESRI AMD 模块。

【问题讨论】：

您使用的是哪个 IDE/编辑器？我有同样的问题，所以需要更多细节。你在使用除 jquery 之外的任何其他 JS 库吗？
IDE eclipse，只有ui5
如果我没记错的话，您正在开发类似 github.com/Vikash2402/Lumira-Custom-Extension-AboutLumira 的东西，而不是您正在使用 SAPUI5 应用程序的可视化扩展......对吗？
ohk eclipse.. 让我检查一下...

标签： javascript custom-controls sapui5 arcgis-js-api

【解决方案1】：

一般来说，大多数 AMD 模块加载器不支持 ArcGIS API for JavaScript 使用的 Dojo AMD 插件语法（例如：dojo/i18n）。因此，加载这些模块的唯一可靠方法是使用上面提到的 Dojo 的 require()。

在使用其他模块加载器时，我们经常使用“嵌套需求”模式。在您的情况下，它看起来像这样：

sap.ui.define([
  "sap/ui/core/Control"
], function (Control) {
    "use strict";
    return Control.extend("custom.map.ESRIMap", {
      init : function() {
        require(["esri/map"],function(Map){
          // now you have access to Control and Map
          this._map = new Map('mapDiv',esriMapOptions);
        });
      }
    });
});

请记住，require() 是异步的，很可能会导致网络请求获取模块脚本。我对 UI5 框架以及是否可以在控件的 init() 中发出此类异步请求一无所知。如果没有，您可能需要为需求找到另一个地方。

此模式在in this blog post 中有更详细的描述，其中链接到其他示例，说明如何在 React 和 Angular 应用程序中使用它。你也可以使用esri-loader，它只是提供了一个API来隐藏require()全局的使用。

【讨论】：