如何高效实现C与JavaScript之间的交互？

# C与JS交互

## 1. 概述

在Web开发中，C和JavaScript（JS）是两种非常常用的编程语言，C语言通常用于底层开发和系统编程，而JavaScript则广泛用于前端开发和客户端脚本，在某些情况下，我们需要在C程序中调用JavaScript代码，或者在JavaScript中调用C函数，本文将详细介绍如何在C和JavaScript之间进行交互。

## 2. 使用Emscripten将C代码编译为JavaScript

### 2.1 安装Emscripten

Emscripten是一个LLVM到JavaScript的编译器，可以将C/C++代码转换为可在JavaScript环境中运行的代码，首先需要安装Emscripten，可以通过以下命令安装：

“`bash

git clone https://github.com/juj/emsdk.git

cd emsdk

./emsdk install latest

./emsdk activate latest

source ./emsdk_env.sh

“`

### 2.2 编译C代码为JavaScript

假设我们有一个简单的C程序`hello.c`：

“`c

#include

int main() {

printf(“Hello, World!

“);

return 0;

“`

我们可以使用Emscripten将其编译为JavaScript：

“`bash

emcc hello.c o hello.js

“`

这将生成一个名为`hello.js`的JavaScript文件和一个名为`hello.wasm`的WebAssembly文件。

### 2.3 在HTML中使用编译后的JavaScript

创建一个HTML文件`index.html`，并在其中引入编译后的JavaScript文件：

“`html

“`

当你在浏览器中打开`index.html`时，你应该能看到”Hello, World!”被打印出来。

## 3. 在JavaScript中调用C函数

### 3.1 编写C代码并导出函数

修改`hello.c`，添加一个导出函数`add`：

“`c

#include

int add(int a, int b) {

return a + b;

int main() {

printf(“Hello, World!

“);

return 0;

“`

重新编译C代码：

“`bash

emcc hello.c o hello.js s EXPORTED_FUNCTIONS='[“add”]’

“`

### 3.2 在JavaScript中调用C函数

在`index.html`中添加以下JavaScript代码以调用`add`函数：

“`javascript

Module = {

onRuntimeInitialized: function() {

const result = Module._add(1, 2);

console.log(‘1 + 2 =’, result);

}

};

“`

当你在浏览器中打开`index.html`时，你应该能在控制台中看到”1 + 2 = 3″。

## 4. 相关问题与解答

**问题1：如何在C中调用JavaScript函数？

答：在C中调用JavaScript函数相对复杂一些，你需要使用Emscripten提供的`EM_ASM`宏来执行JavaScript代码，假设你有一个名为`alertMessage`的JavaScript函数，你可以在C代码中这样调用它：

“`c

#include#include

void callAlertMessage() {

EM_ASM({

alertMessage();

});

int main() {

callAlertMessage();

return 0;

“`

**问题2：如何在C和JavaScript之间传递数据？

答：在C和JavaScript之间传递数据，可以使用Emscripten提供的`HEAPU8`、`HEAP16`、`HEAP32`等内存数组，假设你有一个名为`setPixel`的JavaScript函数，它接受一个x坐标、一个y坐标和一个颜色值，你可以在C代码中这样调用它：

“`c

#include#include

void setPixel(int x, int y, int color) {

EM_ASM({

Module[‘setPixel’]($0, $1, $2);

}, x, y, color);

int main() {

setPixel(10, 20, 0xFF00FF);

return 0;

“`

在这个例子中，我们使用了`$0`、`$1`和`$2`来表示传递给`EM_ASM`宏的参数，这些参数会自动映射到JavaScript函数的参数上。