diff options
author | Alexey Istomin <webistomin@gmail.com> | 2021-03-20 18:37:44 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-03-20 18:37:44 +0300 |
commit | 841aae260382e2bf5ebb44d765d8c7301d27caab (patch) | |
tree | 81a92c25f6dc02e5f119131785d721db79fc3455 /files/ru/webassembly | |
parent | 730fea852ff827ca034fe17c84288c95d270ec92 (diff) | |
download | translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.gz translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.bz2 translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.zip |
Restore "ё" letter in Russian translation (#239)
* docs(ru): restore ё letter
* docs(ru): resolve conflicts
* refactor(idea): remove ide folder
Diffstat (limited to 'files/ru/webassembly')
-rw-r--r-- | files/ru/webassembly/c_to_wasm/index.html | 20 | ||||
-rw-r--r-- | files/ru/webassembly/concepts/index.html | 22 | ||||
-rw-r--r-- | files/ru/webassembly/exported_functions/index.html | 12 | ||||
-rw-r--r-- | files/ru/webassembly/index.html | 12 | ||||
-rw-r--r-- | files/ru/webassembly/loading_and_running/index.html | 2 | ||||
-rw-r--r-- | files/ru/webassembly/rust_to_wasm/index.html | 34 | ||||
-rw-r--r-- | files/ru/webassembly/understanding_the_text_format/index.html | 52 | ||||
-rw-r--r-- | files/ru/webassembly/using_the_javascript_api/index.html | 28 |
8 files changed, 91 insertions, 91 deletions
diff --git a/files/ru/webassembly/c_to_wasm/index.html b/files/ru/webassembly/c_to_wasm/index.html index 7f47e01433..06a835effe 100644 --- a/files/ru/webassembly/c_to_wasm/index.html +++ b/files/ru/webassembly/c_to_wasm/index.html @@ -47,7 +47,7 @@ int main(int argc, char ** argv) { <p>Рассмотрим параметры, которые мы передали компилятору:</p> <ul> - <li><code>-s WASM=1</code> — Указывает, что мы хотим получить wasm модуль. Если не использовать этот параметр, по умолчанию Emscripten просто создает <a href="http://asmjs.org/">asm.js</a>;</li> + <li><code>-s WASM=1</code> — Указывает, что мы хотим получить wasm модуль. Если не использовать этот параметр, по умолчанию Emscripten просто создаёт <a href="http://asmjs.org/">asm.js</a>;</li> <li><code>-o hello.html</code> — Указывает, что мы хотим, чтобы Emscripten сгенерировал HTML-страницу <code>hello.html</code> запускающую наш код, а также сам модуль wasm и код JavaScript который позволит использовать модуль в веб-среде.</li> </ul> @@ -61,9 +61,9 @@ int main(int argc, char ** argv) { <h3 id="Запуск_вашего_примера">Запуск вашего примера</h3> -<p>Теперь, все что нужно чтобы запустить полученный <code>hello.html</code> в браузере, это поддержка WebAssembly. Он включен по умолчанию в Firefox 52+, Chrome 57+ и последних версиях Opera. Также вы можете использовать модули WebAssembly в Firefox 47+, включив флаг <code>javascript.options.wasm</code> в <em>about:config</em>, или в Chrome 51+ и Opera 38+ перейдя в <em>chrome://flags</em> и включив флаг <em>Experimental WebAssembly.</em></p> +<p>Теперь, все что нужно чтобы запустить полученный <code>hello.html</code> в браузере, это поддержка WebAssembly. Он включён по умолчанию в Firefox 52+, Chrome 57+ и последних версиях Opera. Также вы можете использовать модули WebAssembly в Firefox 47+, включив флаг <code>javascript.options.wasm</code> в <em>about:config</em>, или в Chrome 51+ и Opera 38+ перейдя в <em>chrome://flags</em> и включив флаг <em>Experimental WebAssembly.</em></p> -<p>Если все работает как планировалось, вы должны увидеть надпись "Hello world" на открывшейся веб-странице и в JavaScript консоли вашего браузера. Поздравляем, вы только что скомпилировали программу на Си в WebAssembly и запустили ее в своем браузере!</p> +<p>Если все работает как планировалось, вы должны увидеть надпись "Hello world" на открывшейся веб-странице и в JavaScript консоли вашего браузера. Поздравляем, вы только что скомпилировали программу на Си в WebAssembly и запустили её в своём браузере!</p> <div class="note"> <p><strong>Примечание</strong>: На самом деле, если просто открыть полученный <code>hello.html</code>, то ничего работать не будет. Подразумевается что все файлы находятся на веб-сервере и вы запускаете страницу через <code>localhost/hello.html</code>. Для этих целей можно использовать отладочный веб-сервер Emscripten. Чтобы его запустить, откройте терминал, перейдите в каталог, в котором находятся ваши файлы и выполните команду <code>emrun hello.html</code></p> @@ -100,7 +100,7 @@ int main(int argc, char ** argv) { </ul> </li> <li> - <p>Теперь давайте запустим этот пример. Команда, указанная выше, сгенерирует файл <code>hello2.html</code>, который будет иметь тоже содержание что и шаблон, но с некоторым кодом, добавленным в процесс загрузки сгенерированного wasm, запускающим его и т.д. Откройте его в своем браузере, и вы увидите тот же результат, что и прошлом примере.</p> + <p>Теперь давайте запустим этот пример. Команда, указанная выше, сгенерирует файл <code>hello2.html</code>, который будет иметь тоже содержание что и шаблон, но с некоторым кодом, добавленным в процесс загрузки сгенерированного wasm, запускающим его и т.д. Откройте его в своём браузере, и вы увидите тот же результат, что и прошлом примере.</p> </li> </ol> @@ -108,9 +108,9 @@ int main(int argc, char ** argv) { <p><strong>Примечание</strong>: Вы можете указать компилятору создавать только JavaScript кода, без HTML, используя внутри флага <code>-o</code>, <code>.js</code> вместо <code>.html</code> для формата выходного файла, например <code>emcc -o hello2.js hello2.c -O3 -s WASM=1</code>. После этого вы должны создать свой собственный HTML файл с нуля. Однако так делать не рекомендуется — Emscripten требуется большое количество связывающего кода для обработки операций выделения памяти, утечек памяти и других проблем, которые уже включены в предоставляемый шаблон. Намного легче использовать уже готовое решение, чем создавать свои собственные версии самому.</p> </div> -<h3 id="Вызов_пользовательской_функции_определенной_в_Си">Вызов пользовательской функции, определенной в Си</h3> +<h3 id="Вызов_пользовательской_функции_определённой_в_Си">Вызов пользовательской функции, определённой в Си</h3> -<p>Если у вас есть функция определенная в коде на Си, которую вы хотите по необходимости вызывать из JavaScript, то вы можете использовать для этого функцию <code>ccall()</code> из Emscripten, и объявление <code>EMSCRIPTEN_KEEPALIVE</code> которое добавит вашу функцию в список экспортируемых функций (см. <a href="https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html#why-do-functions-in-my-c-c-source-code-vanish-when-i-compile-to-javascript-and-or-i-get-no-functions-to-process">Почему функции в моем коде исчезают после компиляции и/или я получаю сообщение «Нет функций для обработки»</a>). Давайте посмотрим, как это работает.</p> +<p>Если у вас есть функция определённая в коде на Си, которую вы хотите по необходимости вызывать из JavaScript, то вы можете использовать для этого функцию <code>ccall()</code> из Emscripten, и объявление <code>EMSCRIPTEN_KEEPALIVE</code> которое добавит вашу функцию в список экспортируемых функций (см. <a href="https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html#why-do-functions-in-my-c-c-source-code-vanish-when-i-compile-to-javascript-and-or-i-get-no-functions-to-process">Почему функции в моем коде исчезают после компиляции и/или я получаю сообщение «Нет функций для обработки»</a>). Давайте посмотрим, как это работает.</p> <ol> <li> @@ -138,19 +138,19 @@ void EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv) { <p>По умолчанию, код созданный Emscripten, всегда просто вызывает функцию <code>main()</code> , а остальные неиспользуемые функции удаляются. Добавьте определение <code>EMSCRIPTEN_KEEPALIVE</code> перед именем функции чтобы этого не происходило. Также вы должны подключить библиотеку <code>emscripten.h</code> для использования <code>EMSCRIPTEN_KEEPALIVE</code>.</p> <div class="note"> - <p><strong>Примечание</strong>: Мы используем блоки <code>#ifdef</code> чтобы, пример оставался рабочим если вы попытаетесь использовать C++ код. Из за различия в правилах преобразования имен между Си и Си++, этот код может сломаться, но мы написали его так, что функция будет рассматриваться как функция Си даже если вы будете использовать Си++.</p> + <p><strong>Примечание</strong>: Мы используем блоки <code>#ifdef</code> чтобы, пример оставался рабочим если вы попытаетесь использовать C++ код. Из за различия в правилах преобразования имён между Си и Си++, этот код может сломаться, но мы написали его так, что функция будет рассматриваться как функция Си даже если вы будете использовать Си++.</p> </div> </li> <li> - <p>Теперь добавьте <code>html_template/shell_minimal.html</code> в ваш новый каталог, просто для удобства. В настоящем проекте стоит размещать его в специально определенный каталог.</p> + <p>Теперь добавьте <code>html_template/shell_minimal.html</code> в ваш новый каталог, просто для удобства. В настоящем проекте стоит размещать его в специально определённый каталог.</p> </li> <li> - <p>Теперь снова займемся этапом компиляции. Внутри вашего последнего каталога, используя терминал, скомпилируйте ваш Си код следующей командой. (Обратите внимание что при компиляции обязательно нужно использовать опцию NO_EXIT_RUNTIME, иначе после выполнения функции <code>main()</code>, рабочий цикл будет завершен. Это приведет, например, к вызову функции atexits и дальше будет невозможно использовать наш скомпилированный код. Другими словами это необходимо для правильной эмуляции Си.)</p> + <p>Теперь снова займёмся этапом компиляции. Внутри вашего последнего каталога, используя терминал, скомпилируйте ваш Си код следующей командой. (Обратите внимание что при компиляции обязательно нужно использовать опцию NO_EXIT_RUNTIME, иначе после выполнения функции <code>main()</code>, рабочий цикл будет завершён. Это приведёт, например, к вызову функции atexits и дальше будет невозможно использовать наш скомпилированный код. Другими словами это необходимо для правильной эмуляции Си.)</p> <pre class="brush: bash">emcc -o hello3.html hello3.c -O3 -s WASM=1 --shell-file html_template/shell_minimal.html -s NO_EXIT_RUNTIME=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall"]'</pre> </li> <li> - <p>Если вы снова запустите пример в своем браузере, вы увидите тоже самое что и до этого!</p> + <p>Если вы снова запустите пример в своём браузере, вы увидите тоже самое что и до этого!</p> </li> <li> <p>Теперь нам нужно вызвать нашу новую функцию <code>myFunction()</code> из JavaScript. Прежде всего, добавьте {{htmlelement("button")}} как показано ниже, чуть выше первого открывающего тега <code><script type='text/javascript'></code>.</p> diff --git a/files/ru/webassembly/concepts/index.html b/files/ru/webassembly/concepts/index.html index dde3fc40a4..2f1caad232 100644 --- a/files/ru/webassembly/concepts/index.html +++ b/files/ru/webassembly/concepts/index.html @@ -5,7 +5,7 @@ translation_of: WebAssembly/Concepts --- <div>{{WebAssemblySidebar}}</div> -<p class="summary">В этой статье объясняются концепции, лежащие в основе работы технологии WebAssembly, включая ее цели, проблемы, которые она решает, и то, как она работает в движке рендеринга веб-браузера.</p> +<p class="summary">В этой статье объясняются концепции, лежащие в основе работы технологии WebAssembly, включая её цели, проблемы, которые она решает, и то, как она работает в движке рендеринга веб-браузера.</p> <h2 id="Что_такое_WebAssembly">Что такое WebAssembly?</h2> @@ -17,11 +17,11 @@ translation_of: WebAssembly/Concepts <h2 id="Цели_WebAssembly">Цели WebAssembly</h2> -<p>Технология WebAssembly создается как открытый стандарт внутри <a href="https://www.w3.org/community/webassembly/">W3C WebAssembly Community Group</a> со следующими целями:</p> +<p>Технология WebAssembly создаётся как открытый стандарт внутри <a href="https://www.w3.org/community/webassembly/">W3C WebAssembly Community Group</a> со следующими целями:</p> <ul> <li>Быть быстрым, эффективным и переносимым - код WebAssembly может выполняться практически на естественной скорости на разных платформах, используя преимущества <a href="http://webassembly.org/docs/portability/#assumptions-for-efficient-execution">аппаратных возможностей</a>.</li> - <li>Быть читаемым и отлаживаемым - WebAssembly - это низкоуровневый ассемблерный язык, но он имеет читабельный текстовый формат (спецификация для которого еще дорабатывается), который позволяет писать, просматривать и отлаживать код вручную. </li> + <li>Быть читаемым и отлаживаемым - WebAssembly - это низкоуровневый ассемблерный язык, но он имеет читабельный текстовый формат (спецификация для которого ещё дорабатывается), который позволяет писать, просматривать и отлаживать код вручную. </li> <li>Поддерживать безопасность - код WebAssembly предназначен для запуска в безопасной, изолированной среде выполнения. Как и другой веб-код, он будет соблюдать политики безопасности браузера.</li> <li>Не разрушать текущий веб - технология WebAssembly разработана так, что она прекрасно сочетается с другими веб-технологиями и поддерживает обратную совместимость.</li> </ul> @@ -41,7 +41,7 @@ translation_of: WebAssembly/Concepts <p>Исторически ВМ могла загружать только JavaScript. Раньше нас это вполне устраивало, поскольку JavaScript достаточно мощный, чтобы решать большинство проблем, с которыми мы сталкивались в интернете. Однако мы столкнулись с проблемами производительности, когда попытались использовать JavaScript для более нагруженных сценариев использования, таких как 3D-игры, виртуальная и дополненная реальность, компьютерное зрение, редактирование изображений / видео и в ряде других применений, которые требуют повышенной производительности (см. <a href="http://webassembly.org/docs/use-cases/">варианты использования WebAssembly</a> где описано больше идей).</p> -<p>Кроме того, длительность загрузки, анализа и компиляции очень больших приложений JavaScript может быть непомерно высокой. Мобильные и другие ограниченные в ресурсах платформы могут еще более понизить производительность.</p> +<p>Кроме того, длительность загрузки, анализа и компиляции очень больших приложений JavaScript может быть непомерно высокой. Мобильные и другие ограниченные в ресурсах платформы могут ещё более понизить производительность.</p> <p>Язык WebAssembly отличается от языка JavaScript, но он не предназначен для его замены. Он предназначен для дополнения и работы вместе с JavaScript, что позволяет веб-разработчикам использовать преимущества обоих языков:</p> @@ -59,19 +59,19 @@ translation_of: WebAssembly/Concepts <p>Есть несколько ключевых понятий, необходимых для понимания того, как WebAssembly работает в браузере. Все эти понятия отражены 1:1 в <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly JavaScript API</a>.</p> <ul> - <li><strong>Модуль</strong>: Представляет двоичный файл WebAssembly, который был скомпилирован браузером в исполняемый машинный код. Модуль не имеет состояния и, таким образом, как <a href="/en-US/docs/Web/API/Blob">Blob</a>, может быть явным образом разделен между windows и workers (через <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>). В модуле есть объявление импорта и экспорта точно такое же, как и в модуле ES2015.</li> + <li><strong>Модуль</strong>: Представляет двоичный файл WebAssembly, который был скомпилирован браузером в исполняемый машинный код. Модуль не имеет состояния и, таким образом, как <a href="/en-US/docs/Web/API/Blob">Blob</a>, может быть явным образом разделён между windows и workers (через <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>). В модуле есть объявление импорта и экспорта точно такое же, как и в модуле ES2015.</li> <li><strong>Память</strong>: Массив ArrayBuffer изменяемого размера, который содержит линейный массив байтов, считываемых и записываемых инструкциями низкоуровневого доступа к памяти в WebAssembly. </li> <li><strong>Таблица</strong>: Типизированный массив ссылок изменяемого размера (например, для функций), которые не могут быть размещены в памяти в виде байтов (по соображениям безопасности и переносимости).</li> - <li><strong>Экземпляр</strong>: Модуль в паре со своим состоянием, которое он использует во время выполнения, включая память, таблицу и набор импортируемых значений. Экземпляр модуля похож на модуль ES2015, который был загружен в определенную глобальную переменную с определенным набором импортов.</li> + <li><strong>Экземпляр</strong>: Модуль в паре со своим состоянием, которое он использует во время выполнения, включая память, таблицу и набор импортируемых значений. Экземпляр модуля похож на модуль ES2015, который был загружен в определённую глобальную переменную с определённым набором импортов.</li> </ul> -<p>JavaScript API предоставляет разработчикам возможность создавать модули, объекты памяти, таблицы и экземпляры модулей. Получив экземпляр модуля WebAssembly, код JavaScript может синхронно вызывать его экспорты, которые представляются как обычные функции JavaScript. Любые функции JavaScript также могут синхронно вызываться кодом WebAssembly путем передачи этих функций в качестве импорта в экземпляр модуля WebAssembly.</p> +<p>JavaScript API предоставляет разработчикам возможность создавать модули, объекты памяти, таблицы и экземпляры модулей. Получив экземпляр модуля WebAssembly, код JavaScript может синхронно вызывать его экспорты, которые представляются как обычные функции JavaScript. Любые функции JavaScript также могут синхронно вызываться кодом WebAssembly путём передачи этих функций в качестве импорта в экземпляр модуля WebAssembly.</p> <p>Поскольку JavaScript полностью контролирует загрузку, компиляцию и запуск кода WebAssembly, разработчики JavaScript могут рассматривать технологию WebAssembly как расширение JavaScript для эффективной генерации высокопроизводительных функций.</p> <p>В будущем модули WebAssembly будут загружаться так же, как и <a href="https://github.com/WebAssembly/design/issues/1087">модули ES2015</a> (с использованием <code><script type='module'></code>), что означает, что JavaScript сможет извлекать, компилировать и импортировать модуль WebAssembly так же легко, как модуль ES2015.</p> -<h2 id="Как_я_могу_использовать_WebAssembly_в_своем_приложении">Как я могу использовать WebAssembly в своем приложении?</h2> +<h2 id="Как_я_могу_использовать_WebAssembly_в_своём_приложении">Как я могу использовать WebAssembly в своём приложении?</h2> <p>Выше мы говорили о низкоуровневых примитивах, которые WebAssembly добавляет к веб-платформе: двоичный формат для кода и API для его загрузки и запуска. Теперь давайте поговорим о том, как мы можем использовать эти примитивы на практике.</p> @@ -87,7 +87,7 @@ translation_of: WebAssembly/Concepts <h3 id="Портирование_из_CC">Портирование из C/C++</h3> -<p>Из множества вариантов создания кода WASM есть два наиболее популярных - это онлайн-сборщик wasm или <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>. Существует еще несколько вариантов сборки WASM, таких как:</p> +<p>Из множества вариантов создания кода WASM есть два наиболее популярных - это онлайн-сборщик wasm или <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>. Существует ещё несколько вариантов сборки WASM, таких как:</p> <ul> <li><a href="https://wasdk.github.io/WasmFiddle/">WasmFiddle</a></li> @@ -104,9 +104,9 @@ translation_of: WebAssembly/Concepts <p>В двух словах, процесс работает следующим образом:</p> <ol> - <li>Сначала Emscripten передает код C/C++ в clang + LLVM - набор инструментов компилятора C/C++ с открытым исходным кодом, который поставляется, например, как часть XCode для OSX.</li> + <li>Сначала Emscripten передаёт код C/C++ в clang + LLVM - набор инструментов компилятора C/C++ с открытым исходным кодом, который поставляется, например, как часть XCode для OSX.</li> <li>Emscripten преобразует скомпилированный результат clang + LLVM в двоичный файл .wasm. </li> - <li>Сам по себе код WebAssembly в настоящее время не может напрямую обращаться к DOM; он может вызывать только JavaScript, передавая целочисленные и числа с плавающей точкой примитивные типы данных. Таким образом, чтобы получить доступ к любому Web-API, WebAssembly модуль должен обращаться к JavaScript, который затем вызывает Web-API. Поэтому Emscripten создает необходимый для этого связующий код HTML и JavaScript.</li> + <li>Сам по себе код WebAssembly в настоящее время не может напрямую обращаться к DOM; он может вызывать только JavaScript, передавая целочисленные и числа с плавающей точкой примитивные типы данных. Таким образом, чтобы получить доступ к любому Web-API, WebAssembly модуль должен обращаться к JavaScript, который затем вызывает Web-API. Поэтому Emscripten создаёт необходимый для этого связующий код HTML и JavaScript.</li> </ol> <div class="note"> diff --git a/files/ru/webassembly/exported_functions/index.html b/files/ru/webassembly/exported_functions/index.html index c586422de3..d46ae2ad53 100644 --- a/files/ru/webassembly/exported_functions/index.html +++ b/files/ru/webassembly/exported_functions/index.html @@ -14,7 +14,7 @@ translation_of: WebAssembly/Exported_functions <h2 id="Экспортированные…_что">Экспортированные… что?</h2> -<p>Экспортированные функции это просто JavaScript обертки, которые вызывают функции модуля WebAssembly. При их использовании происходит неявное преобразование типов аргументов функции в типы, с которыми может работать WebAssembly (например, преобразование number в int32). Дальше эти аргументы передаются функции вашего модуля и она вызывается. Результат также преобразовывается и возвращается в JavaScript.</p> +<p>Экспортированные функции это просто JavaScript обёртки, которые вызывают функции модуля WebAssembly. При их использовании происходит неявное преобразование типов аргументов функции в типы, с которыми может работать WebAssembly (например, преобразование number в int32). Дальше эти аргументы передаются функции вашего модуля и она вызывается. Результат также преобразовывается и возвращается в JavaScript.</p> <p>Вы можете получить список экспортированных функций двумя способами:</p> @@ -23,11 +23,11 @@ translation_of: WebAssembly/Exported_functions <li>Через <code><a href="/en-US/docs/WebAssembly/API/Instance/exports">Instance.exports</a></code> существующего экземпляра модуля.</li> </ul> -<p>В любом случае вы получаете одну и туже обертку функции вашего модуля. С точки зрения JavaScript, все экспортированные функции wasm являются функциями JavaScript, но они инкапсулированы экземпляром модуля wasm, и имеют только ограниченный способ доступа к ним.</p> +<p>В любом случае вы получаете одну и туже обёртку функции вашего модуля. С точки зрения JavaScript, все экспортированные функции wasm являются функциями JavaScript, но они инкапсулированы экземпляром модуля wasm, и имеют только ограниченный способ доступа к ним.</p> <h2 id="Пример">Пример</h2> -<p>Давайте посмотрим на пример, чтобы прояснить ситуацию (вы можете найти его на GitHub как <a href="https://github.com/mdn/webassembly-examples/blob/master/other-examples/table-set.html">table-set.html</a> или <a href="https://mdn.github.io/webassembly-examples/other-examples/table-set.html">запустить в своем браузере</a>, и посмотреть <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat">текстовое представление модуля wasm</a>):</p> +<p>Давайте посмотрим на пример, чтобы прояснить ситуацию (вы можете найти его на GitHub как <a href="https://github.com/mdn/webassembly-examples/blob/master/other-examples/table-set.html">table-set.html</a> или <a href="https://mdn.github.io/webassembly-examples/other-examples/table-set.html">запустить в своём браузере</a>, и посмотреть <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat">текстовое представление модуля wasm</a>):</p> <pre class="brush: js">var otherTable = new WebAssembly.Table({ element: "anyfunc", initial: 2 }); @@ -42,7 +42,7 @@ WebAssembly.instantiateStreaming(fetch('table.wasm')) console.log(otherTable.get(1)()); });</pre> -<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Здесь мы создаем таблицу </span></font>otherTable</code> из JavaScript используя конструктор {{jsxref("WebAssembly.Table")}}, после этого мы загружаем модуль <code>table.wasm</code> при помощи функции {{jsxref("WebAssembly.instantiateStreaming()")}}.</p> +<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Здесь мы создаём таблицу </span></font>otherTable</code> из JavaScript используя конструктор {{jsxref("WebAssembly.Table")}}, после этого мы загружаем модуль <code>table.wasm</code> при помощи функции {{jsxref("WebAssembly.instantiateStreaming()")}}.</p> <p>Затем мы получаем объект содержащий все функции, экспортированные из экземпляра модуля. Извлекаем ссылки на эти функции через <code><a href="/en-US/docs/WebAssembly/API/Table/get">tbl.get()</a>,</code> вызываем их и выводим результат работы в консоль. Затем мы используем <code>set()</code> чтобы таблица <code>otherTable</code> содержала ссылки на те же функции, что и таблица <code>tbl</code>.</p> @@ -52,7 +52,7 @@ WebAssembly.instantiateStreaming(fetch('table.wasm')) <p>В предыдущем примере возвращаемое значение каждого вызова <code><a href="/en-US/docs/WebAssembly/API/Table/get">Table.prototype.get()</a></code> является экспортированной функцией WebAssembly — это именно то, о чем мы говорили.</p> -<p>Стоит заметить что помимо того что они являются обертками для функций WebAssembly, это обычные функции JavaScript. Если вы загрузите приведенный выше пример в <a href="/en-US/docs/WebAssembly#Browser_compatibility">браузере с поддержкой WebAssembly</a>, и запустите следующие строки в консоли:</p> +<p>Стоит заметить что помимо того что они являются обёртками для функций WebAssembly, это обычные функции JavaScript. Если вы загрузите приведённый выше пример в <a href="/en-US/docs/WebAssembly#Browser_compatibility">браузере с поддержкой WebAssembly</a>, и запустите следующие строки в консоли:</p> <pre class="brush: js">var testFunc = otherTable.get(0); typeof testFunc;</pre> @@ -70,5 +70,5 @@ typeof testFunc;</pre> <ul> <li>Их свойство <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length">length</a> это количество аргументов указанных в сигнатуре wasm функции.</li> <li>Их свойство <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name">name</a> является результатом вызова <code>toString()</code> индекса функции в модуле wasm.</li> - <li>Если вы попытаетесь вызвать экспортированную функцию wasm, которая принимает или возвращает значение типа i64, то это приведет к ошибке, поскольку в настоящее время JavaScript не имеет точного способа представления i64. Однако в дальнейшем это может измениться - новый тип int64 рассматривается для будущих стандартов, который затем может использоваться wasm.</li> + <li>Если вы попытаетесь вызвать экспортированную функцию wasm, которая принимает или возвращает значение типа i64, то это приведёт к ошибке, поскольку в настоящее время JavaScript не имеет точного способа представления i64. Однако в дальнейшем это может измениться - новый тип int64 рассматривается для будущих стандартов, который затем может использоваться wasm.</li> </ul> diff --git a/files/ru/webassembly/index.html b/files/ru/webassembly/index.html index 84e0c56b57..0d5c9c5d30 100644 --- a/files/ru/webassembly/index.html +++ b/files/ru/webassembly/index.html @@ -13,7 +13,7 @@ translation_of: WebAssembly <p dir="ltr">WebAssembly разработан для дополнения JavaScript – используя WebAssembly JavaScript API вы можете загружать модули WebAssembly в приложения JavaScript и обеспечивать взаимодействие между ними, используя общие функции. Такой подход позволяет вам получить производительность и мощность WebAssembly, а также выразительность и гибкость JavaScript в ваших приложениях, даже если вы не знаете как писать код WebAssembly, а используете готовые модули.</p> -<p dir="ltr">И что еще лучше, так это то, что WebAssembly разрабатывается как веб-стандарт <a href="https://www.w3.org/wasm/">W3C WebAssembly Working Group</a> и <a href="https://www.w3.org/community/webassembly/">Community Group</a> при активном участии основных производителей браузеров.</p> +<p dir="ltr">И что ещё лучше, так это то, что WebAssembly разрабатывается как веб-стандарт <a href="https://www.w3.org/wasm/">W3C WebAssembly Working Group</a> и <a href="https://www.w3.org/community/webassembly/">Community Group</a> при активном участии основных производителей браузеров.</p> <div class="row topicpage-table"> <div class="section"> @@ -46,7 +46,7 @@ translation_of: WebAssembly <dl> <dt>{{jsxref("Global_objects/WebAssembly", "WebAssembly")}}</dt> - <dd>Этот объект является пространством имен для всех функций, связанных с WebAssembly.</dd> + <dd>Этот объект является пространством имён для всех функций, связанных с WebAssembly.</dd> <dt>{{jsxref("Global_objects/WebAssembly/Module", "WebAssembly.Module()")}}</dt> <dd>Объект <code>WebAssembly.Module</code> содержит не контролируемый WebAssembly код, который уже скомпилирован браузером и может эффективно использоваться совместно с<a href="/en-US/docs/Web/API/Worker/postMessage"> Workers</a>, <a href="/en-US/docs/WebAssembly/Caching_modules">кешироваться в IndexedDB</a>, и иметь несколько экземпляров.</dd> <dt>{{jsxref("Global_objects/WebAssembly/Instance", "WebAssembly.Instance()")}}</dt> @@ -58,11 +58,11 @@ translation_of: WebAssembly <dt>{{jsxref("Global_objects/WebAssembly/Table", "WebAssembly.Table()")}}</dt> <dd><code>WebAssembly.Table</code> объект является изменяемым типизированным массивом значений, таких как ссылки на функции, которые доступны <code>Instance</code>.</dd> <dt>{{jsxref("WebAssembly.CompileError()")}}</dt> - <dd>Создает новый WebAssembly <code>CompileError</code> объект.</dd> + <dd>Создаёт новый WebAssembly <code>CompileError</code> объект.</dd> <dt>{{jsxref("WebAssembly.LinkError()")}}</dt> - <dd>Создает новый WebAssembly <code>LinkError</code> объект.</dd> + <dd>Создаёт новый WebAssembly <code>LinkError</code> объект.</dd> <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt> - <dd>Создает новый WebAssembly <code>RuntimeError</code> объект.</dd> + <dd>Создаёт новый WebAssembly <code>RuntimeError</code> объект.</dd> </dl> </div> </div> @@ -96,7 +96,7 @@ translation_of: WebAssembly <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> <div> -<div class="hidden">Эта таблица совместимости автоматически создается на основе структурированных данных. Если вы хотите внести свой вклад, пожалуйста, посетите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на внесение изменений.</div> +<div class="hidden">Эта таблица совместимости автоматически создаётся на основе структурированных данных. Если вы хотите внести свой вклад, пожалуйста, посетите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на внесение изменений.</div> <p>{{Compat("javascript.builtins.WebAssembly")}}</p> </div> diff --git a/files/ru/webassembly/loading_and_running/index.html b/files/ru/webassembly/loading_and_running/index.html index a796cc7a30..20460d2e40 100644 --- a/files/ru/webassembly/loading_and_running/index.html +++ b/files/ru/webassembly/loading_and_running/index.html @@ -15,7 +15,7 @@ translation_of: WebAssembly/Loading_and_running <h2 id="Какие_есть_варианты">Какие есть варианты?</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">WebAssembly еще не интегрирована с </span></span> <code><script type='module'></code> <span class="tlid-translation translation" lang="ru"><span title="">или ES2015 </span><span class="alt-edited" title="">оператором</span></span> <code>import</code>, <span class="tlid-translation translation" lang="ru"><span title="">поэтому не существует пути, позволяющего использовать модули загрузки браузера для использования импорта.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">WebAssembly ещё не интегрирована с </span></span> <code><script type='module'></code> <span class="tlid-translation translation" lang="ru"><span title="">или ES2015 </span><span class="alt-edited" title="">оператором</span></span> <code>import</code>, <span class="tlid-translation translation" lang="ru"><span title="">поэтому не существует пути, позволяющего использовать модули загрузки браузера для использования импорта.</span></span></p> <p><span class="tlid-translation translation" lang="ru"><span title="">Старые методы</span></span> {{jsxref("WebAssembly.compile")}}/{{jsxref("WebAssembly.instantiate")}} <span class="tlid-translation translation" lang="ru"><span title="">требуют создания </span></span>{{domxref("ArrayBuffer")}}, <span class="tlid-translation translation" lang="ru"><span title="">содержащего двоичный файл модуля WebAssembly после загрузки необработанных байтов, а затем скомпилировать/создать его экземпляр.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">Это аналог</span></span> <code>new Function(string)</code>,<span class="tlid-translation translation" lang="ru"><span title=""> за исключением того, что мы заменяем строку символов (исходный код JavaScript) буфером байтов массива (исходный код WebAssembly).</span></span></p> diff --git a/files/ru/webassembly/rust_to_wasm/index.html b/files/ru/webassembly/rust_to_wasm/index.html index 629987ff09..381d424bf0 100644 --- a/files/ru/webassembly/rust_to_wasm/index.html +++ b/files/ru/webassembly/rust_to_wasm/index.html @@ -22,7 +22,7 @@ translation_of: WebAssembly/Rust_to_wasm <h2 id="Настройка_окружения_Rust">Настройка окружения Rust</h2> -<p>Давайте пройдемся по всем пунктам, необходимым для настройки нашего окружения.</p> +<p>Давайте пройдёмся по всем пунктам, необходимым для настройки нашего окружения.</p> <h3 id="Установка_Rust">Установка Rust</h3> @@ -55,12 +55,12 @@ Password: Email: (this IS public) you@example.com </code></pre> -<p>Вам понадобится ввести свое пользовательское имя, пароль и email. Если все получится, вы увидите:</p> +<p>Вам понадобится ввести своё пользовательское имя, пароль и email. Если все получится, вы увидите:</p> <pre class="brush: bash notranslate"><code>Logged in as yournpmusername on https://registry.npmjs.org/. </code></pre> -<p>Если что-то пойдет не так, свяжитесь с командой npm, чтобы разобраться.</p> +<p>Если что-то пойдёт не так, свяжитесь с командой npm, чтобы разобраться.</p> <h2 id="Создание_WebAssembly_npm-пакета">Создание WebAssembly npm-пакета</h2> @@ -111,7 +111,7 @@ pub fn greet(name: &str) { } </code></pre> -<p>Это содержимое нашего проекта на Rust. У него есть три основные части, давайте пройдемся по ним по очереди. Мы дадим здесь обобщенное пояснение и поясним некоторые детали; чтобы узнать больше о Rust, пожалуйста, просмотрите бесплатную online-книгу <a href="https://doc.rust-lang.org/book/">The Rust Programming Language</a>.</p> +<p>Это содержимое нашего проекта на Rust. У него есть три основные части, давайте пройдёмся по ним по очереди. Мы дадим здесь обобщённое пояснение и поясним некоторые детали; чтобы узнать больше о Rust, пожалуйста, просмотрите бесплатную online-книгу <a href="https://doc.rust-lang.org/book/">The Rust Programming Language</a>.</p> <h4 id="Использование_wasm-bindgen_для_коммуникации_между_Rust_и_JavaScript">Использование <code>wasm-bindgen</code> для коммуникации между Rust и JavaScript</h4> @@ -144,13 +144,13 @@ extern { } </code></pre> -<p>Частичка внутри <code>#[]</code> называется "атрибутом", и она кое-как модифицирует следующее за ней утверждение. В нашем случае, это утверждение <code>extern</code>, которое говорит Rust-у, что мы хотим вызвать некоторую функцию, определенную во внешнем пространстве. Атрибут говорит: "wasm-bindgen знает, как найти эти функции".</p> +<p>Частичка внутри <code>#[]</code> называется "атрибутом", и она кое-как модифицирует следующее за ней утверждение. В нашем случае, это утверждение <code>extern</code>, которое говорит Rust-у, что мы хотим вызвать некоторую функцию, определённую во внешнем пространстве. Атрибут говорит: "wasm-bindgen знает, как найти эти функции".</p> <p>Третья строка это имя функции, написанной на Rust. Она говорит: "функция <code>alert</code> принимает один аргумент, строку с именем <code>s</code>."</p> <p>У вас, возможно, есть предположение, что это за функция, и, возможно, ваше предположение верное: это функция<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/alert"> <code>alert</code>, предоставляемая JavaScript</a>! Мы будем вызывать эту функцию в следующей секции.</p> -<p>Когда бы вы не захотели вызвать новую функцию JavaScript, вы можете написать ее здесь, и <code>wasm-bindgen</code> позаботится о том, чтобы настроить все для вас. Пока еще поддерживается не все, но мы работаем над этим! Пожалуйста, <a href="https://github.com/rustwasm/wasm-bindgen/issues/new">сообщайте о проблемах</a>, если что-то было упущено.</p> +<p>Когда бы вы не захотели вызвать новую функцию JavaScript, вы можете написать её здесь, и <code>wasm-bindgen</code> позаботится о том, чтобы настроить все для вас. Пока ещё поддерживается не все, но мы работаем над этим! Пожалуйста, <a href="https://github.com/rustwasm/wasm-bindgen/issues/new">сообщайте о проблемах</a>, если что-то было упущено.</p> <h4 id="Создание_функций_Rust_который_может_вызывать_JavaScript">Создание функций Rust, который может вызывать JavaScript</h4> @@ -162,15 +162,15 @@ pub fn greet(name: &str) { } </code></pre> -<p>Еще раз, мы видим <code>#[wasm_bindgen]</code> атрибут. В этом случае, он модифицирует не блок <code>extern</code>, а <code>fn</code>; это значит, что мы хотим, чтобы эта функция на Rust была доступна для JavaScript. Прямо противоположно <code>extern</code>: это не те функции, которые нам нужны, а те, что мы предоставляем миру!</p> +<p>Ещё раз, мы видим <code>#[wasm_bindgen]</code> атрибут. В этом случае, он модифицирует не блок <code>extern</code>, а <code>fn</code>; это значит, что мы хотим, чтобы эта функция на Rust была доступна для JavaScript. Прямо противоположно <code>extern</code>: это не те функции, которые нам нужны, а те, что мы предоставляем миру!</p> -<p>Наша функция называется <code>greet</code>, и она принимает один аргумент, строку (пишется <code>&str</code>), <code>name</code>. Затем она вызывает функцию <code>alert</code>, которую мы запросили в блоке <code>extern</code> выше. Она передает вызов макросу <code>format!</code>, который позволяет нам соединить строки.</p> +<p>Наша функция называется <code>greet</code>, и она принимает один аргумент, строку (пишется <code>&str</code>), <code>name</code>. Затем она вызывает функцию <code>alert</code>, которую мы запросили в блоке <code>extern</code> выше. Она передаёт вызов макросу <code>format!</code>, который позволяет нам соединить строки.</p> -<p><code>format!</code> принимает два аргумента в нашем случае: форматируемую строку и переменную, которую должен в нее поместить. Форматируемая строка это <code>"Hello, {}!"</code> часть. Она содержит <code>{}</code>, куда будет вставлена переменная. Переменная, которую мы передаем, это <code>name</code>, аргумент функции, так что если мы вызовем <code>greet("Steve")</code>, то увидим <code>"Hello, Steve!".</code></p> +<p><code>format!</code> принимает два аргумента в нашем случае: форматируемую строку и переменную, которую должен в неё поместить. Форматируемая строка это <code>"Hello, {}!"</code> часть. Она содержит <code>{}</code>, куда будет вставлена переменная. Переменная, которую мы передаём, это <code>name</code>, аргумент функции, так что если мы вызовем <code>greet("Steve")</code>, то увидим <code>"Hello, Steve!".</code></p> -<p>Все это передается в <code>alert()</code>, так что когда мы вызовем функцию, мы увидим алерт с "Hello, Steve!" внутри него!</p> +<p>Все это передаётся в <code>alert()</code>, так что когда мы вызовем функцию, мы увидим алерт с "Hello, Steve!" внутри него!</p> -<p>Теперь, когда наша библиотека написана, давайте соберем ее.</p> +<p>Теперь, когда наша библиотека написана, давайте соберём ее.</p> <h3 id="Компиляция_кода_в_WebAssembly">Компиляция кода в WebAssembly</h3> @@ -199,7 +199,7 @@ wasm-bindgen = "0.2" <h3 id="Сборка_пакета">Сборка пакета</h3> -<p>Теперь, когда мы все установили, давайте соберем проект! Введите это в терминале:</p> +<p>Теперь, когда мы все установили, давайте соберём проект! Введите это в терминале:</p> <pre class="brush: bash notranslate"><code class="shell language-shell">$ wasm-pack build --scope mynpmusername </code></pre> @@ -209,8 +209,8 @@ wasm-bindgen = "0.2" <ol> <li>Компилирует ваш Rust-код в WebAssembly.</li> <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Запускает </span></font>wasm-bindgen</code> с этим WebAssembly, генерируя JavaScript файл, который оборачивает WebAssembly файл в модуль. который может понять npm.</li> - <li>Создает папку <code>pkg</code>, куда перемещает этот JavaScript файл и ваш код WebAssembly.</li> - <li>Читает ваш <code>Cargo.toml</code> и создает эквивалентный <code>package.json</code>.</li> + <li>Создаёт папку <code>pkg</code>, куда перемещает этот JavaScript файл и ваш код WebAssembly.</li> + <li>Читает ваш <code>Cargo.toml</code> и создаёт эквивалентный <code>package.json</code>.</li> <li>Копирует ваш <code>README.md</code> (если есть) в пакет.</li> </ol> @@ -232,7 +232,7 @@ $ npm publish --access=public <h2 id="Использование_пакета_в_web">Использование пакета в web</h2> -<p>Давайте создадим сайт, который будет использовать наш пакет! Многие пользуются пакетами npm с помощью разных сборщиков, и мы будем использовать один из них, <code>webpack</code>, в этом руководстве. Он только немного более усложненный, но описывает более реалистичный вариант использования.</p> +<p>Давайте создадим сайт, который будет использовать наш пакет! Многие пользуются пакетами npm с помощью разных сборщиков, и мы будем использовать один из них, <code>webpack</code>, в этом руководстве. Он только немного более усложнённый, но описывает более реалистичный вариант использования.</p> <p>Давайте выйдем из нашей папки <code>pkg</code> и создадим новую, <code>site</code>, чтобы попробовать в ней следующее:</p> @@ -258,7 +258,7 @@ $ cd site } </code></pre> -<p>Заметьте, что вам нужно ввести свое пользовательское имя после <code>@</code> в секции зависимостей.</p> +<p>Заметьте, что вам нужно ввести своё пользовательское имя после <code>@</code> в секции зависимостей.</p> <p>Дальше нам нужно сконфигурировать Webpack. Создайте <code>webpack.config.js</code> и введите следующее:</p> @@ -297,7 +297,7 @@ js.then(js => { <p>Заметьте, что вам нужно будет снова ввести ваше имя для npm.</p> -<p>Так мы импортируем наш модуль из папки <code>node_modules</code>. Это не считается лучшей практикой, но это пример, так что пока сойдет. Как только файл загрузится, он вызовет функцию <code>greet</code> из этого модуля, передав <code>"WebAssembly"</code>, как строку. Обратите внимание, что здесь нет ничего особенного, и все же мы вызываем код на Rust! Насколько JavaScript код может судить, это просто обычный модуль.</p> +<p>Так мы импортируем наш модуль из папки <code>node_modules</code>. Это не считается лучшей практикой, но это пример, так что пока сойдёт. Как только файл загрузится, он вызовет функцию <code>greet</code> из этого модуля, передав <code>"WebAssembly"</code>, как строку. Обратите внимание, что здесь нет ничего особенного, и все же мы вызываем код на Rust! Насколько JavaScript код может судить, это просто обычный модуль.</p> <p>Мы закончили! Давайте попробуем:</p> diff --git a/files/ru/webassembly/understanding_the_text_format/index.html b/files/ru/webassembly/understanding_the_text_format/index.html index 38934e21f2..226a873888 100644 --- a/files/ru/webassembly/understanding_the_text_format/index.html +++ b/files/ru/webassembly/understanding_the_text_format/index.html @@ -8,14 +8,14 @@ translation_of: WebAssembly/Understanding_the_text_format <p class="summary">Чтобы люди могли читать и редактировать код WebAssembly, существует текстовое представление двоичного формата wasm. Это промежуточная форма, предназначенная для отображения в текстовых редакторах, средствах разработки браузеров и т. д. В этой статье объясняется, как работает этот текстовый формат с точки зрения синтаксиса, как он связан с байт-кодом, который он представляет и оболочками объектов wasm в JavaScript.</p> <div class="note"> -<p><strong>Примечание</strong>: Ознакомление с данной статьей может оказаться излишним, если вы веб-разработчик, который просто хочет загрузить модуль wasm на страницу и использовать его в своем коде (см. <a href="/ru/docs/WebAssembly/Using_the_JavaScript_API">Использование WebAssembly JavaScript API</a>). Эта статья будет наиболее полезной, если вы хотите написать несколько модулей wasm для оптимизации производительности вашей библиотеки JavaScript или создать свой собственный компилятор WebAssembly.</p> +<p><strong>Примечание</strong>: Ознакомление с данной статьёй может оказаться излишним, если вы веб-разработчик, который просто хочет загрузить модуль wasm на страницу и использовать его в своём коде (см. <a href="/ru/docs/WebAssembly/Using_the_JavaScript_API">Использование WebAssembly JavaScript API</a>). Эта статья будет наиболее полезной, если вы хотите написать несколько модулей wasm для оптимизации производительности вашей библиотеки JavaScript или создать свой собственный компилятор WebAssembly.</p> </div> <h2 id="S-выражения">S-выражения</h2> <p>Как в двоичном, так и в текстовом форматах основным блоком кода в WebAssembly является модуль. В текстовом формате модуль представлен как одно большое S-выражение. S-выражения - это очень старый и очень простой текстовый формат для представления деревьев. И поэтому мы можем думать о модуле как о дереве узлов, которые описывают структуру модуля и его код. В отличие от абстрактного синтаксического дерева в языке программирования, дерево WebAssembly довольно плоское и состоит в основном из списков инструкций.</p> -<p>Во-первых, давайте посмотрим, как выглядит S-выражение. Каждый узел дерева входит в пару круглых скобок - <code>( ... )</code>. Первая метка в скобках сообщает вам, какой это тип узла, за ним следует разделенный пробелами список атрибутов или дочерних узлов. Давайте рассмотрим, что означает следующее S-выражение WebAssembly:</p> +<p>Во-первых, давайте посмотрим, как выглядит S-выражение. Каждый узел дерева входит в пару круглых скобок - <code>( ... )</code>. Первая метка в скобках сообщает вам, какой это тип узла, за ним следует разделённый пробелами список атрибутов или дочерних узлов. Давайте рассмотрим, что означает следующее S-выражение WebAssembly:</p> <pre>(module (memory 1) (func))</pre> @@ -23,7 +23,7 @@ translation_of: WebAssembly/Understanding_the_text_format <h3 id="Самый_простой_модуль">Самый простой модуль</h3> -<p>Давайте начнем с самого простого модуля wasm.</p> +<p>Давайте начнём с самого простого модуля wasm.</p> <pre>(module)</pre> @@ -44,7 +44,7 @@ translation_of: WebAssembly/Understanding_the_text_format <ul> <li><strong>signature</strong> объявляет, что функция принимает (параметры) и возвращает (возвращаемые значения).</li> - <li><strong>locals</strong> похожи на переменные в JavaScript, но с определенными явными типами.</li> + <li><strong>locals</strong> похожи на переменные в JavaScript, но с определёнными явными типами.</li> <li><strong>body</strong> - это просто линейный список низкоуровневых инструкций.</li> </ul> @@ -101,11 +101,11 @@ translation_of: WebAssembly/Understanding_the_text_format <h2 id="Стековые_машины">Стековые машины</h2> -<p>Прежде чем мы сможем написать тело функции, мы должны поговорить еще о <strong>стековых машинах</strong>. Хотя браузер компилирует wasm-код во что-то более эффективное, выполнение его определяется в терминах стековой машины, где основная идея заключается в том, что каждый тип инструкции получает или помещает определенное количество значений <code>i32</code> / <code>i64</code> / <code>f32</code> / <code>f64</code> в стек или из стека.</p> +<p>Прежде чем мы сможем написать тело функции, мы должны поговорить ещё о <strong>стековых машинах</strong>. Хотя браузер компилирует wasm-код во что-то более эффективное, выполнение его определяется в терминах стековой машины, где основная идея заключается в том, что каждый тип инструкции получает или помещает определённое количество значений <code>i32</code> / <code>i64</code> / <code>f32</code> / <code>f64</code> в стек или из стека.</p> -<p>Например, инструкция <code>get_local</code> предназначена для помещения значения локальной переменной, которое она считала, в стек. А инструкция <code>i32.add</code> получает два значения <code>i32</code> (неявно получает два предыдущих значения, помещенных в стек), вычисляет их сумму и помещает назад в стек результат вычисления <code>i32</code>.</p> +<p>Например, инструкция <code>get_local</code> предназначена для помещения значения локальной переменной, которое она считала, в стек. А инструкция <code>i32.add</code> получает два значения <code>i32</code> (неявно получает два предыдущих значения, помещённых в стек), вычисляет их сумму и помещает назад в стек результат вычисления <code>i32</code>.</p> -<p>Когда вызывается функция, для нее выделяется пустой стек, который постепенно заполняется и очищается при выполнении инструкций в теле функции. Так, например, после выполнения следующей функции:</p> +<p>Когда вызывается функция, для неё выделяется пустой стек, который постепенно заполняется и очищается при выполнении инструкций в теле функции. Так, например, после выполнения следующей функции:</p> <pre>(func (param $p i32) get_local $p @@ -128,7 +128,7 @@ translation_of: WebAssembly/Understanding_the_text_format <p>Эта функция получает два параметра, складывает их вместе и возвращает результат.</p> -<p>Есть еще много инструкций, которые можно поместить в тело функции. Сейчас мы начнем с простых, а далее вы увидите гораздо больше примеров по мере продвижения. Полный список доступных инструкций смотрите в справочнике по <a href="http://webassembly.org/docs/semantics/">семантике webassembly.org</a>.</p> +<p>Есть ещё много инструкций, которые можно поместить в тело функции. Сейчас мы начнём с простых, а далее вы увидите гораздо больше примеров по мере продвижения. Полный список доступных инструкций смотрите в справочнике по <a href="http://webassembly.org/docs/semantics/">семантике webassembly.org</a>.</p> <h3 id="Вызов_функции">Вызов функции</h3> @@ -169,7 +169,7 @@ translation_of: WebAssembly/Understanding_the_text_format <h2 id="Изучение_основ">Изучение основ</h2> -<p>Теперь, когда мы рассмотрели простейшие примеры, давайте перейдем к рассмотрению некоторых более сложных возможностей.</p> +<p>Теперь, когда мы рассмотрели простейшие примеры, давайте перейдём к рассмотрению некоторых более сложных возможностей.</p> <h3 id="Вызов_функций_из_других_функций_в_том_же_модуле">Вызов функций из других функций в том же модуле</h3> @@ -184,10 +184,10 @@ translation_of: WebAssembly/Understanding_the_text_format i32.add))</pre> <div class="note"> -<p><strong>Примечание</strong>: Инструкция <code>i32.const</code> создает 32-разрядное целое число и помещает его в стек. Вы можете поменять <code>i32</code> на любой другой доступный тип данных и изменить значение на любое другое (здесь мы установили значение <code>42</code>).</p> +<p><strong>Примечание</strong>: Инструкция <code>i32.const</code> создаёт 32-разрядное целое число и помещает его в стек. Вы можете поменять <code>i32</code> на любой другой доступный тип данных и изменить значение на любое другое (здесь мы установили значение <code>42</code>).</p> </div> -<p>В этом примере обратите внимание на секцию объявления экспорта <code>(export “getAnswerPlus1”)</code>, которая находится сразу после объявления второй функции <code>func</code>. Это сокращенный способ объявления, совмещенный с именем функции, которую мы хотим экспортировать.</p> +<p>В этом примере обратите внимание на секцию объявления экспорта <code>(export “getAnswerPlus1”)</code>, которая находится сразу после объявления второй функции <code>func</code>. Это сокращённый способ объявления, совмещённый с именем функции, которую мы хотим экспортировать.</p> <p>Функционально это эквивалентно включению отдельного объявления экспорта функции без функции, в любом месте модуля, например:</p> @@ -201,12 +201,12 @@ translation_of: WebAssembly/Understanding_the_text_format });</pre> <div class="note"> -<p><strong>Примечание</strong>: Вы можете найти этот пример на GitHub как <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/call.html">call.html</a> (смотрите также <a href="https://mdn.github.io/webassembly-examples/understanding-text-format/call.html">вживую</a>). Еще посмотрите <a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">wasm-utils.js</a> для метода <code>fetchAndInstantiate()</code>.</p> +<p><strong>Примечание</strong>: Вы можете найти этот пример на GitHub как <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/call.html">call.html</a> (смотрите также <a href="https://mdn.github.io/webassembly-examples/understanding-text-format/call.html">вживую</a>). Ещё посмотрите <a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">wasm-utils.js</a> для метода <code>fetchAndInstantiate()</code>.</p> </div> <h3 id="Импорт_функций_из_JavaScript">Импорт функций из JavaScript</h3> -<p>Мы уже видели JavaScript, вызывающий экспортируемые функции модуля WebAssembly, но как насчет WebAssembly модуля, вызывающего функции JavaScript? WebAssembly не имеет каких либо знаний о внешнем коде JavaScript, но у него есть способ импорта, который может принимать функции из JavaScript или wasm. Давайте посмотрим на пример:</p> +<p>Мы уже видели JavaScript, вызывающий экспортируемые функции модуля WebAssembly, но как насчёт WebAssembly модуля, вызывающего функции JavaScript? WebAssembly не имеет каких либо знаний о внешнем коде JavaScript, но у него есть способ импорта, который может принимать функции из JavaScript или wasm. Давайте посмотрим на пример:</p> <pre>(module (import "console" "log" (func $log (param i32))) @@ -214,13 +214,13 @@ translation_of: WebAssembly/Understanding_the_text_format i32.const 13 call $log))</pre> -<p>В инструкции импорта в модуль WebAssembly определено двухуровневое пространство имен, в котором мы указали импортировать функцию <code>log</code> из модуля <code>console</code>. Вы также можете видеть, что экспортируемая функция <code>logIt</code> вызывает импортированную функцию, используя инструкцию <code>call</code>, о которой мы говорили ранее.</p> +<p>В инструкции импорта в модуль WebAssembly определено двухуровневое пространство имён, в котором мы указали импортировать функцию <code>log</code> из модуля <code>console</code>. Вы также можете видеть, что экспортируемая функция <code>logIt</code> вызывает импортированную функцию, используя инструкцию <code>call</code>, о которой мы говорили ранее.</p> <p>Импортируемые функции аналогичны обычным функциям: они имеют сигнатуру, которую WebAssembly проверяет статически, им присваивается индекс (в место которого можно присвоить имя) и их можно вызвать обычным способом.</p> <p>Функции JavaScript не имеют понятия сигнатуры, поэтому любую функцию JavaScript можно передать независимо от объявленной сигнатуры импорта. Если модуль объявляет импорт, вызывающая сторона (например метод {{jsxref("WebAssembly.instantiate()")}}) должна передать объект импорта, который должен иметь соответствующее свойство.</p> -<p>Для иллюстрации вышесказанного нам нужен объект (назовем его <code>importObject</code>), в котором конечное свойство <code>importObject.console.log</code> должно содержать функцию JavaScript.</p> +<p>Для иллюстрации вышесказанного нам нужен объект (назовём его <code>importObject</code>), в котором конечное свойство <code>importObject.console.log</code> должно содержать функцию JavaScript.</p> <p>Код будет выглядеть следующим образом:</p> @@ -264,16 +264,16 @@ WebAssembly.instantiateStreaming(fetch('logger.wasm'), importObject) <h3 id="Память_WebAssembly">Память WebAssembly</h3> -<p>Приведенный выше пример - довольно ужасная функция ведения журнала: она печатает только одно целое число! Что если мы хотим записать текстовую строку? Для работы со строками и другими более сложными типами данных WebAssembly предоставляет <strong>линейную память</strong>. Согласно технологии WebAssembly, линейная память - это просто большой массив байтов, который со временем может увеличиваться. WebAssembly код содержит ряд инструкций, наподобие <code>i32.load</code> и <code>i32.store</code> для чтения и записи значений из <a href="http://webassembly.org/docs/semantics/#linear-memory">линейной памяти</a>.</p> +<p>Приведённый выше пример - довольно ужасная функция ведения журнала: она печатает только одно целое число! Что если мы хотим записать текстовую строку? Для работы со строками и другими более сложными типами данных WebAssembly предоставляет <strong>линейную память</strong>. Согласно технологии WebAssembly, линейная память - это просто большой массив байтов, который со временем может увеличиваться. WebAssembly код содержит ряд инструкций, наподобие <code>i32.load</code> и <code>i32.store</code> для чтения и записи значений из <a href="http://webassembly.org/docs/semantics/#linear-memory">линейной памяти</a>.</p> <p>Со стороны JavaScript, линейная память как будто находится внутри одного большого (расширяющегося) объекта {{domxref("ArrayBuffer")}}.</p> <p>Таким образом, строка - это просто последовательность байтов где-то внутри этой линейной памяти. Давайте предположим, что мы записали нужную строку байтов в память; как мы передадим эту строку в JavaScript?<br> Ключевым моментом является то, что JavaScript может создавать экземпляры(объекты) линейной памяти WebAssembly через конструктор {{jsxref("WebAssembly.Memory()")}} и получать доступ к существующему экземпляру памяти (в настоящее время вы можете иметь только один экземпляр памяти на экземпляр модуля), используя соответствующие методы экземпляра модуля. Экземпляр памяти имеет свойство <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer">buffer</a></code>, которое возвращает объект <code>ArrayBuffer</code>, предоставляя всю линейную память модуля.</p> -<p>Объекты памяти могут расширятся с помощью метода <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow">Memory.grow()</a></code> из JavaScript. Когда происходит расширение, текущий объект <code>ArrayBuffer</code> не может изменить размер и он отсоединяется. Вместо него создается новый объект <code>ArrayBuffer</code>, указывающий на новую, увеличенную память. Пользуясь этими возможностями можно передать строку в JavaScript, её начальный индекс и её длину в линейной памяти.</p> +<p>Объекты памяти могут расширятся с помощью метода <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow">Memory.grow()</a></code> из JavaScript. Когда происходит расширение, текущий объект <code>ArrayBuffer</code> не может изменить размер и он отсоединяется. Вместо него создаётся новый объект <code>ArrayBuffer</code>, указывающий на новую, увеличенную память. Пользуясь этими возможностями можно передать строку в JavaScript, её начальный индекс и её длину в линейной памяти.</p> -<p>Хотя есть много разных способов кодировать длину строки в самой строке (например, как в строках в C); для простоты здесь мы просто передаем смещение и длину в качестве параметров:</p> +<p>Хотя есть много разных способов кодировать длину строки в самой строке (например, как в строках в C); для простоты здесь мы просто передаём смещение и длину в качестве параметров:</p> <pre>(import "console" "log" (func $log (param i32) (param i32)))</pre> @@ -285,7 +285,7 @@ WebAssembly.instantiateStreaming(fetch('logger.wasm'), importObject) console.log(string); }</pre> -<p>Последний недостающий фрагмент головоломки - это место, где функция <code>consoleLogString</code> получает доступ к памяти (<code>memory</code>) WebAssembly. WebAssembly дает нам здесь много гибкости: либо мы можем создать объект <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory">Memory</a></code> в коде JavaScript и импортировать его в модуль WebAssembly, или мы можем создать его в модуле WebAssembly и затем экспортировать в JavaScript.</p> +<p>Последний недостающий фрагмент головоломки - это место, где функция <code>consoleLogString</code> получает доступ к памяти (<code>memory</code>) WebAssembly. WebAssembly даёт нам здесь много гибкости: либо мы можем создать объект <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory">Memory</a></code> в коде JavaScript и импортировать его в модуль WebAssembly, или мы можем создать его в модуле WebAssembly и затем экспортировать в JavaScript.</p> <p>Для простоты, давайте создадим объект памяти в JavaScript и импортируем его в WebAssembly модуль. Напишем следующее объявление импорта <code>(import</code>):</p> @@ -329,7 +329,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <p>Чтобы завершить обзор текстового формата WebAssembly, давайте рассмотрим самую сложную и запутанную часть WebAssembly - <strong>таблицы</strong>. Таблицы - это массивы ссылок изменяемого размера, доступ к которым можно получить по индексу из кода WebAssembly.</p> -<p>Чтобы понять, зачем нужны таблицы, нам нужно сначала обратить внимание, что инструкция <code>call</code>, которую мы видели ранее (см. {{anch("Вызов функций из других функций в том же модуле")}}), принимает статический индекс функции и может вызывать только определенную функцию. Но что, если вызываемый элемент будет значением, установленным во время выполнения?</p> +<p>Чтобы понять, зачем нужны таблицы, нам нужно сначала обратить внимание, что инструкция <code>call</code>, которую мы видели ранее (см. {{anch("Вызов функций из других функций в том же модуле")}}), принимает статический индекс функции и может вызывать только определённую функцию. Но что, если вызываемый элемент будет значением, установленным во время выполнения?</p> <ul> <li> В JavaScript это делается постоянно: функции являются ссылочными значениями.</li> @@ -339,7 +339,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <p>Для того чтобы сделать это в WebAssembly нужен был отдельный тип инструкции вызова. Поэтому мы создали инструкцию <code>call_indirect</code>, которая принимает операнд динамической функции. Проблема в том, что типы данных, которые мы должны использовать в операндах в WebAssembly, в настоящее время такие: <code>i32</code> / <code>i64</code> / <code>f32</code> / <code>f64</code>.</p> -<p>Для WebAssembly можно было бы создать тип инструкции вызова <code>anyfunc</code> («любой», потому что эта инструкция смогла вызвать функции любой сигнатуры), но, к сожалению, операнд этого типа не может быть сохранен в линейной памяти по соображениям безопасности. Линейная память представляет содержимое хранимых значений в виде незащищенных байтов, и это позволяет содержимому wasm произвольно читать и изменять незащищенные адреса функций, что недопустимо для веб.</p> +<p>Для WebAssembly можно было бы создать тип инструкции вызова <code>anyfunc</code> («любой», потому что эта инструкция смогла вызвать функции любой сигнатуры), но, к сожалению, операнд этого типа не может быть сохранён в линейной памяти по соображениям безопасности. Линейная память представляет содержимое хранимых значений в виде незащищённых байтов, и это позволяет содержимому wasm произвольно читать и изменять незащищённые адреса функций, что недопустимо для веб.</p> <p>Решением стало следующее. Хранить ссылки на функции в таблице и передавать вместо них индексы таблицы, которые являются просто значениями <code>i32</code>. Поэтому операндом инструкции <code>call_indirect</code> может выступить простое значение индекса <code>i32</code>.</p> @@ -413,7 +413,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <p>На языке высокого уровня, таком как JavaScript эти же действия вы можете представить в виде манипуляций с массивом (или, скорее, с объектом), содержащим функции. Псевдокод будет выглядеть примерно так: <code>tbl[i]()</code>.</p> -<p>Итак, вернемся к проверке типов. Так как в коде WebAssembly проверяются типы, а атрибут <code>anyfunc</code> означает “сигнатура любой функции", мы должны предоставить предполагаемую сигнатуру в месте вызова, поэтому мы включаем тип с именем <code>$return_i32</code>, чтобы сообщить программе, что ожидается функция, возвращающая значение с типом <code>i32</code>. Если вызываемая функция не имеет соответствующей сигнатуры (скажем, вместо нее возвращается <code>f32</code>), выбросится исключение {{jsxref("WebAssembly.RuntimeError")}}.</p> +<p>Итак, вернёмся к проверке типов. Так как в коде WebAssembly проверяются типы, а атрибут <code>anyfunc</code> означает “сигнатура любой функции", мы должны предоставить предполагаемую сигнатуру в месте вызова, поэтому мы включаем тип с именем <code>$return_i32</code>, чтобы сообщить программе, что ожидается функция, возвращающая значение с типом <code>i32</code>. Если вызываемая функция не имеет соответствующей сигнатуры (скажем, вместо неё возвращается <code>f32</code>), выбросится исключение {{jsxref("WebAssembly.RuntimeError")}}.</p> <p>Так как инструкция <code>call_indirect</code> связывается с таблицей, с которой мы вызываем функцию? Ответ заключается в том, что на данный момент для каждого экземпляра модуля разрешена только одна таблица. Поэтому инструкция <code>call_indirect</code> выполняет неявный вызов именно из этой таблицы. В будущем, когда будет разрешено использование нескольких таблиц, нам нужно будет указать идентификатор таблицы, например так:</p> @@ -453,7 +453,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <h3 id="Изменяющиеся_таблицы_и_динамическое_связывание">Изменяющиеся таблицы и динамическое связывание</h3> -<p>Поскольку JavaScript имеет полный доступ к ссылкам на функции, объект таблицы может быть изменен из кода JavaScript с помощью методов <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow">grow()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">get()</a></code> и <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set">set()</a></code>. Когда WebAssembly получит <a href="http://webassembly.org/docs/gc/">ссылочные типы</a>, код WebAssembly сможет изменять таблицы самостоятельно с помощью инструкций <code>get_elem</code> / <code>set_elem</code>.</p> +<p>Поскольку JavaScript имеет полный доступ к ссылкам на функции, объект таблицы может быть изменён из кода JavaScript с помощью методов <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow">grow()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">get()</a></code> и <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set">set()</a></code>. Когда WebAssembly получит <a href="http://webassembly.org/docs/gc/">ссылочные типы</a>, код WebAssembly сможет изменять таблицы самостоятельно с помощью инструкций <code>get_elem</code> / <code>set_elem</code>.</p> <p>Поскольку таблицы являются изменяемыми, их можно использовать для реализации сложных схем <a href="http://webassembly.org/docs/dynamic-linking">динамического связывания</a> во время загрузки и во время выполнения. Когда программа динамически связана, несколько экземпляров могут совместно использовать линейную память и таблицу ссылок. Это похоже на поведение в обычном приложении где несколько скомпилированных <code>.dll</code> совместно используют адресное пространство одного процесса.</p> @@ -490,14 +490,14 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <ol> <li>Функция <code>shared0func</code> определена в <code>shared0.wat</code> и сохраняется в нашей импортированной таблице.</li> - <li>Эта функция создает константу, содержащую значение <code>0</code>, затем инструкция <code>i32.load</code> получает значение из импортированной памяти по предоставленному константой индексу. Предоставленный индекс равен <code>0</code>. Как и другие подобные инструкции, <code>i32.load</code> неявно получает предоставленное значение из стека. Итак, <code>shared0func</code> загружает и возвращает значение, хранящееся в индексе памяти <code>0</code>.</li> + <li>Эта функция создаёт константу, содержащую значение <code>0</code>, затем инструкция <code>i32.load</code> получает значение из импортированной памяти по предоставленному константой индексу. Предоставленный индекс равен <code>0</code>. Как и другие подобные инструкции, <code>i32.load</code> неявно получает предоставленное значение из стека. Итак, <code>shared0func</code> загружает и возвращает значение, хранящееся в индексе памяти <code>0</code>.</li> <li>В <code>shared1.wat</code> мы экспортируем функцию с именем <code>doIt</code> - эта функция размещает в стеке две константы, содержащие значения <code>0</code> и <code>42</code>. Затем она вызывает инструкцию <code>i32.store</code> для сохранения предоставленного значения по предоставленному индексу в импортированной памяти. Опять же, инструкция неявно получает эти значения из стека. Поэтому в результате <code>doIt</code> сохраняет значение <code>42</code> в индексе памяти <code>0</code>.</li> - <li>В последней части функции создается константа со значением <code>0</code>, затем вызывается функция с этим индексом (<code>0</code>) из таблицы. Это будет функция <code>shared0func</code> модуля <code>shared0.wat</code>, которая ранее была размещена там с помощью секции <code>elem</code>.</li> + <li>В последней части функции создаётся константа со значением <code>0</code>, затем вызывается функция с этим индексом (<code>0</code>) из таблицы. Это будет функция <code>shared0func</code> модуля <code>shared0.wat</code>, которая ранее была размещена там с помощью секции <code>elem</code>.</li> <li>При вызове shared0func загружает число <code>42</code>, которые мы сохранили в памяти, с помощью ранее указанной инструкции <code>i32.store</code> в модуле <code>shared1.wat</code>.</li> </ol> <div class="note"> -<p><strong>Примечание</strong>: Вышеприведенные выражения неявно извлекают значения из стека, но вместо этого вы можете объявить их явно в вызовах инструкций, например:</p> +<p><strong>Примечание</strong>: Вышеприведённые выражения неявно извлекают значения из стека, но вместо этого вы можете объявить их явно в вызовах инструкций, например:</p> <pre>(i32.store (i32.const 0) (i32.const 42)) (call_indirect (type $void_to_i32) (i32.const 0))</pre> diff --git a/files/ru/webassembly/using_the_javascript_api/index.html b/files/ru/webassembly/using_the_javascript_api/index.html index 21a38cbbc4..ecc973376c 100644 --- a/files/ru/webassembly/using_the_javascript_api/index.html +++ b/files/ru/webassembly/using_the_javascript_api/index.html @@ -9,7 +9,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API --- <div>{{WebAssemblySidebar}}</div> -<p class="summary">Если вы уже <a href="/ru/docs/WebAssembly/C_to_wasm">компилировали модуль из другого языка, используя такие инструменты как Emscripten</a>, или загружали и запускали код, то следующим шагом будет углубленное изучение возможностей WebAssembly JavaScript API. Эта статья даст необходимые знания по этому вопросу.</p> +<p class="summary">Если вы уже <a href="/ru/docs/WebAssembly/C_to_wasm">компилировали модуль из другого языка, используя такие инструменты как Emscripten</a>, или загружали и запускали код, то следующим шагом будет углублённое изучение возможностей WebAssembly JavaScript API. Эта статья даст необходимые знания по этому вопросу.</p> <div class="note"> <p><strong>Примечание</strong>: Если вы незнакомы с фундаментальными понятиями, упомянутыми в этой статье, и вам нужны дополнительные объяснения, то вам нужно сначала прочитать про <a href="/ru/docs/WebAssembly/Concepts">Основы WebAssembly</a>.</p> @@ -26,8 +26,8 @@ translation_of: WebAssembly/Using_the_JavaScript_API <h3 id="Подготовка_примера">Подготовка примера</h3> <ol> - <li>Для начала нам нужен wasm-модуль! Возьмите наш файл <a href="https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/simple.wasm">simple.wasm</a> и сохраните копию в новой директории на своем локальном компьютере.</li> - <li>Далее, давайте создадим в той же директории что и wasm-модуль простой HTML-файл и назовем его <code>index.html</code> (можно использовать <a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">HTML шаблон</a> если вы этого еще не сделали).</li> + <li>Для начала нам нужен wasm-модуль! Возьмите наш файл <a href="https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/simple.wasm">simple.wasm</a> и сохраните копию в новой директории на своём локальном компьютере.</li> + <li>Далее, давайте создадим в той же директории что и wasm-модуль простой HTML-файл и назовём его <code>index.html</code> (можно использовать <a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">HTML шаблон</a> если вы этого ещё не сделали).</li> <li>Теперь, для того чтобы понять что происходит в коде модуля, давайте взглянем на его текстовое представление (которое мы также встречали в <a href="/en-US/docs/WebAssembly/Text_format_to_wasm#A_first_look_at_the_text_format">Перевод из текстового формата WebAssembly в wasm</a>): <pre>(module (func $i (import "imports" "imported_func") (param i32)) @@ -35,7 +35,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API i32.const 42 call $i))</pre> </li> - <li>Во второй строчке вы видите что import имеет двухуровневое пространство имен - внутренняя функция <code>$i</code> импортирована из <code>imports.imported_func</code>. Нам нужно создать это двухуровневое пространство имен в JavaScript-объекте, который будет импортирован в wasm-модуль. Создайте <code><script></script></code> элемент в своем HTML-файле, и добавьте следующий код: + <li>Во второй строчке вы видите что import имеет двухуровневое пространство имён - внутренняя функция <code>$i</code> импортирована из <code>imports.imported_func</code>. Нам нужно создать это двухуровневое пространство имён в JavaScript-объекте, который будет импортирован в wasm-модуль. Создайте <code><script></script></code> элемент в своём HTML-файле, и добавьте следующий код: <pre class="brush: js">var importObject = { imports: { imported_func: arg => console.log(arg) } };</pre> @@ -77,7 +77,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API <h3 id="Просмотр_wasm_в_инструментах_разработчика">Просмотр wasm в инструментах разработчика</h3> -<p>В Firefox 54+, в отладочной панели инструментов разработчика имеется возможность отображения текстового представления любого wasm-кода, включенного в веб-страницу. Для того чтобы просмотреть его, вы можете перейти на отладочную панель и нажать на пункт "wasm://".</p> +<p>В Firefox 54+, в отладочной панели инструментов разработчика имеется возможность отображения текстового представления любого wasm-кода, включённого в веб-страницу. Для того чтобы просмотреть его, вы можете перейти на отладочную панель и нажать на пункт "wasm://".</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15823/wasm-debug.png" style="display: block; height: 317px; margin: 0px auto; width: 1019px;"></p> @@ -93,7 +93,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API <p>Давайте исследуем эту возможность рассмотрев небольшой пример.</p> -<p>Создайте еще одну простую HTML страницу (скопируйте <a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">HTML шаблон</a>) и назовите её <code>memory.html</code>. Добавьте <code><script></script></code> элемент на страницу.</p> +<p>Создайте ещё одну простую HTML страницу (скопируйте <a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">HTML шаблон</a>) и назовите её <code>memory.html</code>. Добавьте <code><script></script></code> элемент на страницу.</p> <ol> <li> @@ -125,7 +125,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API <p>При превышении максимального значения, указанного при создании объекта памяти, будет выброшено исключение {{jsxref("WebAssembly.RangeError")}}. Движок использует предоставленные верхние границы для резервирования памяти заранее, что делает расширение памяти более эффективным.</p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Так как размер объекта {{domxref("ArrayBuffer")}} неизменен, после успешного вызова метода {{jsxref("Memory.prototype.grow()")}} свойство buffer объекта памяти будет возвращать уже новый объект {{domxref("ArrayBuffer")}} (с новым размером в свойстве byteLength) и любые предыдущие объекты ArrayBuffer станут в некотором роде “отсоединенными”, или отключенными от низкоуровневой памяти, к которой они ранее относились.</p> +<p><strong>Примечание</strong>: Так как размер объекта {{domxref("ArrayBuffer")}} неизменен, после успешного вызова метода {{jsxref("Memory.prototype.grow()")}} свойство buffer объекта памяти будет возвращать уже новый объект {{domxref("ArrayBuffer")}} (с новым размером в свойстве byteLength) и любые предыдущие объекты ArrayBuffer станут в некотором роде “отсоединёнными”, или отключёнными от низкоуровневой памяти, к которой они ранее относились.</p> </div> <p>Подобно функциям, диапазоны линейной памяти могут быть импортированы или определены внутри модуля. Также, модуль имеет возможность экспортировать свою память. Это означает, что JavaScript-код может получить доступ к объекту памяти WebAssembly либо c помощью создания нового объекта через конструктор <code>WebAssembly.Memory</code> и передачи его в импортируемый объект, либо с помощью получения объекта памяти через экспортируемый объект (через <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports">Instance.prototype.exports</a></code>).</p> @@ -151,7 +151,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API });</pre> </li> <li> - <p>Так как модуль экспортирует свою память, которая была передана экземпляру этого модуля при его создании, мы можем наполнить ранее импортированный массив прямо в линейной памяти экземпляра модуля (<code>mem</code>), и вызвать экспортированную функцию <code>accumulate()</code> для расчета суммы значений. Добавьте следующий код, в обозначенном месте: </p> + <p>Так как модуль экспортирует свою память, которая была передана экземпляру этого модуля при его создании, мы можем наполнить ранее импортированный массив прямо в линейной памяти экземпляра модуля (<code>mem</code>), и вызвать экспортированную функцию <code>accumulate()</code> для расчёта суммы значений. Добавьте следующий код, в обозначенном месте: </p> <pre class="brush: js">var i32 = new Uint32Array(memory.buffer); @@ -164,7 +164,7 @@ console.log(sum);</pre> </li> </ol> -<p>Обратите внимание на то, что мы создаем представление данных {{domxref("Uint32Array")}} с помощью свойства buffer объекта памяти (<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer">Memory.prototype.buffer</a></code>), а не самого объекта памяти.</p> +<p>Обратите внимание на то, что мы создаём представление данных {{domxref("Uint32Array")}} с помощью свойства buffer объекта памяти (<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer">Memory.prototype.buffer</a></code>), а не самого объекта памяти.</p> <p>Импорт памяти почти такой же как импорт функций, только вместо JavaScript функций передаются объекты памяти. Импорт памяти полезен по двум причинам:</p> @@ -174,14 +174,14 @@ console.log(sum);</pre> </ul> <div class="note"> -<p><strong>Примечание</strong>: Вы можете найти полную демонстрацию в файле <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a> (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">см. ее также вживую</a>) — эта версия использует функцию <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">fetchAndInstantiate()</a></code>.</p> +<p><strong>Примечание</strong>: Вы можете найти полную демонстрацию в файле <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a> (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">см. её также вживую</a>) — эта версия использует функцию <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">fetchAndInstantiate()</a></code>.</p> </div> <h2 id="Таблицы">Таблицы</h2> -<p>Таблица WebAssembly - это расширяемый типизированный массив <a href="https://en.wikipedia.org/wiki/Reference_(computer_science)">ссылок</a>, доступ к которому может быть получен из JavaScript и WebAssembly кода. Так как линейная память предоставляет расширяемый массив незащищенных байт, слишком небезопасно размещать там ссылки, так как для движка ссылка является доверенным значением, чьи байты не должны быть прочитаны или записаны кодом напрямую по причинам безопасности, переносимости и стабильности.</p> +<p>Таблица WebAssembly - это расширяемый типизированный массив <a href="https://en.wikipedia.org/wiki/Reference_(computer_science)">ссылок</a>, доступ к которому может быть получен из JavaScript и WebAssembly кода. Так как линейная память предоставляет расширяемый массив незащищённых байт, слишком небезопасно размещать там ссылки, так как для движка ссылка является доверенным значением, чьи байты не должны быть прочитаны или записаны кодом напрямую по причинам безопасности, переносимости и стабильности.</p> -<p>У таблиц есть тип элемента, который ограничивает тип возможной ссылки, который может быть размещен в таблице. В текущей версии WebAssembly, только один тип ссылки используется в WebAssembly коде - функции - и поэтому существует только один возможный тип элемента. В следующих версиях их количество будет увеличено.</p> +<p>У таблиц есть тип элемента, который ограничивает тип возможной ссылки, который может быть размещён в таблице. В текущей версии WebAssembly, только один тип ссылки используется в WebAssembly коде - функции - и поэтому существует только один возможный тип элемента. В следующих версиях их количество будет увеличено.</p> <p>Ссылки на функции необходимы для компиляции в таких языках как C/C++, которые имеют указатели на функции. В родной реализации C/C++, указатель на функцию представлен прямым адресом на код функции в виртуальном адресном пространстве процесса, и потому для ранее упомянутой безопасности, они не могут быть размещены прямо в линейной памяти. Вместо этого ссылки на функции размещаются в таблице, а её индексы, которые являются целыми числами могут быть размещены в линейной памяти и переданы куда угодно.</p> @@ -191,7 +191,7 @@ console.log(sum);</pre> <h3 id="Пример_таблицы">Пример таблицы</h3> -<p>Давайте взглянем на простой пример таблицы - модуль WebAssembly, который создает и экспортирует таблицу с двумя элементами: элемент под индексом 0 возвращает 13, а элемент под индексом 1 возвращает 42.</p> +<p>Давайте взглянем на простой пример таблицы - модуль WebAssembly, который создаёт и экспортирует таблицу с двумя элементами: элемент под индексом 0 возвращает 13, а элемент под индексом 1 возвращает 42.</p> <ol> <li> @@ -224,7 +224,7 @@ console.log(tbl.get(1)()); // 42</pre> <p>Этот код получает доступ к каждой ссылке на функцию, которая размещена в таблице, после чего вызывает её и выводит хранимое значение в консоль. Обратите внимание, что каждая ссылка на функцию получена с помощью вызова метода <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">Table.prototype.get()</a></code>, после чего мы добавили пару круглых скобок для вызова самой функции.</p> <div class="note"> -<p><strong>Примечание</strong>: Вы можете найти нашу полную демонстрацию в файле <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html">table.html</a> (см. ее также <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table.html">вживую</a>) — эта версия использует функцию <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">fetchAndInstantiate()</a></code>.</p> +<p><strong>Примечание</strong>: Вы можете найти нашу полную демонстрацию в файле <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html">table.html</a> (см. её также <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table.html">вживую</a>) — эта версия использует функцию <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">fetchAndInstantiate()</a></code>.</p> </div> <h2 id="Глобальные_переменные">Глобальные переменные</h2> |