WebAssembly程序总是以模块来组织，模块是基本的部署、加载和编译单元。在JavaScript编程接口中，模块通过WebAssembly.Module类型表示。WebAssembly.Module通过加载的.wasm二进制文件创建而成，它承载了描述wasm模块的元数据，类似于描述程序集的Assembly对象。WebAssembly.Module自身是只读且无状态的，有状态的是根据它结合指定的导入对象创建的模块实例，后者通过WebAssembly.Instance表示。这两个类型提供了几个核心API，解析我们就通过它们来介绍WebAssembly的这两个核心对象（源代码）。

  • WebAssembly.Module.customSections
  • WebAssembly.Module.imports
  • WebAssembly.Module.exports
  • WebAssembly.Instance.exports

一、WebAssembly.Module.customSections

我们在wasm模块中定义任意不同类型的成员，在编译生成的.wasm二进制文件中，这些成员会根据类型分布到对应的区域（section）中，确切地说“已知区域（known section）”。除了针对具体成员类型的已知区域， wasm模块还可以开辟一组命名的“自定义区域（custom section）”,静态方法WebAssembly.Module.customSections返回的ArrayBuffer指定名称的自定义区域在指定模块中的内容。目前的WebAssembly模块中大体可以定义如下11种类型的成员，对应的已知区域具有固定的代码（1-11）。

自定义区域的区域代码均为0，但是我们可以给它们进行命名。自定义区域赋予了我们在wasm模块文件中内嵌任意数据的能力。但是我们不能在.wat程序中为生成的.wasm添加自定义区域，但是如果我们在执行wat2wasm命令添加“--debug-names ”开关，编译后的.wasm中将自动添加一个名为“name”的自定义区域，该区域会将WAT程序中针对各种对象的命名（程序执行的时候不需要这些名称）存储起来，它们将会显示在我们的“调试视图”中以增强可读性。为了演示针对自定义区域的读取，我们采用WAT格式定义了如下这个程序（文件名为app.wat）。

(module

   (func (import "imports" "func"))

   (memory (import "imports" "memory") 1)

   (table (import "imports" "table") 4 externref)

   (global (import "imports"  "global") (mut i32))

   (func (export "func"))

   (memory (export "memory") 1)

   (table (export "table") 4 externref)

   (global (export "global") (mut i32) (i32.const 0))

)

如上面的代码片段所示，我们导入和导出了4种类型的对象（函数、Memory、Table和Global）。由于我们使用了两个Memory对象，wat2wasm编译工具在默认情况下并不支持，所以除了添加--debug-names开关，还需要添加--enable-multi-memory开关，完整的命令行如下所示。

wat2wasm app.wat -o app.wasm --enable-multi-memory --debug-names

针对自定义区域“name”的读取按照如下的形式实现在index.html页面中：在调用fetch函数成功下app.wasm模块文件后，我们之间调用构造函数根据得到的字节内容创建了一个WebAssembly.Module对象，然后将它和区域名称“name”作为参数调用静态方法customSections。

<html>

    <head></head>

    <body>

        <script>

           fetch("app.wasm")

                .then((response) => response.arrayBuffer())

                .then(bytes => {

                    var module = new WebAssembly.Module(bytes);

                    var sections = WebAssembly.Module.customSections(module, "name");

                    console.log(sections);

                })

        </script>

    </body>

</html>

得到的自定义区域内容体现为一个ArrayBuffer对象，它在网页调试控制台中有如下的显示。

二、WebAssembly.Module.imports & WebAssembly.Module.exports

WebAssembly.Module还定义了两个名称为imports 和exports的静态方法，我们可以利用它们得到wasm模块导入和导出对象的描述，接下来我们就将它们应用到我们的演示程序中。在index.html页面中，WebAssembly.Module对象创建出来后，我们将它作为参数传入上述两个静态方法中，然后将它们组合成又给对象，并以JSON的形式直接显示在页面里。

<html>

    <head></head>

    <body>

        <pre><code id="code"></code></pre>

        <script>

           fetch("app.wasm")

                .then((response) => response.arrayBuffer())

                .then(bytes => {

                    var module = new WebAssembly.Module(bytes);

                    var imports = WebAssembly.Module.imports(module);

                    var exports = WebAssembly.Module.exports(module);

                    document.getElementById("code").innerText = JSON.stringify({"imports":imports, "exports":exports}, null, 2);

                })

        </script>

    </body>

</html>

针对导入/导出描述的JSON以下的形式承载的页面中，可以看出导入描述中包含了每个导入对象的路径（“{module}.{name}”）和类型（function、table、memory和global）。导出描述包含了每个导出对象的导出名称和类型。

三、WebAssembly.Instance.exports

WebAssembly.Module仅仅是对加载的wasm模块的描述，宿主程序真正消费的是根据它创建的实例，该实例通过WebAssembly.Instance类型表示。WebAssembly.Instance构造函数具有两个参数，分别是提供描述元数据的WebAssembly.Module和指定的导入对象。宿主程序能够使用的仅仅是该实例导出的成员，它们通过WebAssembly.Instance对象的exports属性暴露出来。在如下所示的代码片段中，我们对index.html作了相应的修改来演示WebAssembly.Instance对象的导出列表。

<html>

    <head></head>

    <body>

        <script>

           fetch("app.wasm")

                .then((response) => response.arrayBuffer())

                .then(bytes => {

                    var module = new WebAssembly.Module(bytes);

                    var imports = {

                        "func": ()=> {},

                        "memory":  new WebAssembly.Memory({ initial: 1 }),

                        "table": new WebAssembly.Table({ initial: 4, element: "externref" }),

                        "global": new WebAssembly.Global({ value: "i32", mutable:true, initial:0})

                    };

                    var instance = new WebAssembly.Instance(module, {imports});

                    console.log(instance);

                })

        </script>

    </body>

</html>

如代码片段所示，在得到描述wasm模块的WebAssembly.Module对象后，我们创建出对应的导入对象，并将它们作为参数调用构造函数将WebAssembly.Instance对象创建出来，并将其exports属性代表的导出对象输出到调试控制台上。下图展示了导出列表在控制台中的输出，可以看出它们与app.wat程序是一致的。

WebAssembly核心编程[3]: Module 与 Instance的更多相关文章

  1. python核心编程第二版笔记

    python核心编程第二版笔记由网友提供:open168 python核心编程--笔记(很详细,建议收藏) 解释器options:1.1 –d   提供调试输出1.2 –O   生成优化的字节码(生成 ...

  2. python核心编程--笔记

    python核心编程--笔记 的解释器options: 1.1 –d   提供调试输出 1.2 –O   生成优化的字节码(生成.pyo文件) 1.3 –S   不导入site模块以在启动时查找pyt ...

  3. python核心编程--笔记（不定时跟新）(转)

    的解释器options: 1.1 –d   提供调试输出 1.2 –O   生成优化的字节码(生成.pyo文件) 1.3 –S   不导入site模块以在启动时查找python路径 1.4 –v   ...

  4. python核心编程笔记（转）

    解释器options: 1.1 –d   提供调试输出 1.2 –O   生成优化的字节码(生成.pyo文件) 1.3 –S   不导入site模块以在启动时查找python路径 1.4 –v   冗 ...

  5. Python核心编程-描述符

    python中,什么描述符.描述符就是实现了"__get__"."__set__"或"__delete__" 方法中至少一个的对象.什么是非 ...

  6. 学习《Python核心编程》做一下知识点提要，方便复习（一）

    学习<Python核心编程>做一下知识点提要,方便复习. 计算机语言的本质是什么? a-z.A-Z.符号.数字等等组合成符合语法的字符串.供编译器.解释器翻译. 字母组合后产生各种变化拿p ...

  7. pytho核心编程2-1中代码运行问题

    书籍是<python核心编程>第三版,学习环境py3.6 2-1 时间戳服务器 附源代码: from socket import * from time import ctime HOST ...

  8. windows核心编程 DLL技术 【转】

    注:本文章转载于网络,源地址为:http://blog.csdn.net/ithzhang/article/details/7051558 本篇文章将介绍DLL显式链接的过程和模块基地址重定位及模块绑 ...

  9. 《Windows核心编程系列》二十谈谈DLL高级技术

    本篇文章将介绍DLL显式链接的过程和模块基地址重定位及模块绑定的技术. 第一种将DLL映射到进程地址空间的方式是直接在源代码中引用DLL中所包含的函数或是变量,DLL在程序运行后由加载程序隐式的载入, ...

  10. Spark详解(05) - Spark核心编程SparkCore

    Spark详解(05) - Spark核心编程SparkCore RDD概述 什么是RDD RDD(Resilient Distributed Dataset)叫做弹性分布式数据集,是Spark中最基 ...

随机推荐

  1. linux挂载磁盘和设置开机自动挂载

    1.查看分区信息 root@xmgl opt]# fdisk -l ......此处省略一些信息 Disk /dev/sdb: 644.2 GB, 644245094400 bytes, 125829 ...

  2. 《深入理解计算机系统》（CSAPP）读书笔记 —— 第七章 链接

    链接( Clinking)是将各种代码和数据片段收集并组合成为一个单一文件的过程,这个文件可被加载(复制)到内存并执行.链接可以执行于编译时( compile time),也就是在源代码被翻译成机器代 ...

  3. 真实感渲染：WebGPU介绍和使用光栅化管线绘制一个三角形

    大家好~本课程为"真实感渲染"的线上课程,从0开始,介绍相关的图形学算法和数学基础,给出详细的数学推导.伪代码和实现代码,最终带领大家开发出基于物理的渲染器 线上课程资料: 本节课 ...

  4. Go 汇编学习笔记

    0.前言 学习 Go 离不开看源码,源码又包含大量汇编代码,离开汇编是学不好 Go 的.同样,离开汇编去学习计算机是不完整的,汇编是基石,是离操作系统和硬件最近的一层. 虽然之前学过一点 Go 汇编, ...

  5. Linux系统CPU异常占用（minerd 、tplink等挖矿进程）

    转载请注明出处: 云服务器ECS(Linux) CPU使用率超过70%,严重时可达到100%,服务器响应越来越慢.  服务器中存在恶意minerd.tplink进程 该进程是服务器被入侵后,被恶意安装 ...

  6. 基于React开发的chatgpt网页版（仿chatgpt）

    在浏览github的时候发现了一个好玩的项目本项目,是github大神Yidadaa开发的chatgpt网页版,该开源项目是跨平台的,Web / PWA / Linux / Win / MacOS都可 ...

  7. 如何查看centos对于 TIME_WAIT 状态的 Socket 回收时间

    要查看系统对于 TIME_WAIT 状态的 Socket 回收时间,可以通过以下方式查询 TCP 数据结构中的相关字段值: cat /proc/sys/net/ipv4/tcp_fin_timeout ...

  8. 一次异常OOM问题学习跟踪的过程

    摘要 春节后第一周一个项目出现了OOM的问题. 平台研发和产品研发跟踪了接近一周的时间也没有最终确认问题根因. 这里总结一下整个过程, 希望以后在遇到相同问题时会有进一步的结论. 产品的稳定运行离不开 ...

  9. PG数据库的离线rpm包下载

    PG数据库的离线rpm包下载 背景 周末时间研究数据库的版本. 发现PostgreSQL数据库的版本号已经变成了一年一个大版本. 兼容起来其实成本很高. 想着能够在能够上网的机器上面弄好多套数据库. ...

  10. [转帖]Region is unavailable的排查总结

    https://tidb.net/blog/07c99ed0#4%C2%A0%20%E4%B8%80%E4%BA%9B%E5%BB%BA%E8%AE%AE 1 region访问基本流程 tidb在访问 ...