js怎么调用c 的方法

JavaScript调用C语言方法的方法有很多种，主要包括：使用WebAssembly、通过Node.js的Add-ons、以及通过Electron等框架。其中，通过WebAssembly来调用C语言方法是目前最流行的一种方法。WebAssembly是一种新的编程语言，它允许在Web浏览器中运行高性能的代码。下面我们就通过WebAssembly来详细描述如何用JavaScript调用C语言的方法。

一、WebAssembly介绍

1、什么是WebAssembly

WebAssembly，简称Wasm，是一种二进制指令格式，可以作为现代浏览器的编译目标。它设计用于便携、高效和安全的执行。WebAssembly的出现使得浏览器能够以接近原生性能运行C和C++等编译语言编写的代码。

2、WebAssembly的优点

WebAssembly具有许多优点，包括高性能、跨平台、与JavaScript的无缝集成、安全性强以及对多种编程语言的支持。通过WebAssembly，开发者能够将现有的C/C++代码编译成WebAssembly模块，然后在JavaScript中调用这些模块，从而实现高效的功能扩展。

二、如何通过WebAssembly调用C语言方法

1、安装Emscripten

要将C语言代码编译成WebAssembly，我们需要使用Emscripten工具链。Emscripten是一个开源的LLVM到JavaScript编译器，可以将C和C++代码编译成JavaScript和WebAssembly。

首先，按照以下步骤安装Emscripten：

git clone https://github.com/emscripten-core/emsdk.git cd emsdk ./emsdk install latest ./emsdk activate latest source ./emsdk_env.sh

2、编写C语言代码

接下来，我们编写一个简单的C语言函数，并保存为 example.c：

#include <stdio.h>
int add(int a, int b) {
    return a + b;
}

3、编译C代码为WebAssembly

使用Emscripten将C代码编译为WebAssembly：

emcc example.c -s WASM=1 -o example.js

这将生成两个文件：example.js 和 example.wasm。example.js 是一个JavaScript文件，用于加载和运行生成的WebAssembly模块。

4、在JavaScript中调用WebAssembly模块

下面是一个示例HTML文件和JavaScript代码，用于加载和调用生成的WebAssembly模块：

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly Example</title>
</head>
<body>
    <h1>WebAssembly Example</h1>
    <script src="example.js"></script>
    <script>
        Module.onRuntimeInitialized = () => {
            const add = Module.cwrap('add', 'number', ['number', 'number']);
            const result = add(10, 20);
            console.log(`Result: ${result}`);
        };
    </script>
</body>
</html>

在这段代码中，我们首先加载 example.js，然后在WebAssembly运行时初始化完成后，通过 Module.cwrap 方法获取C语言函数 add 的JavaScript包装函数。最后，我们调用这个包装函数并打印结果。

三、通过Node.js的Add-ons调用C语言方法

1、什么是Node.js Add-ons

Node.js Add-ons 是用C或C++编写的动态链接共享对象，可以通过 require() 加载，并作为标准的Node.js模块使用。Add-ons 可以提供高性能的原生功能，并且可以直接调用系统API。

2、创建Node.js Add-ons

首先，确保你已经安装了Node.js和npm。然后，安装 node-gyp：

npm install -g node-gyp

接下来，创建一个新的Node.js项目，并初始化 package.json：

mkdir myaddon cd myaddon npm init -y

然后，创建一个C++文件（例如，addon.cpp）：

#include <node.h>
namespace demo {
using v8::Exception;
using v8::FunctionCallbackInfo;
using v8::Isolate;
using v8::Local;
using v8::Number;
using v8::Object;
using v8::String;
using v8::Value;
void Add(const FunctionCallbackInfo<Value>& args) {
  Isolate* isolate = args.GetIsolate();
  if (args.Length() < 2) {
    isolate->ThrowException(Exception::TypeError(
        String::NewFromUtf8(isolate, "Wrong number of arguments").ToLocalChecked()));
    return;
  }
  if (!args[0]->IsNumber() || !args[1]->IsNumber()) {
    isolate->ThrowException(Exception::TypeError(
        String::NewFromUtf8(isolate, "Wrong arguments").ToLocalChecked()));
    return;
  }
  double value = args[0].As<Number>()->Value() + args[1].As<Number>()->Value();
  Local<Number> num = Number::New(isolate, value);
  args.GetReturnValue().Set(num);
}
void Initialize(Local<Object> exports) {
  NODE_SET_METHOD(exports, "add", Add);
}
NODE_MODULE(NODE_GYP_MODULE_NAME, Initialize)
}  // namespace demo

然后，创建一个 binding.gyp 文件以配置 node-gyp：

{
  "targets": [
    {
      "target_name": "addon",
      "sources": [ "addon.cpp" ]
    }
  ]
}

接下来，构建Add-on：

node-gyp configure node-gyp build

3、在JavaScript中调用Node.js Add-on

现在，你可以在JavaScript中使用这个Add-on：

const addon = require('./build/Release/addon');
console.log(addon.add(10, 20)); // 30

四、通过Electron调用C语言方法

1、什么是Electron

Electron 是一个用于构建跨平台桌面应用程序的框架，它使用Web技术（HTML、CSS和JavaScript）构建用户界面，并使用Node.js来处理后台逻辑。

2、创建Electron项目

首先，确保你已经安装了Node.js和npm。然后，安装Electron：

npm install -g electron

接下来，创建一个新的Electron项目，并初始化 package.json：

mkdir myelectronapp cd myelectronapp npm init -y

安装Electron：

npm install --save-dev electron

3、编写主进程和渲染进程代码

创建 main.js 作为主进程：

const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });
  mainWindow.loadFile('index.html');
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

创建 preload.js 以在渲染进程中调用Node.js模块：

const addon = require('./build/Release/addon');
window.addEventListener('DOMContentLoaded', () => {
  const result = addon.add(10, 20);
  document.getElementById('result').innerText = `Result: ${result}`;
});

创建 index.html 作为渲染进程的HTML文件：

<!DOCTYPE html>
<html>
<head>
    <title>Electron Example</title>
</head>
<body>
    <h1>Electron Example</h1>
    <p id="result"></p>
    <script src="preload.js"></script>
</body>
</html>

4、运行Electron应用

在 package.json 中添加启动脚本：

"scripts": {
  "start": "electron ."
}

运行Electron应用：

npm start

五、总结

通过WebAssembly、Node.js的Add-ons、以及Electron，JavaScript可以高效地调用C语言方法。WebAssembly提供了高性能和跨平台的优势，适用于在浏览器中运行高效代码；Node.js的Add-ons则提供了与系统API交互的能力，适用于服务器端应用；Electron则结合了Web技术和Node.js，适用于跨平台桌面应用。根据具体需求选择合适的技术，可以大大提升开发效率和应用性能。