C++与JavaScript混合编程实战：构建高效人机交互界面的架构设计与实现

1次阅读

共计 2011 个字符，预计需要花费 6 分钟才能阅读完成。

开发桌面应用时，我们常遇到两个头疼的问题：

UI 响应慢：传统框架如 MFC/WPF 需要频繁操作 DOM，复杂界面容易卡顿
跨平台难：Qt 虽然跨平台，但不同系统下样式和表现总有细微差异

最近接手一个医疗影像项目，需要同时支持 Windows/macOS，还要处理实时 3D 渲染。试了纯 Electron 方案，遇到大量数据处理时 JS 线程直接卡死——这促使我寻找 C ++ 和 JS 的结合方案。

方案	优点	缺点
Qt	性能好，控件丰富	学习曲线陡峭，CSS 支持有限
Flutter	跨平台一致性强	嵌入原生窗口困难
Electron 纯 JS	开发效率高	计算性能差

最终选择 Electron + Node.js Addon 组合：
1. 用 Web 技术实现 UI（React/Vue 任意选）
2. C++ 处理影像计算等重型任务
3. 通过 Node.js 桥接层通信

先创建基础的 Electron 项目：

electron-forge init my-app --template=typescript

然后添加 C ++ 模块：

// native/addon.cc
#include <napi.h>

Napi::String Hello(const Napi::CallbackInfo& info) {return Napi::String::New(info.Env(), "来自 C ++ 的问候");
}

Napi::Object Init(Napi::Env env, Napi::Object exports) {exports.Set("hello", Napi::Function::New(env, Hello));
  return exports;
}

NODE_API_MODULE(addon, Init)

关键配置项（binding.gyp）：

{
  "targets": [{
    "target_name": "addon",
    "sources": ["addon.cc"],
    "include_dirs": ["<!@(node -p \"require('node-addon-api').include\")"],
    "dependencies": ["<!(node -p \"require('node-addon-api').gyp\")"]
  }]
}

测试同一组矩阵运算（1000×1000 双精度浮点）：

方式	耗时(ms)	内存占用(MB)
N-API	42	15
纯 V8 绑定	38	18
WebAssembly	45	12

推荐选择：
– 常规场景用 N -API（开发简单）
– 性能敏感模块用 V8 直接绑定
– 需要浏览器端复用的选 WASM

C++ 侧启动工作线程：

// 使用 libuv 的异步队列
uv_work_t* req = new uv_work_t;
uv_queue_work(uv_default_loop(), req, 
  [](uv_work_t* req) {// 后台线程执行耗时计算},
  [](uv_work_t* req, int status) {
    // 主线程回调
    Napi::Env env = ...;
    Napi::Function cb = ...;
    cb.Call(env.Global(), {result});
    delete req;
  }
);

JS 侧调用：

// preload.ts
contextBridge.exposeInMainWorld('native', {processData: (data: Float32Array) => {return new Promise((resolve) => {native.processAsync(data, (result) => {resolve(result);
      });
    });
  }
});

所有 N -API 对象引用必须显式释放
C++ 中分配的内存要用 std::unique_ptr 管理
避免在 JS 回调中持有 C ++ 对象指针

推荐使用 CMake 统一管理：

find_package(Nodejs REQUIRED)
include_directories(${NODEJS_INCLUDE_DIRS})

add_library(addon SHARED addon.cc)
target_link_libraries(addon ${NODEJS_LIBRARIES})