Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Markdown conversion for ru - Cleanup - WebAssembly section #8590

Merged
merged 1 commit into from
Sep 19, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion files/ru/webassembly/exported_functions/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ <h2 id="Пример">Пример</h2>

<p>Чтобы доказать это, мы получаем ссылки на функции из таблицы <code>otherTable</code> и вызываем их. При выводе в консоль они дают такие же результаты.</p>

<h2 id="Они_являются_настоящими_функциями"><font><font>Они являются настоящими функциями</font></font></h2>
<h2 id="Они_являются_настоящими_функциями">Они являются настоящими функциями</h2>

<p>В предыдущем примере возвращаемое значение каждого вызова <code><a href="/en-US/docs/WebAssembly/API/Table/get">Table.prototype.get()</a></code> является экспортированной функцией WebAssembly — это именно то, о чем мы говорили.</p>

Expand Down
2 changes: 1 addition & 1 deletion files/ru/webassembly/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ <h2 dir="ltr" id="Примеры">Примеры</h2>

<h2 id="Спецификация">Спецификация</h2>

<table class="table table-striped">
<table>
<thead>
<tr>
<th>Specification</th>
Expand Down
34 changes: 17 additions & 17 deletions files/ru/webassembly/loading_and_running/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,26 +15,26 @@

<h2 id="Какие_есть_варианты">Какие есть варианты?</h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">WebAssembly ещё не интегрирована с </span></span> <code>&lt;script type='module'&gt;</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>WebAssembly ещё не интегрирована с <code>&lt;script type='module'&gt;</code> или ES2015 оператором <code>import</code>, поэтому не существует пути, позволяющего использовать модули загрузки браузера для использования импорта.</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>
<p>Старые методы {{jsxref("WebAssembly.compile")}}/{{jsxref("WebAssembly.instantiate")}} требуют создания {{domxref("ArrayBuffer")}}, содержащего двоичный файл модуля WebAssembly после загрузки необработанных байтов, а затем скомпилировать/создать его экземпляр. Это аналог <code>new Function(string)</code>, за исключением того, что мы заменяем строку символов (исходный код JavaScript) буфером байтов массива (исходный код WebAssembly).</p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Более новые методы </span></span>{{jsxref("WebAssembly.compileStreaming")}}/{{jsxref("WebAssembly.instantiateStreaming")}} <span class="tlid-translation translation" lang="ru"><span title="">намного эффективнее - они выполняют свои действия непосредственно с необработанным потоком байтов, поступающих из сети,</span> <span title="">избавление от необходимости шага </span></span>{{domxref("ArrayBuffer")}}.</p>
<p>Более новые методы {{jsxref("WebAssembly.compileStreaming")}}/{{jsxref("WebAssembly.instantiateStreaming")}} намного эффективнее - они выполняют свои действия непосредственно с необработанным потоком байтов, поступающих из сети, избавление от необходимости шага {{domxref("ArrayBuffer")}}.</p>

<p>Итак, как мы можем получить эти байты в буфер массива и скомпилировать? Следующие разделы объясняют.</p>

<h2 id="Используя_Fetch">Используя Fetch</h2>

<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch</a><span class="tlid-translation translation" lang="ru"><span title=""> - это удобный современный API для извлечения сетевых ресурсов.</span></span></p>
<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> - это удобный современный API для извлечения сетевых ресурсов.</p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Самый быстрый и эффективный способ получить модуль wasm - использовать более новый метод </span></span>{{jsxref("WebAssembly.instantiateStreaming()")}}, <span class="tlid-translation translation" lang="ru"><span title="">который может принять вызов </span></span><code>fetch()</code> <span class="tlid-translation translation" lang="ru"><span title="">в качестве первого аргумента и будет обрабатывать загрузку, компиляцию</span> <span title="">и создание экземпляра модуля за один шаг, получая доступ к необработанному байтовому коду при его потоковой передаче с сервера:</span></span></p>
<p>Самый быстрый и эффективный способ получить модуль wasm - использовать более новый метод {{jsxref("WebAssembly.instantiateStreaming()")}}, который может принять вызов <code>fetch()</code> в качестве первого аргумента и будет обрабатывать загрузку, компиляцию и создание экземпляра модуля за один шаг, получая доступ к необработанному байтовому коду при его потоковой передаче с сервера:</p>

<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
.then(results =&gt; {
// Do something with the results!
});</pre>

<p><span class="tlid-translation translation" lang="ru"><span title="">Если бы мы использовали более старый метод</span></span> {{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="">вот так:</span></span></p>
<p>Если бы мы использовали более старый метод {{jsxref("WebAssembly.instantiate()")}}, который не работает в прямом потоке, нам потребовался бы дополнительный шаг преобразования преобразованного байт-кода в {{domxref("ArrayBuffer")}}, вот так:</p>

<pre class="brush: js">fetch('module.wasm').then(response =&gt;
response.arrayBuffer()
Expand All @@ -46,26 +46,26 @@ <h2 id="Используя_Fetch">Используя Fetch</h2>

<p> </p>

<h3 id="Помимо_перегрузок_instantiate()"><span class="tlid-translation translation" lang="ru"><span title="">Помимо перегрузок instantiate()</span></span></h3>
<h3 id="Помимо_перегрузок_instantiate()">Помимо перегрузок instantiate()</h3>

<p><span class="tlid-translation translation" lang="ru"><span title="">Функция</span></span> {{jsxref("WebAssembly.instantiate()")}}<span class="tlid-translation translation" lang="ru"><span title=""> имеет две формы перегрузки - та, что показана выше, принимает байт-код для компиляции в качестве аргумента и возвращает </span></span><code>Promise</code><span class="tlid-translation translation" lang="ru"><span title="">, которое разрешается для объекта, содержащего оба объекта скомпилированного модуля,</span> <span title="">и экземпляр этого.</span> <span title="">Объект выглядит так:</span></span></p>
<p>Функция {{jsxref("WebAssembly.instantiate()")}} имеет две формы перегрузки - та, что показана выше, принимает байт-код для компиляции в качестве аргумента и возвращает <code>Promise</code>, которое разрешается для объекта, содержащего оба объекта скомпилированного модуля, и экземпляр этого. Объект выглядит так:</p>

<pre class="brush: js">{
module : Module // The newly compiled WebAssembly.Module object,
instance : Instance // A new WebAssembly.Instance of the module object
}</pre>

<div class="note">
<p><strong>Примечание</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Обычно мы заботимся только об экземпляре, но полезно иметь модуль на тот случай, если мы хотим его кешировать, поделиться им с другим работником или окном через</span></span> <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>, <span class="tlid-translation translation" lang="ru"><span title="">или просто создать больше экземпляров.</span></span></p>
<p><strong>Примечание</strong>: Обычно мы заботимся только об экземпляре, но полезно иметь модуль на тот случай, если мы хотим его кешировать, поделиться им с другим работником или окном через <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>, или просто создать больше экземпляров.</p>
</div>

<div class="note">
<p><strong>Примечание</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Вторая форма перегрузки принимает в качестве аргумента объект </span></span>{{jsxref("WebAssembly.Module")}} <span class="tlid-translation translation" lang="ru"><span title="">и возвращает </span></span><code>Promise</code><span class="tlid-translation translation" lang="ru"><span title="">, непосредственно содержащее объект экземпляра, в качестве результата.</span> <span title="">См. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example">Второй пример перегрузки</a>.</span></span></p>
<p><strong>Примечание</strong>: Вторая форма перегрузки принимает в качестве аргумента объект {{jsxref("WebAssembly.Module")}} и возвращает <code>Promise</code>, непосредственно содержащее объект экземпляра, в качестве результата. См. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example">Второй пример перегрузки</a>.</p>
</div>

<h3 id="Выполнение_вашего_кода_WebAssembly">Выполнение вашего кода WebAssembly</h3>

<p><span class="tlid-translation translation" lang="ru"><span title="">Когда у вас есть экземпляр WebAssembly, доступный в вашем JavaScript, вы можете начать использовать его возможности, которые были экспортированы через свойство </span></span>{{jsxref("WebAssembly.Instance/exports", "WebAssembly.Instance.exports")}}. <span class="tlid-translation translation" lang="ru"><span title="">Ваш код может выглядеть примерно так:</span></span></p>
<p>Когда у вас есть экземпляр WebAssembly, доступный в вашем JavaScript, вы можете начать использовать его возможности, которые были экспортированы через свойство {{jsxref("WebAssembly.Instance/exports", "WebAssembly.Instance.exports")}}. Ваш код может выглядеть примерно так:</p>

<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('myModule.wasm'), importObject)
.then(obj =&gt; {
Expand All @@ -81,18 +81,18 @@ <h3 id="Выполнение_вашего_кода_WebAssembly">Выполнен
})</pre>

<div class="note">
<p><strong>Примечание</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Для получения дополнительной информации о том, как работает экспорт из модуля WebAssembly, ознакомьтесь с разделами</span></span> <a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Использование JavaScript API WebAssembly</a>, и <a href="/en-US/docs/WebAssembly/Understanding_the_text_format">Понимание текстового формата WebAssembly</a>.</p>
<p><strong>Примечание</strong>: Для получения дополнительной информации о том, как работает экспорт из модуля WebAssembly, ознакомьтесь с разделами <a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Использование JavaScript API WebAssembly</a>, и <a href="/en-US/docs/WebAssembly/Understanding_the_text_format">Понимание текстового формата WebAssembly</a>.</p>
</div>

<h2 id="Используя_XMLHttpRequest">Используя XMLHttpRequest</h2>

<p><code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> <span class="tlid-translation translation" lang="ru"><span title="">несколько старше, чем</span></span> Fetch, <span class="tlid-translation translation" lang="ru"><span title="">но всё же может успешно использоваться для получения типизированного массива.</span> <span title="">Опять же, если предположить, что наш модуль называется </span></span><code>simple.wasm</code>:</p>
<p><code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> несколько старше, чем Fetch, но всё же может успешно использоваться для получения типизированного массива. Опять же, если предположить, что наш модуль называется <code>simple.wasm</code>:</p>

<ol>
<li><span class="tlid-translation translation" lang="ru"><span title="">Создайте новый экземпляр </span></span>{{domxref("XMLHttpRequest()")}} <span class="tlid-translation translation" lang="ru"><span title="">и используйте его метод </span></span>{{domxref("XMLHttpRequest.open","open()")}} <span class="tlid-translation translation" lang="ru"><span title="">для открытия запроса, задав для метода запроса значение </span></span> <code>GET</code> <span class="tlid-translation translation" lang="ru"><span title="">и указав путь к файлу, который мы хотим получить.</span></span></li>
<li><span class="tlid-translation translation" lang="ru"><span title="">Ключевой частью этого является установка типа ответа </span></span> <code>'arraybuffer'</code> <span class="tlid-translation translation" lang="ru"><span title="">с помощью свойства </span></span>{{domxref("XMLHttpRequest.responseType","responseType")}}.</li>
<li><span class="tlid-translation translation" lang="ru"><span title="">Затем отправьте запрос с помощью </span></span>{{domxref("XMLHttpRequest.send()")}}.</li>
<li><span class="tlid-translation translation" lang="ru"><span title="">Затем мы используем обработчик событий </span></span>{{domxref("XMLHttpRequest.onload", "onload")}} <span class="tlid-translation translation" lang="ru"><span title="">для вызова функции после завершения загрузки ответа - в этой функции мы получаем буфер массива из</span></span> {{domxref("XMLHttpRequest.response", "response")}} <span class="tlid-translation translation" lang="ru"><span title="">и затем передайте это в наш метод</span></span> {{jsxref("WebAssembly.instantiate()")}}, <span class="tlid-translation translation" lang="ru"><span title="">как мы это делали с Fetch.</span></span></li>
<li>Создайте новый экземпляр {{domxref("XMLHttpRequest()")}} и используйте его метод {{domxref("XMLHttpRequest.open","open()")}} для открытия запроса, задав для метода запроса значение <code>GET</code> и указав путь к файлу, который мы хотим получить.</li>
<li>Ключевой частью этого является установка типа ответа <code>'arraybuffer'</code> с помощью свойства {{domxref("XMLHttpRequest.responseType","responseType")}}.</li>
<li>Затем отправьте запрос с помощью {{domxref("XMLHttpRequest.send()")}}.</li>
<li>Затем мы используем обработчик событий {{domxref("XMLHttpRequest.onload", "onload")}} для вызова функции после завершения загрузки ответа - в этой функции мы получаем буфер массива из {{domxref("XMLHttpRequest.response", "response")}} и затем передайте это в наш метод {{jsxref("WebAssembly.instantiate()")}}, как мы это делали с Fetch.</li>
</ol>

<p>Финальный код выглядит так:</p>
Expand Down
Loading