From dd24e1f757d6ab1a94f0561a71a59a5d28bef0dd Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Thu, 8 Aug 2024 15:26:15 +0300 Subject: [PATCH] [ru] replace old noteblock syntax with GFM syntax in `webassembly` folder (#22793) [ru] replace old noteblock syntax with GFM syntax in 'webassembly' folder --- files/ru/webassembly/c_to_wasm/index.md | 9 +++-- files/ru/webassembly/concepts/index.md | 6 ++-- .../compile_static/index.md | 3 +- .../webassembly/javascript_interface/index.md | 19 ++++------ .../javascript_interface/table/index.md | 3 +- .../webassembly/loading_and_running/index.md | 12 ++++--- files/ru/webassembly/rust_to_wasm/index.md | 3 +- .../webassembly/text_format_to_wasm/index.md | 6 ++-- .../understanding_the_text_format/index.md | 36 ++++++++++++------- .../using_the_javascript_api/index.md | 27 +++++++++----- 10 files changed, 77 insertions(+), 47 deletions(-) diff --git a/files/ru/webassembly/c_to_wasm/index.md b/files/ru/webassembly/c_to_wasm/index.md index 464e0da3ded249..7a46515f132e26 100644 --- a/files/ru/webassembly/c_to_wasm/index.md +++ b/files/ru/webassembly/c_to_wasm/index.md @@ -61,7 +61,8 @@ slug: WebAssembly/C_to_Wasm Если все работает как планировалось, вы должны увидеть надпись "Hello world" на открывшейся веб-странице и в JavaScript консоли вашего браузера. Поздравляем, вы только что скомпилировали программу на Си в WebAssembly и запустили её в своём браузере! -> **Примечание:** На самом деле, если просто открыть полученный `hello.html`, то ничего работать не будет. Подразумевается что все файлы находятся на веб-сервере и вы запускаете страницу через `localhost/hello.html`. Для этих целей можно использовать отладочный веб-сервер Emscripten. Чтобы его запустить, откройте терминал, перейдите в каталог, в котором находятся ваши файлы и выполните команду `emrun hello.html` +> [!NOTE] +> На самом деле, если просто открыть полученный `hello.html`, то ничего работать не будет. Подразумевается что все файлы находятся на веб-сервере и вы запускаете страницу через `localhost/hello.html`. Для этих целей можно использовать отладочный веб-сервер Emscripten. Чтобы его запустить, откройте терминал, перейдите в каталог, в котором находятся ваши файлы и выполните команду `emrun hello.html` ### Использование собственного HTML шаблона @@ -92,7 +93,8 @@ slug: WebAssembly/C_to_Wasm 4. Теперь давайте запустим этот пример. Команда, указанная выше, сгенерирует файл `hello2.html`, который будет иметь тоже содержание что и шаблон, но с некоторым кодом, добавленным в процесс загрузки сгенерированного wasm, запускающим его и т.д. Откройте его в своём браузере, и вы увидите тот же результат, что и прошлом примере. -> **Примечание:** вы можете указать компилятору создавать только JavaScript-кода, без HTML, используя внутри флага `-o`, `.js` вместо `.html` для формата выходного файла, например `emcc -o hello2.js hello2.c -O3 -s WASM=1`. После этого вы должны создать свой собственный HTML файл с нуля. Однако так делать не рекомендуется — Emscripten требуется большое количество связывающего кода для обработки операций выделения памяти, утечек памяти и других проблем, которые уже включены в предоставляемый шаблон. Намного легче использовать уже готовое решение, чем создавать свои собственные версии самому. +> [!NOTE] +> Можно создавать только JavaScript-файлы без HTML, указав `.js` вместо `.html` внутри флага `-o`, например `emcc -o hello2.js hello2.c -O3`. После этого вы должны создать свой собственный HTML файл с нуля. Как правило легче использовать уже готовое решение, чем создавать свои собственные версии самому. ### Вызов пользовательской функции, определённой в Си @@ -123,7 +125,8 @@ slug: WebAssembly/C_to_Wasm По умолчанию, код созданный Emscripten, всегда просто вызывает функцию `main()` , а остальные неиспользуемые функции удаляются. Добавьте определение `EMSCRIPTEN_KEEPALIVE` перед именем функции чтобы этого не происходило. Также вы должны подключить библиотеку `emscripten.h` для использования `EMSCRIPTEN_KEEPALIVE`. - > **Примечание:** Мы используем блоки `#ifdef` чтобы, пример оставался рабочим если вы попытаетесь использовать C++ код. Из за различия в правилах преобразования имён между Си и Си++, этот код может сломаться, но мы написали его так, что функция будет рассматриваться как функция Си даже если вы будете использовать Си++. + > [!NOTE] + > Мы используем блоки `#ifdef` чтобы, пример оставался рабочим если вы попытаетесь использовать C++ код. Из-за различия в правилах преобразования имён между Си и Си++, этот код может сломаться, но мы написали его так, что функция будет рассматриваться как функция Си даже если вы будете использовать Си++. 2. Теперь добавьте `html_template/shell_minimal.html` в ваш новый каталог, просто для удобства. В настоящем проекте стоит размещать его в специально определённый каталог. 3. Теперь снова займёмся этапом компиляции. Внутри вашего последнего каталога, используя терминал, скомпилируйте ваш Си код следующей командой. (Обратите внимание что при компиляции обязательно нужно использовать опцию NO_EXIT_RUNTIME, иначе после выполнения функции `main()`, рабочий цикл будет завершён. Это приведёт, например, к вызову функции atexits и дальше будет невозможно использовать наш скомпилированный код. Другими словами это необходимо для правильной эмуляции Си.) diff --git a/files/ru/webassembly/concepts/index.md b/files/ru/webassembly/concepts/index.md index 48dc72ffaf48f8..61a22484d58b54 100644 --- a/files/ru/webassembly/concepts/index.md +++ b/files/ru/webassembly/concepts/index.md @@ -24,7 +24,8 @@ WebAssembly позволяет запускать код, написанный - Поддерживать безопасность - код WebAssembly предназначен для запуска в безопасной, изолированной среде выполнения. Как и другой веб-код, он будет соблюдать политики безопасности браузера. - Не разрушать текущий веб - технология WebAssembly разработана так, что она прекрасно сочетается с другими веб-технологиями и поддерживает обратную совместимость. -> **Примечание:** Технология WebAssembly также будет иметь возможность использования за пределами веб и JavaScript-сред (см. [Встраивание вне Web](http://webassembly.org/docs/non-web/)). +> [!NOTE] +> Технология WebAssembly также будет иметь возможность использования за пределами веб и JavaScript-сред (см. [Встраивание вне Web](http://webassembly.org/docs/non-web/)). ## Как WebAssembly встраивается в веб-платформу? @@ -93,7 +94,8 @@ JavaScript API предоставляет разработчикам возмо 2. Emscripten преобразует скомпилированный результат clang + LLVM в двоичный файл .wasm. 3. Сам по себе код WebAssembly в настоящее время не может напрямую обращаться к DOM; он может вызывать только JavaScript, передавая целочисленные и числа с плавающей точкой примитивные типы данных. Таким образом, чтобы получить доступ к любому Web-API, WebAssembly модуль должен обращаться к JavaScript, который затем вызывает Web-API. Поэтому Emscripten создаёт необходимый для этого связующий код HTML и JavaScript. -> **Примечание:** В будущем планируется [позволить WebAssembly напрямую вызывать Web API](https://github.com/WebAssembly/gc/blob/master/README.md). +> [!NOTE] +> В будущем планируется [позволить WebAssembly напрямую вызывать Web API](https://github.com/WebAssembly/gc/blob/master/README.md). Связующий код JavaScript не так прост, как вы можете себе представить. Прежде всего Emscripten предоставляет популярные библиотеки C/C++, такие как [SDL](https://en.wikipedia.org/wiki/Simple_DirectMedia_Layer), [OpenGL](https://en.wikipedia.org/wiki/OpenGL), [OpenAL](https://en.wikipedia.org/wiki/OpenAL) и части [POSIX](https://en.wikipedia.org/wiki/POSIX). Эти библиотеки реализованы с точки зрения Web-API, и поэтому каждой из них требуется некоторый код JavaScript для соединения WebAssembly модуля с базовым Web-API. diff --git a/files/ru/webassembly/javascript_interface/compile_static/index.md b/files/ru/webassembly/javascript_interface/compile_static/index.md index 2ad5cb797a2101..3306f723f1fed7 100644 --- a/files/ru/webassembly/javascript_interface/compile_static/index.md +++ b/files/ru/webassembly/javascript_interface/compile_static/index.md @@ -40,7 +40,8 @@ fetch("simple.wasm") .then((mod) => worker.postMessage(mod)); ``` -> **Примечание:** Вероятно, вы захотите использовать {{jsxref("WebAssembly.compileStreaming()")}} в большинстве случаев, поскольку он более эффективен, чем `compile()`. +> [!NOTE] +> Вероятно, вы захотите использовать [`WebAssembly.compileStreaming()`](/ru/docs/WebAssembly/JavaScript_interface/compileStreaming_static) в большинстве случаев, поскольку он более эффективен, чем `compile()`. ## Характеристики diff --git a/files/ru/webassembly/javascript_interface/index.md b/files/ru/webassembly/javascript_interface/index.md index 726ab006826114..5dfa86fdb15734 100644 --- a/files/ru/webassembly/javascript_interface/index.md +++ b/files/ru/webassembly/javascript_interface/index.md @@ -45,24 +45,19 @@ slug: WebAssembly/JavaScript_interface ## Примеры -После загрузки некоторого байт-кода WebAssembly с помощью fetch, мы компилируем и создаём экземпляр модуля с помощью функции {{jsxref("WebAssembly.instantiate()")}}, импортируя функции JavaScript в WebAssembly Module в процессе. Этот промис результирует в объект (`result`), содержащий скомпилированные [`Module`](/ru/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module) и объекты [`Instance`](/ru/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance). Мы можем вызвать [Exported WebAssembly function](/ru/docs/WebAssembly/Exported_functions), которая была экспортирована через `Instance`. +Смотрите пример [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/main/js-api-examples/instantiate-streaming.html) на GitHub ([демо](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)). ```js -var importObject = { - imports: { - imported_func: function (arg) { - console.log(arg); - }, - }, +const importObject = { + my_namespace: { imported_func: (arg) => console.log(arg) }, }; -fetch("simple.wasm") - .then((response) => response.arrayBuffer()) - .then((bytes) => WebAssembly.instantiate(bytes, importObject)) - .then((result) => result.instance.exports.exported_func()); +WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then( + (obj) => obj.instance.exports.exported_func(), +); ``` -> **Примечание:** Смотрите пример [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) на GitHub ([view it live also](https://mdn.github.io/webassembly-examples/js-api-examples/)), который использует наши [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1) библиотечные функции. +Потом осуществляется доступ к свойству `.instance` объекта `ResultObject` и вызывается содержащаяся в нём экспортированная функция. ## Спецификации diff --git a/files/ru/webassembly/javascript_interface/table/index.md b/files/ru/webassembly/javascript_interface/table/index.md index 04478a4ea00373..44596e8070b468 100644 --- a/files/ru/webassembly/javascript_interface/table/index.md +++ b/files/ru/webassembly/javascript_interface/table/index.md @@ -7,7 +7,8 @@ slug: WebAssembly/JavaScript_interface/Table Объект **`WebAssembly.Table()`** - это JavaScript обёртка — структура похожая на массив, представляющая таблицу функций WebAssembly. Таблица, созданная через JavaScript или в коде WebAssembly, будет доступна и может быть изменена как из JavaScript, так и из WebAssembly. -> **Примечание:** Таблицы сейчас хранят только ссылки на функции, но это может быть расширено в будущем. +> [!NOTE] +> Таблицы сейчас хранят только ссылки на функции, но это может быть расширено в будущем. ## Конструктор diff --git a/files/ru/webassembly/loading_and_running/index.md b/files/ru/webassembly/loading_and_running/index.md index 16f02b2cd9b747..a7e78ac19dc91f 100644 --- a/files/ru/webassembly/loading_and_running/index.md +++ b/files/ru/webassembly/loading_and_running/index.md @@ -53,9 +53,11 @@ fetch("module.wasm") } ``` -> **Примечание:** Обычно мы заботимся только об экземпляре, но полезно иметь модуль на тот случай, если мы хотим его кешировать, поделиться им с другим работником или окном через [`postMessage()`](/ru/docs/Web/API/MessagePort/postMessage), или просто создать больше экземпляров. +> [!NOTE] +> Обычно мы заботимся только об экземпляре, но полезно иметь модуль на тот случай, если мы хотим его кешировать, поделиться им с другим работником или окном через [`postMessage()`](/ru/docs/Web/API/MessagePort/postMessage), или просто создать больше экземпляров. -> **Примечание:** Вторая форма перегрузки принимает в качестве аргумента объект {{jsxref("WebAssembly.Module")}} и возвращает `Promise`, непосредственно содержащее объект экземпляра, в качестве результата. См. [Второй пример перегрузки](/ru/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example). +> [!NOTE] +> Вторая форма перегрузки принимает в качестве аргумента объект {{jsxref("WebAssembly.Module")}} и возвращает `Promise`, непосредственно содержащее объект экземпляра, в качестве результата. См. [Второй пример перегрузки](/ru/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example). ### Выполнение вашего кода WebAssembly @@ -77,7 +79,8 @@ WebAssembly.instantiateStreaming(fetch("myModule.wasm"), importObject).then( ); ``` -> **Примечание:** Для получения дополнительной информации о том, как работает экспорт из модуля WebAssembly, ознакомьтесь с разделами [Использование JavaScript API WebAssembly](/ru/docs/WebAssembly/Using_the_JavaScript_API), и [Понимание текстового формата WebAssembly](/ru/docs/WebAssembly/Understanding_the_text_format). +> [!NOTE] +> Для получения дополнительной информации о том, как работает экспорт из модуля WebAssembly, ознакомьтесь с разделами [Использование JavaScript API WebAssembly](/ru/docs/WebAssembly/Using_the_JavaScript_API), и [Понимание текстового формата WebAssembly](/ru/docs/WebAssembly/Understanding_the_text_format). ## Используя XMLHttpRequest @@ -104,4 +107,5 @@ request.onload = function () { }; ``` -> **Примечание:** вы можете увидеть пример этого в действии в [xhr-wasm.html](https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html). +> [!NOTE] +> Можно увидеть пример этого в действии в [xhr-wasm.html](https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html). diff --git a/files/ru/webassembly/rust_to_wasm/index.md b/files/ru/webassembly/rust_to_wasm/index.md index a7a4ae0a656550..e819029576984d 100644 --- a/files/ru/webassembly/rust_to_wasm/index.md +++ b/files/ru/webassembly/rust_to_wasm/index.md @@ -26,7 +26,8 @@ slug: WebAssembly/Rust_to_Wasm Чтобы установить Rust, посетите [Install Rust](https://www.rust-lang.org/install.html) страницу и проследуйте всем инструкциям. Так вы установите тулзу, называемую "rustup", которая позволит вам управлять несколькими версиями Rust. По умолчанию, она устанавливает последний стабильный релиз Rust, который вы будете использовать для стандартной разработки на Rust. Rustup устанавливает `rustc`, компилятор Rust, вместе с `cargo`, Rust-овским пакетным менеджером, `rust-std`, стандартной библиотекой Rust, и несколькими вспомогательными доками — `rust-docs`. -> **Примечание:** Обратите внимание на пост-установочную заметку о необходимости добавить cargo `bin` директорию в список `PATH`. Она должна быть добавлена автоматически, но вам нужно будет перезапустить терминал, чтобы изменения вступили в силу. +> [!NOTE] +> Обратите внимание на пост-установочную заметку о необходимости добавить cargo `bin` директорию в список `PATH`. Она должна быть добавлена автоматически, но вам нужно будет перезапустить терминал, чтобы изменения вступили в силу. ### wasm-pack diff --git a/files/ru/webassembly/text_format_to_wasm/index.md b/files/ru/webassembly/text_format_to_wasm/index.md index a60d60952c903b..aa076b3b5d7bbd 100644 --- a/files/ru/webassembly/text_format_to_wasm/index.md +++ b/files/ru/webassembly/text_format_to_wasm/index.md @@ -9,7 +9,8 @@ l10n: WebAssembly имеет текстовое представление на основе S-выражений, которое представляет собой промежуточную форму, предназначенную для отображения в текстовых редакторах, средствах разработки браузеров и т. д. В этой статье кратко объясняется, как это работает и как использовать доступные инструменты для преобразования файлов из текстового формата в двоичный формат `.wasm` сборки. -> **Примечание:** Файлы текстового формата обычно сохраняются с расширением `.wat`. Исторически так же использовалось расширение `.wast`, однако, теперь оно применяется для языка сценариев, используемого тестами WebAssembly. +> [!NOTE] +> Файлы текстового формата обычно сохраняются с расширением `.wat`. Исторически так же использовалось расширение `.wast`, однако, теперь оно применяется для языка сценариев, используемого тестами WebAssembly. ## Пример текстового формата @@ -42,7 +43,8 @@ WebAssembly имеет текстовое представление на осн Это преобразует исходный текстовый код в файл с именем `simple.wasm`, который содержит собранный двоичный код `.wasm`. -> **Примечание:** Вы также можете преобразовать сборку обратно в текстовое представление при помощи утилиты wasm2wat, например, `wasm2wat simple.wasm -o text.wat`. +> [!NOTE] +> Также можно преобразовать сборку обратно в текстовое представление при помощи утилиты wasm2wat, например, `wasm2wat simple.wasm -o text.wat`. ## Просмотр файлов сборки diff --git a/files/ru/webassembly/understanding_the_text_format/index.md b/files/ru/webassembly/understanding_the_text_format/index.md index 62bd6f75490449..7349c8ddbdcfd6 100644 --- a/files/ru/webassembly/understanding_the_text_format/index.md +++ b/files/ru/webassembly/understanding_the_text_format/index.md @@ -7,7 +7,8 @@ slug: WebAssembly/Understanding_the_text_format Чтобы люди могли читать и редактировать код WebAssembly, существует текстовое представление двоичного формата wasm. Это промежуточная форма, предназначенная для отображения в текстовых редакторах, средствах разработки браузеров и т. д. В этой статье объясняется, как работает этот текстовый формат с точки зрения синтаксиса, как он связан с байт-кодом, который он представляет и оболочками объектов wasm в JavaScript. -> **Примечание:** Ознакомление с данной статьёй может оказаться излишним, если вы веб-разработчик, который просто хочет загрузить модуль wasm на страницу и использовать его в своём коде (см. [Использование WebAssembly JavaScript API](/ru/docs/WebAssembly/Using_the_JavaScript_API)). Эта статья будет наиболее полезной, если вы хотите написать несколько модулей wasm для оптимизации производительности вашей библиотеки JavaScript или создать свой собственный компилятор WebAssembly. +> [!NOTE] +> Ознакомление с данной статьёй может оказаться излишним, если вы веб-разработчик, который просто хочет загрузить модуль wasm на страницу и использовать его в своём коде (см. [Использование WebAssembly JavaScript API](/ru/docs/WebAssembly/Using_the_JavaScript_API)). Эта статья будет наиболее полезной, если вы хотите написать несколько модулей wasm для оптимизации производительности вашей библиотеки JavaScript или создать свой собственный компилятор WebAssembly. ## S-выражения @@ -176,7 +177,8 @@ WebAssembly.instantiateStreaming(fetch("add.wasm")).then((obj) => { }); ``` -> **Примечание:** вы можете найти этот пример на GitHub в файле [add.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html) (смотрите также это [вживую](https://mdn.github.io/webassembly-examples/understanding-text-format/add.html)). Также смотрите {{jsxref("WebAssembly.instantiateStreaming()")}} для получения более подробной информации о функции создания экземпляра модуля. +> [!NOTE] +> Этот пример можно найти на GitHub в файле [add.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html) (смотрите также это [вживую](https://mdn.github.io/webassembly-examples/understanding-text-format/add.html)). Также смотрите {{jsxref("WebAssembly.instantiateStreaming()")}} для получения более подробной информации о функции создания экземпляра модуля. ## Изучение основ @@ -196,7 +198,8 @@ WebAssembly.instantiateStreaming(fetch("add.wasm")).then((obj) => { i32.add)) ``` -> **Примечание:** Инструкция `i32.const` создаёт 32-разрядное целое число и помещает его в стек. Вы можете поменять `i32` на любой другой доступный тип данных и изменить значение на любое другое (здесь мы установили значение `42`). +> [!NOTE] +> Инструкция `i32.const` создаёт 32-разрядное целое число и помещает его в стек. Вы можете поменять `i32` на любой другой доступный тип данных и изменить значение на любое другое (здесь мы установили значение `42`). В этом примере обратите внимание на секцию объявления экспорта `(export “getAnswerPlus1”)`, которая находится сразу после объявления второй функции `func`. Это сокращённый способ объявления, совмещённый с именем функции, которую мы хотим экспортировать. @@ -214,7 +217,8 @@ WebAssembly.instantiateStreaming(fetch("call.wasm")).then((obj) => { }); ``` -> **Примечание:** вы можете найти этот пример на GitHub как [call.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/call.html) (смотрите также [вживую](https://mdn.github.io/webassembly-examples/understanding-text-format/call.html)). Ещё посмотрите [wasm-utils.js](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) для метода `fetchAndInstantiate()`. +> [!NOTE] +> Этот пример можно найти на GitHub в [call.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/call.html) (смотрите также [вживую](https://mdn.github.io/webassembly-examples/understanding-text-format/call.html)). Ещё посмотрите [wasm-utils.js](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) для метода `fetchAndInstantiate()`. ### Импорт функций из JavaScript @@ -254,7 +258,8 @@ WebAssembly.instantiateStreaming(fetch("logger.wasm"), importObject).then( ); ``` -> **Примечание:** Этот пример можно найти на GitHub в файле [logger.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html) (смотрите также [вживую](https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html)). +> [!NOTE] +> Этот пример можно найти на GitHub в файле [logger.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html) (смотрите также [вживую](https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html)). ### Определение глобальных переменных WebAssembly @@ -333,7 +338,8 @@ function consoleLogString(offset, length) { call $log)) ``` -> **Примечание:** Обратите внимание, что двойная точка с запятой (`;;`) позволяет оставлять комментарии в файлах WebAssembly. +> [!NOTE] +> Обратите внимание, что двойная точка с запятой (`;;`) позволяет оставлять комментарии в файлах WebAssembly. Теперь из JavaScript мы можем создать и передать объект памяти размером в 1 страницу. Результатом работы этого кода будет вывод "Hi" в консоль: @@ -349,7 +355,8 @@ WebAssembly.instantiateStreaming(fetch("logger2.wasm"), importObject).then( ); ``` -> **Примечание:** вы можете найти полный исходный код на GitHub в файле [logger2.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html) (также смотрите это [вживую](https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html)). +> [!NOTE] +> Этот пример можно найти на GitHub в файле [logger2.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html) (также смотрите это [вживую](https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html)). ### Таблицы WebAssembly @@ -388,7 +395,8 @@ WebAssembly.instantiateStreaming(fetch("logger2.wasm"), importObject).then( - Секция `elem` - это список функций, на которые ссылается таблица, в том порядке, в котором они указаны. Здесь можно перечислить любое количество функций, включая их дубликаты. - Значение `(i32.const 0)` внутри секции `elem` является смещением - его необходимо объявить в начале секции и указать, по какому индексу в таблице ссылок начинают заполняться ссылки на функции. Здесь мы указали 0, а размер таблицы указали как 2 (см. выше), поэтому мы можем заполнить две ссылки на индексы 0 и 1. Если бы мы захотели записать наши ссылки со смещением в 1, то нам нужно было бы написать `(i32.const 1)`, а размер таблицы должен был быть равен 3. -> **Примечание:** Неинициализированным элементам присваивается значение вызова по умолчанию. +> [!NOTE] +> Неинициализированным элементам присваивается значение вызова по умолчанию. В JavaScript эквивалентный код для создания такого экземпляра таблицы ссылок будет выглядеть примерно так: @@ -466,9 +474,11 @@ WebAssembly.instantiateStreaming(fetch("wasm-table.wasm")).then((obj) => { }); ``` -> **Примечание:** Этот пример можно найти на GitHub в файле [wasm-table.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html) (смотрите это также [вживую](https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html)) +> [!NOTE] +> Этот пример можно найти на GitHub в файле [wasm-table.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html) (смотрите это также [вживую](https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html)) -> **Примечание:** Как и в случае с памятью, таблицы также можно создавать из кода JavaScript (см. [`WebAssembly.Table()`](/ru/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table)). +> [!NOTE] +> Как и в случае с памятью, таблицы также можно создавать из кода JavaScript (см. [`WebAssembly.Table()`](/ru/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table)). ### Изменяющиеся таблицы и динамическое связывание @@ -517,7 +527,8 @@ WebAssembly.instantiateStreaming(fetch("wasm-table.wasm")).then((obj) => { 4. В последней части функции создаётся константа со значением `0`, затем вызывается функция с этим индексом (`0`) из таблицы. Это будет функция `shared0func` модуля `shared0.wat`, которая ранее была размещена там с помощью секции `elem`. 5. При вызове shared0func загружает число `42`, которые мы сохранили в памяти, с помощью ранее указанной инструкции `i32.store` в модуле `shared1.wat`. -> **Примечание:** Вышеприведённые выражения неявно извлекают значения из стека, но вместо этого вы можете объявить их явно в вызовах инструкций, например: +> [!NOTE] +> Вышеприведённые выражения неявно извлекают значения из стека, но вместо этого вы можете объявить их явно в вызовах инструкций, например: > > ``` > (i32.store (i32.const 0) (i32.const 42)) @@ -544,7 +555,8 @@ Promise.all([ Каждый из компилируемых модулей может импортировать общие объекты памяти и таблицы. Таким образом, они могут совместно использовать одну и ту же линейную память и таблицу ссылок. -> **Примечание:** Этот пример можно найти на GitHub в файле [shared-address-space.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html) (смотрите это также [вживую](https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html)). +> [!NOTE] +> Этот пример можно найти на GitHub в файле [shared-address-space.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html) (смотрите это также [вживую](https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html)). ## Резюме diff --git a/files/ru/webassembly/using_the_javascript_api/index.md b/files/ru/webassembly/using_the_javascript_api/index.md index 3002656008a437..14c024db28a0f8 100644 --- a/files/ru/webassembly/using_the_javascript_api/index.md +++ b/files/ru/webassembly/using_the_javascript_api/index.md @@ -7,13 +7,15 @@ slug: WebAssembly/Using_the_JavaScript_API Если вы уже [компилировали модуль из другого языка, используя такие инструменты как Emscripten](/ru/docs/WebAssembly/C_to_wasm), или загружали и запускали код, то следующим шагом будет углублённое изучение возможностей WebAssembly JavaScript API. Эта статья даст необходимые знания по этому вопросу. -> **Примечание:** Если вы незнакомы с фундаментальными понятиями, упомянутыми в этой статье, и вам нужны дополнительные объяснения, то вам нужно сначала прочитать про [Основы WebAssembly](/ru/docs/WebAssembly/Concepts). +> [!NOTE] +> Если вы незнакомы с фундаментальными понятиями, упомянутыми в этой статье, и вам нужны дополнительные объяснения, то вам нужно сначала прочитать про [Основы WebAssembly](/ru/docs/WebAssembly/Concepts). ## Несколько простых примеров Давайте запустим несколько примеров, которые объяснят как использовать WebAssembly JavaScript API, и как использовать его для загрузки wasm-модуля в web-странице. -> **Примечание:** вы можете найти примеры кода в нашем репозитории [webassembly-examples](https://github.com/mdn/webassembly-examples) на GitHub. +> [!NOTE] +> Примеры кода можно найти в нашем репозитории [webassembly-examples](https://github.com/mdn/webassembly-examples) на GitHub. ### Подготовка примера @@ -53,7 +55,8 @@ WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then( В конце этого действия мы вызываем нашу экспортированную из WebAssembly-функцию `exported_func`, которая в свою очередь вызывает нашу импортированную JavaScript-функцию `imported_func`, которая выводит в консоль значение (42), что хранится внутри экземпляра модуля WebAssembly. Если вы сейчас сохраните пример кода и загрузите его в браузер, который поддерживает WebAssembly, вы увидите это в действии! -> **Примечание:** Этот замысловатый и запутанный пример почти ничего не делает, но он служит иллюстрацией того, что можно одновременно использовать WebAssembly-код и JavaScript-код в ваших приложениях. Как мы утверждали ранее, технология WebAssembly не призвана заменить JavaScript. Вместо этого две технологии могут работать вместе, усиливая преимущества каждой стороны. +> [!NOTE] +> Этот замысловатый и запутанный пример почти ничего не делает, но он служит иллюстрацией того, что можно одновременно использовать WebAssembly-код и JavaScript-код в ваших приложениях. Как мы утверждали ранее, технология WebAssembly не призвана заменить JavaScript. Вместо этого две технологии могут работать вместе, усиливая преимущества каждой стороны. ### Загрузка wasm-модуля без потока @@ -124,7 +127,8 @@ memory.grow(1); При превышении максимального значения, указанного при создании объекта памяти, будет выброшено исключение {{jsxref("WebAssembly.RangeError")}}. Движок использует предоставленные верхние границы для резервирования памяти заранее, что делает расширение памяти более эффективным. -> **Примечание:** Так как размер объекта {{domxref("ArrayBuffer")}} неизменен, после успешного вызова метода {{jsxref("Memory.prototype.grow()")}} свойство buffer объекта памяти будет возвращать уже новый объект {{domxref("ArrayBuffer")}} (с новым размером в свойстве byteLength) и любые предыдущие объекты ArrayBuffer станут в некотором роде "отсоединёнными", или отключёнными от низкоуровневой памяти, к которой они ранее относились. +> [!NOTE] +> Так как размер объекта {{domxref("ArrayBuffer")}} неизменен, после успешного вызова метода {{jsxref("Memory.prototype.grow()")}} свойство buffer объекта памяти будет возвращать уже новый объект {{domxref("ArrayBuffer")}} (с новым размером в свойстве byteLength) и любые предыдущие объекты ArrayBuffer станут в некотором роде "отсоединёнными", или отключёнными от низкоуровневой памяти, к которой они ранее относились. Подобно функциям, диапазоны линейной памяти могут быть импортированы или определены внутри модуля. Также, модуль имеет возможность экспортировать свою память. Это означает, что JavaScript-код может получить доступ к объекту памяти WebAssembly либо c помощью создания нового объекта через конструктор `WebAssembly.Memory` и передачи его в импортируемый объект, либо с помощью получения объекта памяти через экспортируемый объект (через [`Instance.prototype.exports`](/ru/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports)). @@ -134,7 +138,8 @@ memory.grow(1); 1. Скопируйте файл [memory.wasm](https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/memory.wasm) в локальную директорию в которой вы работаете. - > **Примечание:** вы можете увидеть текстовое представление модуля в файле [memory.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.wat). + > [!NOTE] + > Текстовое представление модуля можно увидеть в файле [memory.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.wat). 2. Откройте ваш файл `memory.html` и добавьте следующий код снизу вашего основного скрипта для загрузки, компилирования и создания экземпляра wasm-модуля: @@ -166,7 +171,8 @@ memory.grow(1); - Он позволяет JavaScript-коду получать и создать начальное содержание памяти перед или одновременно с компиляцией модуля. - Он позволяет импортировать один объект памяти во множество экземпляров модулей, что является ключевым элементом для реализации динамического связывания в WebAssembly. -> **Примечание:** вы можете найти полную демонстрацию в файле [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) ([см. её также вживую](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)) — эта версия использует функцию [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js). +> [!NOTE] +> Полную демонстрацию можно найти в файле [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) ([см. её также вживую](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)) — эта версия использует функцию [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js). ## Таблицы @@ -186,7 +192,8 @@ memory.grow(1); 1. Сделайте локальную копию файла [table.wasm](https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/table.wasm) в новой директории. - > **Примечание:** вы можете посмотреть текстовое представление модуля в файле [table.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat). + > [!NOTE] + > Текстовое представление модуля можно посмотреть в файле [table.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat). 2. Создайте новую копию нашего [HTML шаблона](https://github.com/mdn/webassembly-examples/blob/master/template/template.html) в той же директории и назовите его table.html. 3. Как и раньше загрузите, компилируйте, и создайте экземпляр вашего wasm-модуля, добавив следующий код в {{htmlelement("script")}} элемент в тело документа: @@ -209,7 +216,8 @@ memory.grow(1); Этот код получает доступ к каждой ссылке на функцию, которая размещена в таблице, после чего вызывает её и выводит хранимое значение в консоль. Обратите внимание, что каждая ссылка на функцию получена с помощью вызова метода [`Table.prototype.get()`](/ru/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get), после чего мы добавили пару круглых скобок для вызова самой функции. -> **Примечание:** вы можете найти нашу полную демонстрацию в файле [table.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html) (см. её также [вживую](https://mdn.github.io/webassembly-examples/js-api-examples/table.html)) — эта версия использует функцию [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js). +> [!NOTE] +> Полную демонстрацию можно посмотреть в файле [table.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html) (см. её также [вживую](https://mdn.github.io/webassembly-examples/js-api-examples/table.html)) — эта версия использует функцию [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js). ## Глобальные переменные @@ -265,7 +273,8 @@ WebAssembly.instantiateStreaming(fetch("global.wasm"), { js: { global } }).then( ); ``` -> **Примечание:** вы можете увидеть этот пример вживую на [GitHub](https://mdn.github.io/webassembly-examples/js-api-examples/global.html); смотрите также [исходники](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html). +> [!NOTE] +> Этот пример вживую можно увидеть на [GitHub](https://mdn.github.io/webassembly-examples/js-api-examples/global.html); смотрите также [исходники](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html). ## Множественность