2.2 JavaScript函数注入C

优质
小牛编辑
134浏览
2023-12-01

Emscripten提供了多种在C环境调用JavaScript的方法,包括:

  • EM_JS/EM_ASM宏内联JavaScript代码
  • emscripten_run_script函数
  • JavaScript函数注入(更准确的描述为:“Implement C API in JavaScript”,既在JavaScript中实现C函数API

本节将重点介绍其中的最后一种。

2.2.1 C函数声明

在C环境中,我们经常碰到这种情况:模块A调用了由模块B实现的函数——既在模块A中创建函数声明,在模块B中实现函数体。在Emscripten中,C代码部分是模块A,JavaScript代码部分是模块B。例如创建capi_js.cc如下:

//capi_js.cc
EM_PORT_API(int) js_add(int a, int b);
EM_PORT_API(void) js_console_log_int(int param);

EM_PORT_API(void) print_the_answer() {
    int i = js_add(21, 21);
    js_console_log_int(i);
}

print_the_answer()调用了函数js_add计算21+21,然后调用js_console_log_int()来打印结果,后二者仅仅给出了声明,函数实现将在JavaScript中完成。

基于2.1.1相同的理由,C函数API声明时应该使用C风格的符号修饰。出于简便,我们在声明js_add()js_console_log_int()时沿用了EM_PORT_API宏(该宏展开后会增加EMSCRIPTEN_KEEPALIVE定义,由于函数并没有在C代码中实现,此时EMSCRIPTEN_KEEPALIVE并没有实际作用)。

2.2.2 JavaScript实现C函数

创建一个JavaScript源文件pkg.js如下:

//pkg.js
mergeInto(LibraryManager.library, {
    js_add: function (a, b) {
        console.log("js_add");
        return a + b;
    },

    js_console_log_int: function (param) {
        console.log("js_console_log_int:" + param);
    }
})

代码按照两个C函数各自的声明定义了两个对象js_add以及js_console_log_int,并将其合并到LibraryManager.library中——在JavaScript中,方法(或者说函数)也是对象。

tips LibraryManager.library可以简单的理解为JavaScript注入C环境的库,既2.2.1中所说的“模块B”。虽然事实上它远比这要复杂,但这种简单的类比足以应对大部分常规应用。

执行下列命令:

emcc capi_js.cc --js-library pkg.js -o capi_js.js

--js-library pkg.js意为将pkg.js作为附加库参与链接。命令执行后得到capi_js.js以及capi_js.wasm。按照之前章节的例子在网页中将其载入,并调用C导出的print_the_answer()函数:

//capi_js.html
  <body>
    <script>
    Module = {};
    Module.onRuntimeInitialized = function() {
      Module._print_the_answer();
    }
    </script>
    <script src="capi_js.js"></script>
  </body>

浏览页面,控制台将输出:

自此,我们实现了在C环境调用JavaScript方法。

2.2.3 闭包限制及解决办法

使用“mergeInto(LibraryManager.library……”注入的方法不能直接使用闭包。当然这可以通过在注入方法中调用其他JavaScript方法来间接实现。比如我们创建closure.cc如下:

//closure.cc
#include <stdio.h>

EM_PORT_API(int) show_me_the_answer();

EM_PORT_API(void) func() {
    printf("%dn", show_me_the_answer());
}

show_me_the_answer()函数在closure_pkg.js中实现

//closure_pkg.js
mergeInto(LibraryManager.library, {
    show_me_the_answer: function () {
        return jsShowMeTheAnswer();
    }
})

show_me_the_answer()调用了jsShowMeTheAnswer(),后者将在网页closure.html中实现:

//closure.html
  <body>
    <script>
    function f1(){
      var answer = 42;
      function f2() {
        return answer;
      }
      return f2;
    }
    var jsShowMeTheAnswer = f1();

    Module = {};
    Module.onRuntimeInitialized = function() {
      Module._func();
    }
    </script>
    <script src="closure.js"></script>
  </body>

熟悉JavaScript的读者一定已经发现了:jsShowMeTheAnswer()使用了闭包。

使用这种方法,不仅可以绕过“mergeInto(LibraryManager.library……”注入的方法不仅能直接使用闭包的限制,还可以动态调整注入函数的行为——比如上例中我们可以在JavaScript环境中动态调整jsShowMeTheAnswer()对象,从而改变C环境中的show_me_the_answer()函数的返回值。

2.2.4 JavaScript函数注入的优缺点

  • 优点:使用JavaScript函数注入可以保持C代码的纯净——既C代码中不包含任何JavaScript的成分;
  • 缺点:该方法需要额外创建一个.js库文件,维护略为麻烦。