Tiếng Việt

Hướng dẫn WebAssembly

WebAssembly - Chương trình con

Xin chào, các bạn có tham vọng trở thành lập trình viên! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các mô-đun WebAssembly. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau từng bước. Cuối bài học này, bạn sẽ có một hiểu biết vững chắc về các mô-đun WebAssembly và cách chúng hoạt động. Hãy cùng bắt đầu!

WebAssembly - Modules

WebAssembly là gì?

Trước khi chúng ta nói về các mô-đun, hãy nhanh chóng tìm hiểu về WebAssembly là gì. Hãy tưởng tượng bạn đang xây dựng một lâu đài cát. WebAssembly giống như một桶 đặc biệt giúp bạn xây dựng các lâu đài nhanh hơn và chắc chắn hơn bao giờ hết. Trong thế giới phát triển web, WebAssembly là một ngôn ngữ cấp thấp chạy trong các trình duyệt, cho phép đạt được hiệu suất gần như bản địa.

Bước 1: Hiểu về các mô-đun WebAssembly

Các mô-đun WebAssembly là những khối xây dựng của các ứng dụng WebAssembly. Hãy tưởng tượng chúng như những mảnh LEGO - mỗi mô-đun là một đơn vị tự chứa có thể kết hợp với các mô-đun khác để tạo ra điều kỳ diệu.

Các khái niệm chính

  1. Định dạng nhị phân: Các mô-đun thường được phân phối dưới dạng định dạng nhị phân (.wasm files).
  2. Biên dịch: Các mô-đun này được biên dịch từ các ngôn ngữ như C, C++, hoặc Rust.
  3. Nhập và xuất: Các mô-đun có thể nhập chức năng và xuất các hàm của riêng chúng.

Bước 2: Tạo và sử dụng các mô-đun WebAssembly

Bây giờ, hãy cùng nhau qua quy trình tạo và sử dụng một mô-đun WebAssembly.

2.1 Viết mô-đun WebAssembly

Đầu tiên, chúng ta cần viết mô-đun của mình. Chúng ta sẽ sử dụng một hàm C đơn giản làm ví dụ:

// add.c
int add(int a, int b) {
return a + b;
}

Hàm này cộng hai số. Đơn giản phải không? Nhưng làm thế nào để chúng ta biến điều này thành một mô-đun WebAssembly?

2.2 Biên dịch thành WebAssembly

Để biên dịch này thành WebAssembly, chúng ta sử dụng một công cụ叫做 Emscripten. Đây là lệnh:

emcc add.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o add.js

Lệnh này tạo ra hai tệp:

  • add.wasm: Mô-đun WebAssembly của chúng ta
  • add.js: Mã JavaScript để tải và sử dụng mô-đun của chúng ta

2.3 Tải mô-đun trong JavaScript

Bây giờ, hãy xem cách chúng ta có thể sử dụng mô-đun này trong một trang web:

<!DOCTYPE html>
<html>
<head>
<title>Chức năng WebAssembly Add</title>
</head>
<body>
<h1>Chức năng WebAssembly Add</h1>
<p>Kết quả: <span id="result"></span></p>
<script src="add.js"></script>
<script>
Module.onRuntimeInitialized = async _ => {
const result = Module._add(5, 3);
document.getElementById('result').textContent = result;
};
</script>
</body>
</html>

Giải thích mã

Hãy phân tích những gì đang xảy ra trong đoạn mã này:

  1. Chúng ta bao gồm tệp add.js, amely tải mô-đun WebAssembly của chúng ta.
  2. Chúng ta sử dụng Module.onRuntimeInitialized để đảm bảo mô-đun đã tải trước khi chúng ta sử dụng nó.
  3. Chúng ta gọi hàm add của chúng ta bằng cách sử dụng Module._add(5, 3).
  4. Kết quả được hiển thị trên trang.

Ví dụ: Một mô-đun phức tạp hơn

Bây giờ chúng ta đã thấy một ví dụ đơn giản, hãy thử một điều gì đó phức tạp hơn. Chúng ta sẽ tạo một mô-đun tính toán阶乘 của một số.

// factorial.c
int factorial(int n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}

Biên dịch nó theo cách tương tự:

emcc factorial.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_factorial"]' -o factorial.js

Bây giờ, hãy sử dụng nó trong HTML của chúng ta:

<!DOCTYPE html>
<html>
<head>
<title>Trình tính阶乘 WebAssembly</title>
</head>
<body>
<h1>Trình tính阶乘 WebAssembly</h1>
<input type="number" id="input" value="5">
<button onclick="calculateFactorial()">Tính</button>
<p>Kết quả: <span id="result"></span></p>
<script src="factorial.js"></script>
<script>
function calculateFactorial() {
const n = document.getElementById('input').value;
const result = Module._factorial(n);
document.getElementById('result').textContent = result;
}

Module.onRuntimeInitialized = async _ => {
calculateFactorial();
};
</script>
</body>
</html>

Kết quả

Khi bạn chạy điều này trong trình duyệt, bạn sẽ thấy một trường nhập nơi bạn có thể nhập một số. Nhấp vào nút "Tính" sẽ hiển thị giá trị của số阶乘, tất cả được tính toán bằng mô-đun WebAssembly của chúng ta!

Kết luận

Chúc mừng! Bạn vừa mới bước những bước đầu tiên vào thế giới của các mô-đun WebAssembly. Chúng ta đã bao gồm các nguyên tắc cơ bản về việc tạo ra, biên dịch và sử dụng các mô-đun WebAssembly trong các ứng dụng web. Nhớ rằng, đây chỉ là bắt đầu - WebAssembly mở ra một thế giới mới đầy khả năng cho phát triển web, cho phép bạn mang lại hiệu suất cao đến trình duyệt.

Trong hành trình tiếp theo, bạn sẽ khám phá cách WebAssembly có thể được sử dụng cho mọi thứ từ trò chơi đến xử lý dữ liệu phức tạp. Hãy tiếp tục thử nghiệm và đừng ngại thử thách giới hạn của những gì có thể trong trình duyệt!

Phương pháp Mô tả
Module.onRuntimeInitialized Đảm bảo mô-đun WebAssembly đã tải hoàn chỉnh trước khi sử dụng
Module._functionName Gọi một hàm được xuất từ mô-đun WebAssembly
emcc Lệnh biên dịch Emscripten để tạo mô-đun WebAssembly

Nhớ rằng, học WebAssembly giống như học đi xe đạp - nó có thể khó khăn ban đầu, nhưng với sự luyện tập, bạn sẽ nhanh chóng chạy nhanh hơn bao giờ hết. Chúc bạn may mắn với mã lập trình!

Credits: Image by storyset

Hướng Dẫn Trước:
WebAssembly - "Xin chào thế giới"
Hướng Dẫn Tiếp Theo:
WebAssembly - Xác thực