Computer Programming JavaScript এবং WebAssembly এর মধ্যে Function Import/Export গাইড ও নোট

JavaScript এবং WebAssembly এর মধ্যে Function Import/Export

WebAssembly (WASM) এবং JavaScript একে অপরের সাথে ইন্টিগ্রেট করে কাজ করতে পারে, যার মধ্যে একটি গুরুত্বপূর্ণ দিক হলো function import এবং function export। WebAssembly মডিউল থেকে JavaScript ফাংশন ইম্পোর্ট বা এক্সপোর্ট করার মাধ্যমে দুইটি কোড একে অপরের সাথে ইন্টারঅ্যাক্ট করতে পারে।

নিম্নে WebAssembly এবং JavaScript এর মধ্যে function import এবং export করার বিস্তারিত প্রক্রিয়া আলোচনা করা হলো।

1. JavaScript থেকে WebAssembly মডিউলে Function Import

WebAssembly মডিউলে JavaScript এর কোনো ফাংশন ইম্পোর্ট করতে চাইলে, প্রথমে আপনাকে JavaScript ফাংশনটি WebAssembly মডিউলে import করতে হবে। এটি মূলত WebAssembly মডিউলকে বাইরের কোডের সাথে যোগাযোগ করার সুযোগ দেয়।

1.1 JavaScript ফাংশন Import করা

ধরা যাক, আপনার JavaScript কোডে একটি multiply নামক ফাংশন রয়েছে, যেটি WebAssembly মডিউলে ইম্পোর্ট করা হবে।

// JavaScript ফাংশন
function multiply(a, b) {
    return a * b;
}

// WebAssembly মডিউল লোড এবং ফাংশন ইম্পোর্ট
fetch('your_module.wasm')
    .then(response => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes, {
        env: { // এখানে আমরা JavaScript ফাংশন ইম্পোর্ট করছি
            multiply: multiply
        }
    }))
    .then(wasmModule => {
        const multiplyFromWasm = wasmModule.instance.exports.multiply;
        const result = multiplyFromWasm(3, 4); // WebAssembly ফাংশন কল
        console.log("Multiplication result from WebAssembly: ", result);
    })
    .catch(console.error);

• এখানে, multiply JavaScript ফাংশনটি WebAssembly মডিউলে ইম্পোর্ট করা হয়েছে env নামক এক্সপোর্ট টেবিলের মাধ্যমে।
• এর পর, JavaScript থেকে WebAssembly মডিউলটি লোড হয়ে সেই ফাংশনটি WebAssembly কোডে ব্যবহৃত হচ্ছে।

1.2 WebAssembly ফাংশন Import করা (WebAssembly কোড)

আপনার WebAssembly কোডে এইভাবে ফাংশন ইম্পোর্ট করতে হবে:

// WebAssembly কোডে multiply ফাংশন ইম্পোর্ট করা
extern int multiply(int, int);

int main() {
    int result = multiply(5, 3);  // বাইরের JavaScript ফাংশন কল
    return 0;
}

এখানে multiply ফাংশনটি বাইরের কোড (JavaScript) থেকে ইম্পোর্ট করা হচ্ছে এবং WebAssembly কোডে ব্যবহৃত হচ্ছে।

2. WebAssembly থেকে JavaScript মডিউলে Function Export

WebAssembly মডিউল থেকে JavaScript এর জন্য ফাংশন এক্সপোর্ট করার মাধ্যমে WebAssembly মডিউলটি বাইরের JavaScript কোডের জন্য ফাংশন বা ডেটা প্রদান করতে পারে। এটি খুবই উপকারী যখন আপনি ওয়েব অ্যাপ্লিকেশনে দ্রুত পারফরম্যান্সের জন্য WebAssembly ব্যবহার করতে চান এবং JavaScript এর মধ্যে ওয়েব পেজের ইন্টারঅ্যাকশন রাখতে চান।

2.1 WebAssembly থেকে JavaScript ফাংশন Export করা

ধরা যাক, আপনার WebAssembly কোডে একটি add নামক ফাংশন রয়েছে, যেটি JavaScript এ এক্সপোর্ট করা হবে।

#include <stdio.h>

// WebAssembly ফাংশন
int add(int a, int b) {
    return a + b;
}

এই কোডটি add ফাংশনটি WebAssembly মডিউলে ডিফাইন করে, যা পরবর্তীতে বাইরের JavaScript কোডে এক্সপোর্ট করা হবে।

2.2 JavaScript এ WebAssembly ফাংশন Export করা

JavaScript কোডে এটি ব্যবহার করার জন্য, WebAssembly মডিউল লোড করার সময় add ফাংশন এক্সপোর্ট করতে হবে:

fetch('your_module.wasm')
    .then(response => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes))
    .then(wasmModule => {
        const addFromWasm = wasmModule.instance.exports.add; // WebAssembly থেকে add ফাংশন এক্সপোর্ট করা
        const result = addFromWasm(10, 20);
        console.log("Sum from WebAssembly: ", result);
    })
    .catch(console.error);

এখানে, add ফাংশনটি WebAssembly থেকে JavaScript এ এক্সপোর্ট করা হচ্ছে এবং JavaScript থেকে সেই ফাংশন কল করা হচ্ছে।

3. WebAssembly এবং JavaScript এর মধ্যে Import/Export এর উদাহরণ

ধরা যাক, আপনার WebAssembly মডিউলটি বাইরের JavaScript ফাংশন ব্যবহার করে এবং সেই মডিউলটি JavaScript থেকে WebAssembly এর ফাংশন এক্সপোর্ট করছে।

3.1 Full Example

1. WebAssembly কোড (C ভাষায়):

#include <stdio.h>

extern int multiply(int, int);  // JavaScript ফাংশন ইম্পোর্ট

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

int main() {
    int sum = add(5, 10);  // নিজস্ব ফাংশন কল
    int product = multiply(4, 6);  // বাইরের JavaScript ফাংশন কল
    return 0;
}

2. JavaScript কোড:

// JavaScript ফাংশন
function multiply(a, b) {
    return a * b;
}

// WebAssembly মডিউল লোড করা এবং ফাংশন ইম্পোর্ট/এক্সপোর্ট
fetch('your_module.wasm')
    .then(response => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes, {
        env: {
            multiply: multiply  // JavaScript ফাংশন ইম্পোর্ট
        }
    }))
    .then(wasmModule => {
        // WebAssembly মডিউল থেকে add ফাংশন এক্সপোর্ট
        const addFromWasm = wasmModule.instance.exports.add;
        const result = addFromWasm(10, 20);
        console.log("Sum from WebAssembly: ", result);
    })
    .catch(console.error);

এই উদাহরণে:

• JavaScript কোডে multiply ফাংশন WebAssembly মডিউলে import করা হয়েছে।
• WebAssembly থেকে add ফাংশন export করে JavaScript কোডে কল করা হচ্ছে।

সারসংক্ষেপ

• Import: WebAssembly মডিউল বাইরের JavaScript ফাংশন ইম্পোর্ট করে, যার মাধ্যমে বাইরের কোড থেকে ফাংশন ব্যবহার করা যায়।
• Export: WebAssembly মডিউল থেকে বাইরের JavaScript কোডে ফাংশন এক্সপোর্ট করা হয়, যাতে JavaScript সেই ফাংশন ব্যবহার করতে পারে।
• WebAssembly Functions: WebAssembly এবং JavaScript একে অপরের সাথে ইন্টারঅ্যাক্ট করতে পারে, যার মাধ্যমে দুইটি পরিবেশের মধ্যে কার্যকরী ফাংশন শেয়ার করা সম্ভব।

এই পদ্ধতি ব্যবহারের মাধ্যমে, WebAssembly এবং JavaScript একে অপরের সাথে সঠিকভাবে কাজ করতে পারে এবং ওয়েব অ্যাপ্লিকেশনগুলির পারফরম্যান্স আরও দ্রুত এবং কার্যকরী হতে পারে।