Русский

Учебник по WebAssembly

WebAssembly - Преобразование WAT в WASM

Привет,野心勃勃的程序设计师们! Сегодня мы отправимся в увлекательное путешествие в мир WebAssembly, конкретно focusing на преобразовании WebAssembly Text (WAT) в б二进制 формат WebAssembly (WASM). Не волнуйтесь, если эти термины показались вам alien - мы разберем все шаг за шагом. К концу этого руководства вы сможете преобразовывать WAT в WASM, как профессионал!

WebAssembly - Convert WAT to WASM

Что такое WebAssembly?

Before мы погрузимся в процесс преобразования, давайте на минутку поймем, что такое WebAssembly. Представьте, что вы строите замок из песка. WebAssembly - это как магическая ведро, которое можетInstantly создать идеальные песчаные структуры, делая ваши береговые творения быстрее и впечатляющими.

В мире веб-разработки, WebAssembly - это низкоуровневый язык, который позволяет коду, написанному на языках, таких как C++ или Rust, работать в веб-браузерах с почти nativной скоростью. Он разработан для работы вместе с JavaScript, улучшая производительность веб-приложений.

WAT против WASM: Основы

Теперь давайте поговорим о WAT и WASM. Представьте WAT как чертеж вашего замка из песка, написанный на языке, который могут читать люди. WASM, с другой стороны, как завершенный замок из песка - это форма, которую компьютеры понимают и могут быстро выполнять.

  • WAT (WebAssembly Text Format): Читаемый человеком, похожий на ассемблерный язык
  • WASM (WebAssembly Binary Format): Читаемый машиной, компактный байтовый формат

Преобразование WAT в WASM: Процесс

Преобразование WAT в WASM похоже на то, как мыtranslate наш чертеж замка из песка в реальные песчаные структуры. Давайте пройдемся по этому процессу шаг за шагом.

Шаг 1: Напишите свой код WAT

Сначала нам нужно создать наш код WAT. Вот пример:

(module
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add)
(export "add" (func $add))
)

Этот код WAT определяет модуль с функцией, которая складывает два 32-битных целых числа. Не волнуйтесь, если вы не понимаете каждую деталь - мы разберем это:

  1. (module ...): Это обертывает весь наш код WAT.
  2. (func $add ...): Определяет функцию с именем "add".
  3. (param $a i32) (param $b i32): Указывает два параметра 32-битных целых чисел.
  4. (result i32): Показывает, что функция возвращает 32-битное целое число.
  5. local.get $a и local.get $b: Получает параметры функции.
  6. i32.add: Складывает два числа.
  7. (export "add" (func $add)): Делает функцию доступной из внешнего модуля.

Шаг 2: Сохраните свой файл WAT

Сохраните этот код в файле с расширением .wat, например, add.wat.

Шаг 3: Используйте преобразователь WAT в WASM

Теперь comes магическая часть - преобразование WAT в WASM. Мы используем инструмент под названием wat2wasm, который является частью WebAssembly Binary Toolkit (WABT).

Вот как вы можете использовать его:

  1. Установите WABT (если вы еще этого не сделали):
  • На macOS: brew install wabt
  • На Ubuntu: sudo apt-get install wabt
  • Для других систем, проверьте WABT GitHub repository

  1. Откройте ваш терминал и перейдите в директорию, содержащую ваш файл WAT.

  2. Выполните следующую команду:

wat2wasm add.wat -o add.wasm

Эта команда говорит wat2wasm преобразовать наш файл add.wat в файл WASM с именем add.wasm.

Шаг 4: Проверьте ваш файл WASM

Поздравляю! Вы только что создали свой первый файл WASM. Но как мы знаем, что это сработало? Давайте используем другой инструмент WABT под названием wasm2wat, чтобы преобразовать наш WASM обратно в WAT и посмотреть, совпадает ли он с нашим исходным кодом:

wasm2wat add.wasm -o add_verified.wat

Теперь откройте add_verified.wat в текстовом редакторе. Он должен выглядеть очень похоже на наш исходный код WAT, хотя может быть некоторые minor formatting различия.

Использование вашего файла WASM

Теперь, когда у нас есть наш файл WASM, как мы можем использовать его в веб-приложении? Вот пример HTML и JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Add Function</title>
</head>
<body>
<h1>WebAssembly Add Function</h1>
<p>Result: <span id="result"></span></p>
<script>
(async () => {
const response = await fetch('add.wasm');
const bytes = await response.arrayBuffer();
const { instance } = await WebAssembly.instantiate(bytes);
const result = instance.exports.add(5, 3);
document.getElementById('result').textContent = result;
})();
</script>
</body>
</html>

Этот HTML файл загружает наш модуль WASM и вызывает нашу функцию add с аргументами 5 и 3. Результат (8) затем отображается на странице.

Заключение

И вот мы здесь! Мы прошли путь от написания кода WAT до его преобразования в WASM и использования его на веб-странице. Помните, это только вершина айсберга. WebAssembly открывает мир возможностей для высокопроизводительных веб-приложений.

Пока вы продолжаете свое программирование приключение, продолжайте экспериментировать с различными функциями WAT и исследовать возможности WebAssembly. Кто знает? Вы можете создать следующее突破ющее веб-приложение, которое изменит мир!

Счастливого кодирования, будущие маги WebAssembly!

Credits: Image by storyset

Предыдущий учебник:
WebAssembly - Текстовый формат
Следующий учебник:
WebAssembly - Динамическая привязка