如何在ExtJS应用中动态加载Nivo图表相关javascript文件

方案一：按依赖顺序手动加载构建产物 #

Nivo 构建后的产物一般是按 chunk 拆分的 JS、CSS 资源，你可以先梳理清楚依赖顺序（通常是 runtime 包 → 第三方依赖包 → 图表逻辑包），直接用 ExtJS 自带的资源加载能力实现：

• 先把 Nivo 构建出来的所有静态资源放到 ExtJS 应用的可访问静态资源目录下，比如resources/nivo-build/路径下
• JS 资源用Ext.Loader.loadScript()方法按顺序加载，CSS 资源可以用Ext.util.CSS.createStyleSheet()或者动态创建 link 标签加载
• 所有资源加载完成后再执行图表初始化逻辑，避免出现依赖未定义的报错

示例代码：

// 按依赖顺序加载JS
const nivoBasePath = 'resources/nivo-build/';
const loadScriptsSequentially = async (scripts) => {
  for (const script of scripts) {
    await new Promise((resolve, reject) => {
      Ext.Loader.loadScript({
        url: nivoBasePath + script,
        onLoad: resolve,
        onError: reject
      });
    });
  }
  // 所有脚本加载完成后初始化图表
  initNivoChart();
};

// 替换为你实际构建出来的JS文件名，顺序和构建产物index.html里的引用顺序保持一致
loadScriptsSequentially([
  'runtime.abc123.js',
  'vendors.def456.js',
  'main.ghi789.js'
]);

方案二：复用 Nivo 构建生成的 index.html 加载资源 #

完全可以借助生成的 index.html 自动加载所有关联 script，不需要手动梳理依赖顺序，最优实现方式是用 iframe 嵌入：

• 把 Nivo 构建的整个产物目录放到 ExtJS 应用的静态资源目录下，先验证 index.html 可以独立正常访问
• 在需要展示 Nivo 图表的 ExtJS 组件里嵌入 iframe，src 指向这个 index.html 的路径
• 如果需要 ExtJS 和 Nivo 图表做数据交互，可以用postMessageAPI 实现跨上下文通信，ExtJS 侧可发送数据给 iframe 里的 Nivo 实例，Nivo 实例也可以把交互事件、计算结果回传给 ExtJS

示例代码：

// ExtJS 组件中嵌入iframe的示例
Ext.create('Ext.panel.Panel', {
  title: 'Nivo图表',
  width: 800,
  height: 600,
  html: `<iframe id="nivo-chart-iframe" src="resources/nivo-build/index.html" frameborder="0" width="100%" height="100%"></iframe>`,
  listeners: {
    afterrender: function(panel) {
      const iframe = document.getElementById('nivo-chart-iframe');
      // 监听iframe加载完成事件，传入初始化数据
      iframe.onload = () => {
        iframe.contentWindow.postMessage({
          type: 'initChart',
          data: yourChartData // 你要传给Nivo图表的业务数据
        }, '*');
      };
      // 监听Nivo侧回传的消息
      window.addEventListener('message', (e) => {
        if (e.data.type === 'chartEvent') {
          // 处理Nivo图表触发的交互事件
          console.log('收到Nivo图表事件', e.data.payload);
        }
      });
    }
  },
  renderTo: Ext.getBody()
});

两种方案的选型建议 #

• 如果你需要 Nivo 图表和 ExtJS 组件深度联动、样式完全复用 ExtJS 的主题体系，优先选方案一，资源直接加载在当前上下文，调用更灵活
• 如果你只是要展示图表、不需要太复杂的交互，或者不想梳理 Nivo 的构建资源依赖顺序，优先选方案二，复用 index.html 的加载逻辑，出错概率更低，而且 Nivo 构建更新后不需要修改 ExtJS 侧的加载逻辑，直接替换构建产物目录即可

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