如何在Aurelia SPA组件内调用宿主MVC页面加载的dataTable方法？

核心原因 #

• SPA内部使用的jQuery实例和宿主MVC页面加载的jQuery实例是相互隔离的：DataTables插件会挂载到执行引入的那个jQuery实例的原型上，宿主页面引入的datatables.min.js只给宿主的全局jQuery加了dataTable方法，你在SPA组件里调用的$是SPA内部打包/引入的独立jQuery实例，自然找不到对应方法。
• 小概率场景是attached钩子触发时机早于宿主页面datatables脚本加载完成时机，你能在控制台正常调用说明基本可以排除这个可能。

可用解决方法 #

方法1：直接调用宿主全局jQuery #

放弃使用SPA内部的$，直接调用window上挂载的宿主jQuery实例：

attached() {
   window.$('#MyElement').dataTable();
};

如果宿主页面jQuery是用jQuery作为全局变量名，替换成window.jQuery调用即可。

方法2：配置打包工具外部依赖 #

如果你的SPA用了webpack等打包工具，把jQuery标记为外部依赖，让SPA内部所有对jQuery的引用都直接使用宿主的全局实例：

// webpack.config.js 新增配置
module.exports = {
  // 其余原有配置保持不变
  externals: {
    jquery: 'jQuery'
  }
}

配置完成后你在SPA内正常import $ from 'jquery'也会直接使用宿主已经挂载了DataTables的jQuery，不需要本地安装jQuery包。

方法3：手动同步插件到SPA内部jQuery #

如果前两种方法都无法使用，可以在组件初始化时手动把DataTables方法同步到SPA内部的jQuery实例上：

attached() {
  // 仅在内部jQuery未挂载DataTables时执行同步
  if (typeof $.fn.dataTable === 'undefined') {
    $.fn.dataTable = window.$.fn.dataTable;
    $.fn.DataTable = window.$.fn.DataTable;
  }
  $('#MyElement').dataTable();
};

问题验证 #

在attached钩子中加入console.log($ === window.$)，如果输出为false就可以确定是jQuery实例隔离问题，直接用上述方法修复即可。如果输出为true，说明是脚本加载时序问题，可以用轮询方式等待加载完成再执行初始化：

attached() {
  const tryInit = () => {
    if (window.$?.fn?.dataTable) {
      window.$('#MyElement').dataTable();
    } else {
      setTimeout(tryInit, 50);
    }
  }
  tryInit();
}

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