Perhimpunan Web menggunakan JavaScript (Wasm)

Pernahkah anda terfikir sama ada mungkin untuk menjalankan aplikasi berprestasi tinggi di web tanpa mengorbankan kemudahalihan dan keselamatan yang disediakan oleh JavaScript? Nah, jangan tertanya-tanya lagi! Dengan pengenalan WebAssembly (Wasm), kini boleh membawa prestasi seperti asli kepada aplikasi web sambil masih memanfaatkan kuasa JavaScript. Dalam artikel ini, kami akan meneroka asas WebAssembly dan cara anda boleh menggunakannya dengan JavaScript untuk membuka dunia kemungkinan baharu.

Apakah itu WebAssembly (Wasm)?

WebAssembly, biasanya dikenali sebagai Wasm, ialah format arahan binari yang direka untuk pelayar web. Ia adalah mesin maya peringkat rendah yang mampu melaksanakan kod pada kelajuan hampir asli. Wasm adalah hasil kerjasama antara vendor penyemak imbas utama termasuk Mozilla, Google, Microsoft dan Apple, dengan matlamat untuk membawa aplikasi berprestasi tinggi ke web.

Salah satu kelebihan utama WebAssembly ialah ia serasi dengan berbilang bahasa pengaturcaraan, menjadikannya penyelesaian universal untuk pembangunan web. Anda boleh menulis kod dalam bahasa seperti C++, Rust, atau TypeScript, dan kemudian menyusunnya ke dalam format binari Wasm yang boleh dilaksanakan terus dalam penyemak imbas.

Sepadukan WebAssembly dengan JavaScript

WebAssembly membawa banyak faedah kepada pembangunan web. Ia membolehkan pembangun melaksanakan tugas intensif pengiraan pada kelajuan hampir asli, menjadikannya sesuai untuk aplikasi yang memerlukan pelaksanaan berprestasi tinggi. Dengan memanfaatkan WebAssembly, pembangun boleh mengalihkan pangkalan kod sedia ada yang ditulis dalam bahasa seperti C++, Rust atau TypeScript ke web tanpa mengorbankan prestasi.

Penyatuan WebAssembly dengan JavaScript membolehkan interaksi lancar antara kedua-dua bahasa. JavaScript bertindak sebagai jambatan, menyediakan antara muka yang mudah untuk bekerja dengan modul WebAssembly. Ini membolehkan pembangun menggabungkan kuasa WebAssembly dengan ekosistem yang kaya dan fleksibiliti perpustakaan dan rangka kerja JavaScript.

Walaupun WebAssembly ialah teknologi kendiri, ia disepadukan dengan lancar dengan JavaScript, membolehkan pembangun menggabungkan faedah kedua-dua bahasa dalam satu aplikasi. JavaScript bertindak sebagai gam antara platform web dan modul WebAssembly, menyediakan antara muka yang mudah untuk berinteraksi dengan kod yang disusun.

JavaScript menyediakan API yang diperlukan untuk memuatkan modul WebAssembly. API fetch digunakan untuk mendapatkan semula fail binari dan menghantar ArrayBuffer yang terhasil kepada fungsi WebAssembly.instantiate. Fungsi ini menyusun modul secara tidak segerak dan mengembalikan contoh yang mengandungi fungsi yang dieksport dan memori modul. Dengan mengakses fungsi yang dieksport ini, JavaScript boleh memanggil fungsi yang disediakan oleh modul WebAssembly.

Untuk menunjukkan integrasi ini, mari kita pertimbangkan contoh mudah. Kami akan menulis modul Wasm yang mengira jujukan Fibonacci dan kemudian memanggil modul daripada JavaScript.

Langkah 1: Tulis modul WebAssembly

Mari kita tulis dahulu logik pengiraan Fibonacci dalam C++. Simpan kod berikut dalam fail yang dipanggil fibonacci.cpp -

#include <emscripten.h>

extern "C" {
   int EMSCRIPTEN_KEEPALIVE fibonacci(int n) {
      if (n <= 1) {
         return n;
      } else {
         return fibonacci(n - 1) + fibonacci(n - 2);
      }
   }
}

Arahan

Dalam kod ini, kami mempunyai fibonacci fungsi C++ yang mengira jujukan Fibonacci secara rekursif. Makro EMSCRIPTEN_KEEPALIVE memastikan fungsi tersebut dieksport dan boleh diakses daripada JavaScript.

Langkah 2: Susun modul WebAssembly

Untuk menyusun kod C++ ke WebAssembly, kami akan menggunakan rantai alat Emscripten. Jalankan arahan berikut dalam terminal -

emcc fibonacci.cpp -s WASM=1 -o fibonacci.wasm

Arahan ini akan menjana fail fibonacci.wasm, yang mengandungi modul WebAssembly yang disusun.

Langkah 3: Panggil WebAssembly daripada JavaScript

Sekarang kita mempunyai modul WebAssembly, mari kita panggilnya daripada JavaScript. Simpan kod berikut dalam fail HTML index.html -

Contoh

<!DOCTYPE html>
<html>
<head>
   <script>
      const fetchAndInstantiate = async () => {
         const response = await fetch('fibonacci.wasm');
         const buffer = await response.arrayBuffer();
         const module = await WebAssembly.instantiate(buffer);
         const instance = module.instance;

         const fibonacci = instance.exports.fibonacci;
         const result = fibonacci(10);

         console.log('Fibonacci(10):', result);
      };

      fetchAndInstantiate();
   </script>
</head>
<body>
</body>
</html>

Arahan

Dalam kod ini, kami menggunakan API fetch untuk mendapatkan semula fail fibonacci.wasm dan menukarnya menjadi ArrayBuffer. Kami kemudian membuat instantiate modul WebAssembly menggunakan WebAssembly.instantiate dan mendapatkan fungsi Fibonacci yang dieksport daripada contoh modul. Akhir sekali, kami memanggil fungsi Fibonacci dengan parameter 10 dan log hasilnya ke konsol.

Langkah 4: Jalankan contoh

Untuk menjalankan contoh, buka fail HTML dalam pelayar web. Buka konsol pembangun penyemak imbas anda dan anda akan melihat output Fibonacci(10): 55. Ini mengesahkan bahawa modul WebAssembly telah berjaya dimuatkan dan dilaksanakan daripada JavaScript.

Kesimpulan

WebAssembly ialah teknologi berkuasa yang membuka kemungkinan baharu untuk aplikasi web berprestasi tinggi. Dengan menggabungkan faedah WebAssembly dan JavaScript, pembangun boleh memanfaatkan asas kod sedia ada, menulis bahagian kritikal prestasi dalam bahasa peringkat rendah dan menyepadukannya dengan lancar ke dalam projek web mereka. Dengan fleksibiliti dan mudah alih WebAssembly, platform web menjanjikan persekitaran yang lebih berkuasa untuk menjalankan aplikasi yang kompleks.

Atas ialah kandungan terperinci Perhimpunan Web menggunakan JavaScript (Wasm). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!