How to use $ Symbol with other Java Script Libraries?

jQuery Framework को अपने Web Page में Include करते हैं, तो हमें jQuery() नाम का एक Single Function प्राप्त होता है और यही वह Magical Function होता है, जो कि पूरे jQuery Framework का Gateway होता है। यानी jQuery के किसी भी Library Function को Use करने के लिए हमें इसी jQuery() Function को Compulsory रूप से Use करना होता है और जैसाकि हमने पिछले Discussion में देखा है कि हम jQuery() Function के स्थान पर $() Function को भी Use कर सकते हैं, जो कि jQuery() Function का ही एक Alias है।

चूंकि jQuery के अलावा भी कई अन्‍य JavaScript Frameworks हैं जो किसी Specific Type की Requirement को पूरा करते हैं और कई बार हम हमारे एक ही Web Page में एक से ज्यादा JavaScript Frameworks को Use करते हुए किसी Requirement को पूरा करने की कोशिश करते हैं। उस स्थिति में इन विभिन्न प्रकार के JavaScript Frameworks में Specified विभिन्न Functions के नाम समान हो सकते हैं।

परिणामस्वरूप विभिन्न JavaScript Frameworks के कई Functions के नाम समान होने की वजह से Name Conflict होने की सम्भावना रहती है क्‍योंकि एक से ज्यादा Libraries में एक ही नाम के एक से ज्यादा Functions होने की स्थिति में सभी Libraries में केवल एक ही Function काम करता है और वह Function सभी अन्‍य Frameworks के Functions को Override कर देता है, जिससे किसी ना किसी तरह की Error आने की संभावना रहती ही है अथवा हम जिस Requirement को पूरा करने के लिए एक से अधिक Frameworks को Combined रूप से Use कर रहे होते हैं, वह Requirement पूरी नहीं हो पाती।

उदाहरण के लिए jQuery में भी hide() नाम का एक Function है और हम हमारी जरूरत के अनुसार अपना स्वयं का भी hide() नाम का Function बना सकते हैं। यदि ऐसा होता है, तो एक ही नाम के दो Functions होने की स्थिति में कोई एक hide() Function किसी दूसरे hide() Function को Override करेगा, जिससे किसी ना किसी तरह की Error तो Generate होगी ही।

इस तरह की परेशानी न हो, इसलिए पूरी jQuery Library को jQuery नाम के एक Namespace में Contained रखा गया है। इसलिए jQuery के Functions को उपयोग में लेने के लिए हमें हर jQuery Function के नाम से पहले “jQuery” शब्द का प्रयोग करना जरूरी होता है व Function के नाम को jQuery शब्द के साथ Dot Operator का प्रयोग करके जोडना पडता है। जैसे:

jQuery(‘p’).hide();

यदि Coding बहुत कम हो, तब तो हम इस तरह से jQuery Codes लिख सकते हैं, लेकिन यदि  हमें बहुत ज्यादा jQuery Codes लिखने हों, तो बार-बार “jQuery” शब्द को उपयोग में लेना काफी असुविधाजनक हो सकता है। इसलिए jQuery Framework हमें एक छोटा नाम “$” प्रदान करता है, जिसे हम jQuery Alias के नाम से Identify करते हैं।

यानी हम “jQuery” शब्द के स्थान पर केवल “$” Symbol का भी प्रयोग कर सकते हैं। अत: हम jQuery(‘p’).hide() को $(‘p’).hide() भी लिख सकते हैं, क्‍योंकि ‘$’ Symbol, ‘jQuery’ शब्द का Alias है।

हालांकि जब हम अपने Web Page में केवल jQuery को ही उपयोग में ले रहे होते हैं, तब हम jQuery() Function को $() के रूप में भी Use कर सकते हैं, लेकिन जब हम हमारे Web Page पर एक से ज्यादा Libraries को Use कर रहे होते हैं और उन Libraries में भी $ Symbol को ही उन Libraries के Gateway Function की तरह Use किया जा रहा होता है, तब Name Conflicting की समस्या पैदा हो जाती है।

क्‍योंकि जब एक से ज्यादा Libraries $() Method को उनके Gateway की तरह Use करते हैं, तो JavaScript Interpreter इस बात को ठीक तरीके से तय नहीं कर पाता कि हम $() Function के साथ जिस Code को लिख रहे हैं, वह Code jQuery से सम्बंधित है या किसी अन्‍य Library से। इस समस्या से बचने का एक तरीका ये है कि हम हमारे पूरे jQuery Code में $() Alias के स्थान पर हमेंशा jQuery() Function को ही Use करें और $() Function को अन्‍य Libraries के लिए Available करवा दें।

इस तरीके को Use करने के लिए हम jQuery के noConflict() Method को Use कर सकते हैं। जब हम इस Method को Use करते हैं, तो $ Symbol अन्‍य Libraries हेतु Use होने के लिए Available हो जाता है और हम हमारे jQuery Codes को लिखने के लिए jQuery() Symbol को Use करते हैं। इसे समझने के लिए हम एक उदाहरण देखते हैं।

चूंकि jQuery की तरह ही Prototype भी एक JavaScript Framework है और Default रूप से इस Framework का Gateway भी $ Symbol से ही Access होता है। अब यदि हम jQuery Cody लिखते समय $ Symbol के माध्‍यम से Prototype Framework के Methods को Access करना चाहते हैं जबकि jQuery() Function के माध्‍यम से jQuery के Method को Use करना चाहते हैं, तो हम इस जरूरत को निम्न Code लिखकर पूरा कर सकते हैं:

jQuery.noConflict();

// Do something with jQuery
jQuery("div p").hide();

// Do something with another library's $()
$("content").style.display = 'none';

जब हम हमारे JavaScript Code में jQuery.noConflict(); Statement को Use करते हैं, तो jQuery Framework $() Symbol को अन्‍य Library के साथ Use करने के लिए Free कर देता है। परिणामस्वरूप अब यदि हम jQuery Code लिखना चाहते हैं, तो हमें निम्नानुसार jQuery Namespace को Compulsory रूप से Use करना होता है:

// Do something with jQuery
 jQuery("div p").hide();

जबकि अब यदि हम निम्नानुसार Code द्वारा $ Symbol को Use करके अपना Code लिखते हैं, तो वह Code उस दूसरी Library के Codes को Represent करता है, जिसे jQuery के साथ Use किया जा रहा है।

// Do something with another library's $()
 $("content").style.display = 'none';

लेकिन जैसाकि हमने पहले भी कहा कि यदि हमारा jQuery Code कम हो, तब तो हम पूरे jQuery शब्द को बार-बार अपने Code में लिख सकते हैं लेकिन यदि हमारा jQuery Code बहुत ज्यादा हो, तो बार-बार jQuery शब्द को Use करना काफी असुविधाजनक हो जाता है। इस स्थिति में हम निम्नानुसार तरीके से एक Self Invoked JavaScript Function के रूप में अपना jQuery Code लिख सकते हैं:

jQuery.noConflict();       
(function($) {
  $(function() {
    // More code using $ as alias to jQuery
    $('div').hide();
  });
})(jQuery);

// Other code using $ as an alias to the other library
$('div').hide();

उपरोक्त Code में हमने सबसे पहले jQuery.noConflict(); Statement का प्रयोग करके $ Symbol को Free किया है, ताकि अन्‍य JavaScript Framework इसे Use कर सके। फिर हमने एक Self Invoked jQuery() Function में एक Anonymous Function Create किया है और Parameter के रूप में इस Function में jQuery Function Object का Reference Pass कर दिया है।

परिणामस्वरूप ये Reference Inner Anonymous Function के $ Symbol को Assign हो जाता है और हम इस Inner Function में सभी jQuery Library Methods को $ Symbol द्वारा Access कर सकते हैं, क्‍योंकि हमने jQuery() Method के अन्दर एक Anonymous Function Create किया है जो कि एक Private Scope है और Argument के रूप में हमने $ Symbol को Specify किया है।

Self Invoking Function होने की वजह से जब ये JavaScript Code Run होता है, तब jQuery Object का Reference Parameter के रूप में Inner Anonymous Function के $ Symbol को Assign हो जाता है। जिसकी वजह से हम Inner Function में jQuery Object को $ Symbol द्वारा Access करने में स{ाम हो जाते हैं।

जबकि jQuery.noConflict(); Statement का प्रयोग करने की वजह से Function से बाहर के Scope के लिए $ Symbol अन्‍य Libraries के Gateway के रूप में Available हो जाता है। इस तरह से हम एक ही $ Symbol को दो अलग Scope में दो अलग Libraries के Codes को Access करने के लिए Use कर सकते हैं।

यानी यदि हम उपरोक्तानुसार इस Inner Function में $() Function को Use करते हैं, तो Run होने वाला hide() Method वास्तव में jQuery Library का hide() Method होता है। जबकि इस Function से बाहर जब हम $() Method को Use करते हैं, तो ये External $ Symbol Prototype जैसी किसी दूसरी Library File के hide() Method को Call करता है।

इस प्रकार से हम एक ही $ Symbol को दो अलग Libraries के Methods को Access करने के लिए Use कर सकते हैं और दोनों Libraries का Scope अलग होने की वजह से किसी भी तरह की Conflicting की समस्या पैदा नहीं होती।

इस तरीके के अलावा एक और तरीका है, जिसका प्रयोग करके हम $ के स्थान पर किसी भी अन्‍य Variable Name को jQuery Alias के रूप में Use कर सकते हैं। जब हम JavaScript के noConflict() Method को Use करते हैं, तब ये Method एक Object Return करता है। इस Object को किसी Variable में Store करके हम उस Variable को ही jQuery या $ के स्थान पर Use कर सकते हैं। जैसे:

var jq = jQuery.noConflict();

// Do something with jQuery
jq("div").hide();

// Do something with another library's $()
$("div").hide();

जैसाकि हम उपरोक्त Code में देख सकते हैं कि noConflict() Method को Use करके हमने $ Symbol को अन्‍य Library द्वारा Use करने के लिए Free कर दिया है, लेकिन साथ ही हमने इस Method द्वारा Return होने वाले Object को jq नाम के एक Variable में Store कर लिया है। परिणामस्वरूप अब यदि हम चाहें तो jQuery() Function के स्थान पर jq() Function को भी Use कर सकते हैं और ऐसा ही हमने हमारे अगले Statement में निम्नानुसार किया है:

// Do something with jQuery
 jq("div").hide();

यानी उपरोक्तानुसार noConflict() Function को Use करके हम किसी भी नाम या Valid Symbol को jQuery() Function के लिए Assign कर सकते हैं।

हालांकि किसी भी तरह की समस्या से बचने के लिए हमें हमेंशा jQuery() Method को ही प्राथमिकता देनी चाहि,, लेकिन यदि आप अपने Web Page पर Interactivity से सम्बंधित सभी जरूरतों को पूरा करने के लिए केवल jQuery Library को ही Use कर रहे हैं, तो आप बिना किसी परेशानी के $() Method को Use कर सकते हैं। यदि आप अपने सारे jQuery Codes $() Method का प्रयोग करके लिखते हैं और भविष्य में किसी Specific Type की Requirement को पूरा करने के लिए आप अपने उसी Web Page में किसी अन्‍य Library को Use करते हैं, तो फिर आपको उपरोक्तानुसार Changes करने जरूरी हो जाऐंगे।

यानी आपको jQuery.noConflict(); Statement को Use करते हुए $ Symbol को अन्‍य Library के लिए Free करना होगा और अपने सभी jQuery Codes को निम्नानुसार एक Self Invoking Function के बीच Enclose करना पडेगा, तभी आपके Web Page पर दोनों Libraries सामान्‍य तरीके से काम करेंगी:

jQuery.noConflict();       

(function($) {
  // All your jQuery Codes enclose here…
})(jQuery);

इसके अलावा एक और बेहतर व आसान तरीका है, जिसमें हम $ को jQuery() Function में एक बार एक Parameter के रूप में Specify कर देते हैं, तो $ Symbol उस Scope के लिए jQuery Library हेतु Private Scope में Available हो जाता है। ये एक बहुत ही साधारण लेकिन Perfect तरीका है, जो कि निम्नानुसार है:

jQuery.noConflict();       

jQuery(function($) {
  // All your jQuery Codes enclose here…
});

चूंकि हमें सामान्यत: हमारे सारे jQuery Codes हमेंशा jQuery(‘document’).ready(); Statement के Handler के रूप में Specify कि, जाने वाले Anonymous Function अन्दर ही लिखने होते हैं, इसलिए यदि हम निम्नानुसार ready() Method के Handler Function में Parameter के रूप में $ Symbol को Specify कर दें, तो इस Handler Function Body में हम $ Symbol को केवल jQuery Library के Functions को ही Refer करेगा जबकि इस Function से बाहर Global Scope में हम जब भी $ Symbol को Use करेंगे, वह $ Symbol किसी अन्‍य Library के Methods को Refer करेगा।

jQuery(document).ready(function($) {
  // Code that uses jQuery's $ can follow here.
});

// Code that uses other library’s $ can follow here.

ये तरीका एक Perfect व बिल्कुल ही सरल तरीका है, जिसका प्रयोग करते हुए हम एक ही $ Symbol को अलग-अलग Scope में अलग-अलग Libraries के Methods को Access करने के लिए Use कर सकते हैं।