SvelteKit CSR中动态调用函数遇window[handler]未定义错误

问题出在SvelteKit的模块化机制上——你定义的function1、function2这类函数属于组件模块的局部作用域，默认不会挂载到全局window对象上，所以用window[handler]自然找不到对应的函数。

推荐用函数映射对象来实现动态调用，无需维护一堆if分支：

1. 先创建一个映射表，把需要动态调用的函数和对应的名称关联起来：

// 假设function1/function2/function3已经在当前模块定义
const handlerMap = {
  function1,
  function2,
  function3
};

2. 修改你的点击处理函数，通过映射表动态调用：

function onCellClickHandler(e) {
  const handlerName = e.detail.onCellClickHandler;
  // 检查映射表中是否存在该函数，避免调用不存在的方法报错
  if (handlerName && handlerMap[handlerName]) {
    handlerMap[handlerName](e.detail);
  }
}

额外说明 #

• 后续新增函数时，只需要在handlerMap里添加对应的键值对即可，不用修改调用逻辑；
• 如果确实需要让函数暴露到全局（不推荐，会污染全局作用域），可以在组件挂载时手动挂载到window：

// 在组件onMount钩子中执行（确保在CSR环境下）
import { onMount } from 'svelte';

onMount(() => {
  window.function1 = function1;
  window.function2 = function2;
});

但这种方式会增加全局变量冲突的风险，优先推荐映射表方案。

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