jQuery-এ document.ready বাইরে গ্লোবাল ভেরিয়েবল তৈরি করা

jQuery-এ $(document).ready() ব্লকের বাইরে গ্লোবাল ভেরিয়েবল ডিক্লেয়ার করে, রেডি ব্লকে ইনিশিয়ালাইজ করা যায়। এটি স্ক্রিপ্ট ট্যাগের টপ-লেভেল স্কোপে থাকা দরকার।

প্যাটার্ন

<script>
    // ১. গ্লোবাল স্কোপে ডিক্লেয়ার
    var globalVariable;

    $(document).ready(function() {
        // ২. রেডি ব্লকে ইনিশিয়ালাইজ
        function initialize() {
            globalVariable = [{ name: "John", age: 23 }];
        }
        initialize();
    });

    // ৩. যেকোনো ফাংশন থেকে অ্যাক্সেস
    function useGlobal() {
        if (globalVariable.length) {
            console.log(globalVariable[0].name);
        }
    }
</script>

পূর্ণ HTML উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>Global Variable Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button onclick="showGlobal()">গ্লোবাল ভেরিয়েবল দেখাও</button>

    <script>
        var globalData; // গ্লোবাল স্কোপ

        $(document).ready(function() {
            globalData = { 
                user: "আহমেদ", 
                role: "অ্যাডমিন",
                permissions: ["read", "write", "delete"]
            };
        });

        function showGlobal() {
            if (globalData) {
                alert("ব্যবহারকারী: " + globalData.user + "\nভূমিকা: " + globalData.role);
            } else {
                alert("এখনো লোড হয়নি!");
            }
        }
    </script>
</body>
</html>

চলানোর পদ্ধতি

1. ফাইলটি globalVar.html নামে সংরক্ষণ করুন।
2. VS Code-এ Open with Live Server দিয়ে চালান।
3. বাটনে ক্লিক করুন।

সেরা অনুশীলন (Modern ES6+)

<script type="module">
    // মডিউল স্কোপ (গ্লোবাল না) - আরও সুরক্ষিত
    export const appState = { user: null };

    document.addEventListener('DOMContentLoaded', () => {
        appState.user = { name: "আহমেদ", role: "অ্যাডমিন" };
    });

    window.showGlobal = () => {
        console.log(appState.user);
    };
</script>

দ্রষ্টব্য

• গ্লোবাল ভেরিয়েবল কম ব্যবহার করুন (নেমস্পেস পলিউশন)।
• IIFE বা ES6 মডিউল ব্যবহার করে এনক্যাপসুলেশন করুন।
• jQuery রেডি ব্লক অপেক্ষা না করে `DOMContentLoaded` ব্যবহার করুন।