如何避免自定义Fiori应用的D3库在FLP切换应用时被覆盖？

FLP 是单页应用架构，所有共享应用共用同一个全局 window 上下文。当其他应用加载 OpenUI5 自带的 D3 v3.4.12 时，会覆盖全局的 d3 变量，导致你的 App1 切换回来后使用的是旧版本。以下是针对性的解决方案：

解决方案1：用IIFE隔离D3作用域 #

将D3封装到专属应用的命名空间下，避免依赖全局变量：

1. 创建 d3-wrapper.js 文件，内容如下：

   (function(window) {
     // 粘贴D3 v7.5.0的完整代码
     // 将全局d3挂载到应用专属命名空间
     window.App1D3 = d3;
   })(window);
   

2. 修改 manifest.json 中的资源配置：

   "resources": {
     "js": [
       { "uri": "library/d3-wrapper.js" }
     ]
   }
   

3. 应用代码中使用 App1D3 替代全局 d3：

   const svg = App1D3.select("#chartContainer")
     .append("svg")
     .attr("width", 500)
     .attr("height", 300);
   

解决方案2：封装为AMD模块 #

利用OpenUI5的AMD模块系统，完全隔离D3的作用域：

1. 创建 amd-d3.js 文件：

   define([], function() {
     // 粘贴D3 v7.5.0的完整代码
     return d3;
   });
   

2. 在应用代码中通过模块加载使用：

   sap.ui.require(["library/amd-d3"], function(d3) {
     // 此处的d3为v7.5.0版本，不受全局变量影响
     const data = [10, 20, 30];
     d3.select("#chart").selectAll("div")
       .data(data)
       .enter()
       .append("div")
       .style("height", d => `${d*5}px`);
   });
   

解决方案3：应用激活时强制覆盖全局D3 #

如果不想修改现有代码结构，可在应用生命周期钩子中检查并重载D3：
在 Component.js 的 onInit 方法中添加逻辑：

onInit: function() {
  sap.ui.core.UIComponent.prototype.onInit.call(this);
  // 检查当前D3版本
  if (!window.d3 || window.d3.version !== "7.5.0") {
    const script = document.createElement("script");
    script.src = this.getManifestEntry("resources.js[0].uri");
    script.onload = () => console.log("D3 v7.5.0已重载");
    document.head.appendChild(script);
  }
}

内容的提问来源于stack exchange，提问作者Alisa