জে-কোয়েরী সেল্ফ এ্যাক্সিউটিং ফাংশন (jQuery self executing function)

By Farhan khan - January 27, 2019

জে-কোয়েরী সেল্ফ এ্যাক্সিউটিং ফাংশন (jQuery self executing function)

Javascript এ যারা window.onload() function নিয়ে কাজ করেছেন তারা হয়ত খেয়াল করেছেন, এর মাধ্যমে কল করা কোন ফাংশন তখনই execute হয় যখন page এর সব object ও content load হয় ।মানে করুন কোন image যদি কোন কারণে লোড না হতে পারে তাহলে আপনার onload() এর দ্বারা যে ফাংশন কল করা হয়েছে তা আর execute হবে না।jquery তে .ready() function অনেকটা onload এর মত।difference হল এটাতে কোন page এর dom object গুলো যদি jquery হাতে পায় তাহলেই সে তার কাজ শুরু করে দেয় ।
আর একটা জিনিস হল ready() function টি আপনার যতবার দরকার ততবার-ই কল করতে পারবেন ।
মাঝে মাঝে $(document).ready(); কে " $(); " দিয়ে replace করে shortcut-এ $ (function(){ your code here }); লেখা হয়।

$(document).ready(function() {
})();

$(function() {
})();

উপরের function দুটি একই, ২য় টি ১ম টির সংক্ষিপ্ত রুপ। এদেরকে self executing function বলা হয়। অর্থাৎ ইহা ready state(9 or 10 মিলি সেকেন্ড পর পর) এ dom element check করবে , dom(link-2) element পেলেই function কাজ শুরু করবে । নিচের example গুলি মনযোগ সহকারে দেখলেই আশা করি self executing function কিভাবে ready state এ কাজ করে তা বুজতে পারবেন।
আমরা জানি program সবসময় উপর থেকে নিচের দিকে (top-down) execute হয়।

উদাহরণ Code:

<!--[CDATA[
<!doctype html-->
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <style>
    .emphasis {
        font-weight: bold;
        color:red
        }
    </style>   
    <script>
        $('li:first-child').addClass('emphasis');
    </script>
<ul>
    <li class="emphasis">Arifur</li>
    <li>Rahman</li>
    <li>(Sazal)</li>
</ul>
]]>

Output :

দেখুন code কাজ করছেনা, কারন html element এর পূর্বে jQuery code লেখা হয়েছে।

এবার নিচের উদাহরন টি দেখুন :

উদাহরণ Code:

<!--[CDATA[
<!doctype html-->
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <style>
    .emphasis {
        font-weight: bold;
        color:red
        }
    </style>   
    <script>
        $(document).ready(function(){
            $('li:first-child').addClass('emphasis');
        })();
    </script>
<ul>
    <li class="emphasis">Arifur</li>
    <li>Rahman</li>
    <li>(Sazal)</li>
</ul>
]]>

Output :

এবার দেখুন code কাজ করছে, কারন on ready state এ self executing function টি নিজে নিজে call হচ্ছে এবং যখন-ই dom element কে পাচ্ছে তাতে jQuery action প্রোয়োগ হচ্ছে।

Search This Blog

Priyo blog