在Svelte+Ultralight项目中调用全局函数并维持模块化的实现方案

我太懂这种纠结了——在Svelte的模块化环境里和Ultralight的JavaScriptCore交互，既要保住模块化的优势（比如能顺畅用store和自定义模块），又要满足C++侧必须通过全局对象调用函数的要求，确实有点拧巴。我给你整理了一套更优雅的实现方案，既能解决问题，又能保持代码的整洁性：

第一步：重构互操作逻辑，用集中式模块做桥梁 #

我们可以创建一个专门的interop.js模块，统一管理和C的交互，既不用直接暴露整个store到全局，也能让Svelte模块安全调用C函数：

// interop.js
import { notification } from './lib/store';

// 注册给C++调用的全局函数（封装内部逻辑，避免暴露核心模块）
function registerJsCallbacksForCpp() {
  // 把C++需要的notification函数挂载到window
  window.notification = (message, type) => {
    // 这里可以正常访问Svelte的store，因为当前是模块环境
    notification.notify(message, type);
  };
}

// 封装C++暴露的全局函数，供Svelte内部调用
export const cppApi = {
  test: () => {
    // 先校验函数是否存在，避免报错
    if (typeof window.Test !== 'function') {
      throw new Error('C++侧未注册Test函数');
    }
    return window.Test();
  }
};

// 初始化注册，确保C++调用前函数已挂载
registerJsCallbacksForCpp();

第二步：简化HTML引入，移除冗余脚本 #

你之前单独引入的cpp.js其实是多余的——从你的C++代码来看，已经通过global["Test"] = BindJSCallbackWithRetval(&UIHandler::Test);直接把Test函数注册到了全局对象上，不需要再手动绑定一次。现在只需要在HTML里以模块方式引入互操作脚本即可：

<!-- 先加载互操作模块，确保给C++的回调已注册 -->
<script type="module" src="/interop.js"></script>
<!-- 再加载Svelte的打包脚本 -->
<script type="module" src="/build/bundle.js"></script>

第三步：在Svelte组件中优雅调用C++函数 #

现在在任何Svelte组件里，你都可以通过导入封装好的cppApi来调用C++函数，完全不用直接操作window：

<!-- Example.svelte -->
<script>
  import { cppApi } from '../interop.js';

  async function triggerCppTest() {
    try {
      const result = cppApi.test();
      console.log('C++函数返回结果:', result);
    } catch (err) {
      console.error('调用C++函数失败:', err);
    }
  }
</script>

<button on:click={triggerCppTest}>调用C++ Test函数</button>

关键优势说明 #

• 模块化友好：所有和C++的交互都通过interop.js统一管理，Svelte组件不用直接操作全局对象，符合模块化开发规范
• 安全可控：不会把Svelte的store等核心模块直接暴露到全局，只把C++需要的具体函数封装后挂载，避免全局污染和意外修改
• 减少冗余：移除了不必要的非模块脚本，代码结构更清晰
• 错误可控：封装C++函数调用时增加了存在性校验，避免因函数未注册导致的崩溃

注意事项 #

• 加载顺序：确保interop.js在Svelte打包脚本和Ultralight初始化之前加载，这样C++调用window上的函数时，我们的回调已经注册完成
• C++侧校验：你的C++代码里已经有函数存在性校验，记得保留这个逻辑，避免调用不存在的JS函数时抛出异常

备注：内容来源于stack exchange，提问作者Poulpynator