WebAssembly核心编程[3]: Module 与 Instance
source link: https://www.cnblogs.com/artech/p/18001320/module_and_instance
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
WebAssembly核心编程[3]: Module 与 Instance
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程序是一致的。
Recommend
-
79
最近一直在忙比赛，四五个吧，时间有点紧张，博客也没时间更新~ 只能忙里抽闲 本文属于Java多线程编程系列的第二篇，旨在分享我对多线程编程技术的心得与感悟，顺便做下笔记。 如果你阅读完比较感兴趣，欢迎
-
28
本文经授权转载自微信公众号薛勤的博客，主要介绍 Java 多线程中的同步，也就是如何在 Java 语言中写出线程安全的程序，如何在 Java 语言中解决非线程安全的相关问题。 阅读本文应该着重掌握如下技术点： sync...
-
26
一、线程基本机制 1、概念描述 并发编程的特点是：可以将程序划分为多个分离且独立运行的任务，通过线程来驱动这些独立的任务执行，从而提升整体的效率。下面提供一个基础的演示案例。 ...
-
16
我计划在后续的一段时间内，写一系列关于java 9的文章，虽然java 9 不像Java 8或者Java 11那样的核心java版本，但是还是...
-
11
Most of Ruby’s fame is due to it’s dynamic capabilities. In Ruby you can define and redefine methods at runtime, create classes from nowhere and objects from pure dust. Most of these dynamical features are done using one of those methods at t...
-
11
Joomla 2.5 adds a new module instance via code advertisements I would like to create an instance of a module through code by passing necessary...
-
6
Load and Run Go WebAssembly Module October 06, 2018 When I tried to write and...
-
6
当我们在一个Web应用中使用WebAssembly，最终的目的要么是执行wasm模块的入口程序（通过start指令指定的函数），要么是调用其导出的函数，这一切的前提需要创建一个通过WebAssembly.Instance对象表示的wasm模块实例(
-
3
对于绝大多数编程语言来说，类型都是编程的基础，WebAssembly自然也不例外。总的来说，WebAssembly涉及的类型不多，很好掌握，接下来我们就来介绍一下WebAssembly编程涉及到的几种类型。本篇内容参考
-
3
由于Memory存储的是单纯的二进制字节，所以原则上我们可以用来它作为媒介，在wasm模块和数组程序之间传递任何类型的数据。在JavaScript API中，Memory通过WebAssembly.Memory类型表示，我们一般将它内部的缓冲区映射相应类型的数组进行处理。WebAssembly也提供了相应...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK