Internal Architecture and Working of jQuery

jQuery Library में jQuery() नाम का एक Single Global Function Define किया गया है, जो कि एक Self Invoking Function है। यानी Web Browser का JavaScript Interpreter इस Function के Codes को Memory में पूरी तरह से Store करने के तुरन्त बाद इसे Run भी कर देता है। जब हम jQuery Framework Use करते हैं, तो इसी Function का Function सबसे ज्यादा बार Use किया जाता है, इसलिए इसे Refer करने के लिए Global Symbol $ को एक Shortcut की तरह Use किया जाता है।

चूंकि Web Browser के Global Scope में जितने कम Global Variables Attach होते हैं, Web Browser के JavaScript Codes के Parsing की Speed उतनी ही कम हो जाती है। इसीलिए jQuery Framework द्वारा केवल इन्हीं दोनों Symbols (jQuery व $) को Global Namespace में Define किया गया है, ताकि Web Browser के Global Scope में Extra Global Variables, Functions आदि Attach न हों व jQuery की Performance अच्छी रहे।

चूंकि JavaScript में $ एक Valid Symbol है, जिसे Variable या Identifier की तरह Use किया जा सकता है। इसलिए यदि हम चाहें तो JavaScript में निम्नानुसार एक ऐसा Function Define कर सकते हैं, जिसे $ Symbol के माध्‍यम से Call किया जा सके:

function $(value1, value2){
         return value1+value2;
 }

यदि हम इस Function को Call करना चाहें, तो निम्नानुसार Call कर सकते हैं:

alert($(10, 20));                                        
//Output: 30

इसी तरह से यदि हम चाहें तो निम्नानुसार एक Self Invoked Function Define कर सकते हैं जिसमें एक और Self Invoked Function है:

(function(window, undefined){
  var jQuery = (function(){
    //Other Codes…
    return jQuery;
  })(); 
  window.jQuery = window.$ = jQuery;
})(window);

जैसाकि आप उपरोक्त Code देखकर ही समझ सकते हैं कि ये Code Factory Pattern पर आधारित है, क्‍योंकि ये Code Function Expression Syntax का प्रयोग करके एक Anonymous Function Object Create कर रहा है और विभिन्न Operations Perform करने के बाद अन्त में उस Function Object का Reference Return कर रहा है।

इस Code में हमने एक Self Invoked Method Create किया है और Parameter के रूप में उसमें window Object को Pass किया है, ताकि जैसे ही Web Page, Web Browser में Load हो और window Object Ready हो जाए, ये Self Invoked Function Run हो जाए।

जैसे ही ये Function Run होता है, JavaScript Interpreter Control इस Outer Function के अन्दर पहुंचता है और jQuery नाम का एक नया Function Reference Create करता है। साथ ही इसमें Specify कि, गए सभी तरह के Codes Define करने के बाद यानी सभी Codes को Memory में Store करने के बाद jQuery Object को Return करता है, जिसे Outer Function में window.jQuery व window.$ को Assign कर दिया जाता है, ताकि जिस Function Code को Memory में jQuery नाम द्वारा Reference किया जा रहा है उसे window.jQuery व window.$ द्वारा भी Refer किया जा सके।

जब किसी Outer Function से किसी Inner Function का Reference Return किया जाता है, तो वह Inner Function एक प्रकार का Closure होता है, जो कि Outer Function के Run होकर Memory से समाप्त हो जाने के बाद भी Execution के लिए Exist रहता है। परिणामस्वरूप Inner Function से Control के Return होने के बाद भी jQuery Variable में Inner Function का Scope Exist रहता है। इसलिए हम इस Inner Code को फिर से Call करके Reuse कर सकते हैं।

चूंकि हम इस Inner Function को फिर से Reuse करना चाहते हैं, इसीलिए हमने इस Object को Outer Function में Defined window.jQuery व window.$ Global Variables को भी Assign कर दिया है। ताकि ये दोनों References Web Browser के Global Scope की Property बन जाऐं और जब भी हमें जरूरत हो, हम इनके माध्‍यम से Inner Function के Codes को फिर से Reuse कर सकें।

चूंकि window हमारे Web Browser का Global Object होता है, इसलिए यदि हम चाहें तो अपने Code में window शब्द को छोड भी सकते हैं। परिणामस्वरूप यदि हम उस window शब्द को छोड दें, तो अपने Code में हम Inner Function को jQuery या $ से भी Reference कर सकते हैं और पूरे jQuery Library में Define कि, गए सभी Functions को हम इन्हीं दोनों शब्दों द्वारा Refer करते हैं।

अब यदि हम चाहें, तो अपने सभी Library Functions को उपरोक्त Code के Inner Function में Defined कर सकते हैं और jQuery या $ द्वारा इस Function को Call करके उन सभी Inner Library Functions को Use कर सकते हैं। जैसे:

(function(window, undefined){
  var jQuery = (function(){
  return function(num1, num2){
   return(num1+num2);
  }
  return jQuery;
 })(); 
 window.jQuery = window.$ = jQuery;
 })(window);

alert($(10, 20));               //Output: 30
alert(jQuery(10, 20));          //Output: 30

ठीक इसी तरह से पूरी jQuery Framework के विभिन्न Functions को Inner Functions के रूप में Define किया गया है और क्‍योंकि हमारी ज्यादातर जरूरतों से सम्बंधित Functions को पहले ही इस Library में Define किया जा चुका है, इसलिए हमें फिर से इन Functions को Define करने की जरूरत नहीं है, बल्कि हम सीधे ही इन Functions को Use कर सकते हैं और ठीक उसी तरह से Use कर सकते हैं, जिस तरह से हमने उपरोक्त Code में दोनों Alert Box में Use किया है। उपरोक्त Code काफी सरल Code है और आसानी से समझ में आ सकता है। लेकिन यदि आपको उपरोक्त Code समझ में नहीं आ रहा है, तो इसका मतलब यही है कि आपको JavaScript की पर्याप्त जानकारी नहीं है।

इसलिए इस स्थिति में आपके लिए हमारी सलाह ये है कि आप हमारी पुस्तक “Advance JavaScript in Hindi” पढें, ताकि उपरोक्त Code व इस पुस्तक में आने वाले ऐसे ही कई अन्‍य Codes की Internal Working को आप बेहतर तरीके से समझ सकें। हालांकि उपरोक्त Code को समझे बिना भी आप इस पुस्तक में आगे आने वाले काफी Concepts को समझ सकते हैं। लेकिन jQuery व jQuery जैसे किसी भी अन्‍य JavaScript Framework को आसानी से व अच्छी तरह से समझने के लिए जरूरी है कि आपको JavaScript का पर्याप्त ज्ञान हो।