jQuery Framework और कुछ नहीं, केवल एक JavaScript File मात्र है, जिसे हमें हमारे HTML Page में <script> Element द्वारा Include करना होता है। जैसे ही हम jQuery File को अपने HTML Page के <script> Element के src Attribute में Specify करते हैं, हम Current Web Page में jQuery की सभी Functionalities को उपयोग में ले सकते हैं।
jQuery की Functionalities को उपयोग में लिया जा सके, इसके लिए सबसे पहले हमें jQuery Framework यानी jQuery Library File को Download करना होता है। jQuery Library पूरी तरह से Free है और इसे http://jquery.com से Download किया जा सकता है। यदि आप jQuery की File को अपने Web Server पर Hold करना नहीं चाहते, तो आप Google, Microsoft या स्वयं jQuery के CDN पर Hosted jQuery Library को भी उपयोग में ले सकते हैं। दोनों तरीकों से अपने Web Page में jQuery को Include करने का तरीका निम्नानुसार है:
ON Own Web Server
//File Name: jQueryEmbeding.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery - Embedding in WebPage</title> <script type='text/javascript' src="js/jquery-1.9.1.js"></script> </head> <body> </body> </html>
उपरोक्त Code में हम ये मान रहे हैं कि हमारे Current Web Project के Folder के अन्दर ही JavaScript नाम का एक Folder है और इसी Folder में हमारी jQuery Library File Stored है, जिसका नाम jquery-1.9.1.js है।
उपरोक्त Web Page में jQuery Library File को Current Web Page में Include करने का काम निम्न Statement कर रहा है:
<script type=’text/javascript’ src=”js/jquery-1.9.1.js”></script>
जब हम हमारे स्वयं के Web Server पर jQuery Library File को Host करना नहीं चाहते, तब हम निम्नानुसार Google, Microsoft या स्वयं JQuery के CDN का प्रयोग करके भी jQuery Library File को अपने Web Page पर Embed कर सकते हैं:
ON CDN (Content Delivery Network)
//File Name: jQueryEmbeding.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery - Embedding in WebPage</title> <!-- CloudFlare CDN --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js" ></script> <!-- Microsoft CDN --> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js" ></script> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.js" ></script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" ></script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" ></script> <!-- jQuery CDN --> <script src="http://code.jquery.com/jquery-1.9.1.min.js" ></script> <script src="http://code.jquery.com/jquery-1.9.1.js" ></script> <script src="http://code.jquery.com/jquery.js" ></script> <script src="http://code.jquery.com/jquery.min.js" ></script> <script src="http://code.jquery.com/jquery-latest.min.js" ></script> <script src="http://code.jquery.com/jquery-latest.js" ></script> <!-- Google CDN --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js" ></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" ></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.js" ></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" ></script> </head> <body> </body> </html>
jQuery के हमेंशा दो Versions Available रहते हैं। पहला Version Source Version होता है, जिसे सामान्यत: Web Development या Production के समय Use किया जाता है, जबकि दूसरे Version को Minified Version कहते हैं और ये Version सामान्यत: तब Use किया जाता है, जब Web Site को User के लिए Online Publish किया जाता है, क्योंकि Minified Version को Compress कर दिया जाता है, जिससे इसकी Size कम हो जाती है।
परिणामस्वरूप जब User हमारी Web Site के Pages को Access करता है, तो jQuery ज्यादा तेजी से User के Web Browser में Download हो जाता है और User हमारे Web Pages को ज्यादा तेजी से Access कर पाता है।
सामान्यत: Minified Version में “min” शब्द का प्रयोग किया जाता है जैसाकि उपरोक्त Example Code में आप देख सकते हैं कि विभिन्न CDN Networks jQuery के Minified व Full, दोनों Versions Provide करते हैं और हम जिसे चाहें उसे उपयोग में ले सकते हैं।
यदि आप Microsoft CDN द्वारा Provided jQuery Library Use करते हैं, तो आप aspnet व microsoft दोनों CDN से jQuery Library को अपने Web Page में Include कर सकते हैं।
microsoft पुराना CDN है जबकि aspnet Microsoft द्वारा Provided नया CDN है। इसलिए यदि आप Microsoft द्वारा Provided CDN jQuery Library Use कर रहे हैं, तो आपको निम्नानुसार Code द्वारा aspnet CDN का ही प्रयोग करना चाहिए:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" ></script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" ></script>
यदि आप jQuery CDN को jQuery Library के लिए Use करते हैं, तो jQuery CDN तीन तरीके से jQuery Library Provide करता है, जो कि निम्नानुसार हैं:
<script src="http://code.jquery.com/jquery-1.9.1.min.js" ></script> <script src="http://code.jquery.com/jquery-1.9.1.js" ></script>
इस तरीके से jQuery Library को Use करने पर आप निश्चत रूप से ये तय करते हैं कि आप jQuery के 1.9.1 Version को ही अपने Web Page में Include कर रहे हैं। जबकि:
<script src="http://code.jquery.com/jquery.js" ></script> <script src="http://code.jquery.com/jquery.min.js" ></script> <script src="http://code.jquery.com/jquery-latest.min.js" ></script> <script src="http://code.jquery.com/jquery-latest.js" ></script>
इन दोनों तरीकों से यदि आप jQuery CDN की jQuery Library को Use करते हैं, तो आपके Web Page के लिए हमेंशा Latest jQuery Version Download होता है। उपरोक्त दोनों तरीकों में एक मुख्य अन्तर ये है कि यदि आप पहले तरीके को Use करते हैं, यानी यदि आप Exact Version के jQuery Framework को Use करते हैं, तो वह jQuery Library JavaScript File User के Web Browser में तब तक के लिए Cache हो जाती है, जब तक कि User अपने Computer के Operating System को पूरी तरह से Format नहीं करता अथवा User स्वयं Manually अपने Web Browser के Cache को Clear नहीं करता।
जबकि यदि आप दूसरे तरीके को Use करते हैं, तो jQuery Library User के Web Browser में बहुत कम समय के लिए Cache होती है। परिणामस्वरूप उस निश्चत अविध के बाद यदि User फिर से आपकी Web Site के Pages Open करता है, तो jQuery Library फिर से Download होती है।
आप समझ ही गए होंगे कि दोनों तरीकों का अपना एक फायदा है तो एक नुकसान भी है। जब आप पहले तरीके से Exact Version के jQuery Library को अपने Web Page में Embed करते हैं, तब वह jQuery Library File User के Web Browser में Cache हो जाने की वजह से आपकी Web Site के सभी Web Pages User के Computer में Fast Render होते हैं, लेकिन जब भी jQuery का नया Version Launch होता है, तो आपको अपने Web Page में उस Latest Version को Manually Modify करना पडता है।
जबकि यदि आप दूसरे तरीके को Use करते हैं, तो आपको हर नए jQuery Version के लिए अपने Web Pages को Manually नए jQuery Version के लिए Modify नहीं करना पडता लेकिन उस स्थिति में User के Computer में jQuery Library बार-बार Download होती है, जिससे आपकी Web Site के Web Pages User के Computer में धीमी गति से Render होते हैं। इसी प्रकार से यदि आप Google का CDN Use करते हैं, तो आप निम्नानुसार तीन तरीकों से jQuery को अपने Web Page में Include कर सकते हैं:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js" ></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
पहले तरीके में Exact jQuery Version को Specify करने की वजह से ये Library User के Web Browser के Cache में अधिकतम 1 साल तक Exist रहती है, जबकि User अपने Computer के Operating System को Format न करे या अपने Web Browser के Cache को Manually Remove न करे। जबकि दूसरे तरीके में jQuery Library User के Computer में केवल एक दिन तक ही Cached रहती है। 24 Hours के बाद अगले दिन यदि User आपकी Web Site को फिर से Open करता है, तो jQuery Library एक बार फिर से Download होती है।
इसी तरह से यदि आप दूसरे तरीके को Use करते हैं, तो jQuery के 1.9 के बाद के सभी Sub-Versions में से जो Sub-Version सबसे Latest होता है, वही Sub-Version User के Computer में Download होता है।
जबकि यदि आप तीसरे तरीके को Use करते हैं, तो jQuery Library User के Computer में केवल एक घण्टे तक ही Cached रहता है। परिणामस्वरूप तीसरा Version वास्तव में Latest jQuery Version को Represent करता है और जैसे ही नया jQuery Version Launch होता है, वह आपकी Web Site के लिए Available हो जाता है, जबकि jQuery का Version 1 ही हो। यदि Version की शुरूआत 2 से हो गई, तो आपको फिर से अपने Web Pages में jQuery को Manually Latest Version के लिए Modify करना पडेगा।
आप समझ ही गए होंगे कि आप jQuery के जितना Latest Version के लिए अपने Web Pages को Create करेंगे, jQuery उतने ही कम समय के लिए User के Web Browser में Cache होगा। इसलिए आप स्वयं ही निर्णय करें कि आपको अपनी Web Site की Performance बढानी है या आपको Manual Changes से बचना है।
यदि आप Performance बढाना चाहते हैं, तो आपको Exact Version के jQuery Library को अपने Web Pates में Include करना चाहिए। जबकि यदि आप अपने Web Pages को Future में Manually Change करना नहीं चाहते, तो आपको jQuery के Latest Version के CDN को Use करना चाहिए।
वैसे अपने Web Pages को हमेंशा Latest Version के CDN को Use करने के लिए Set करने पर एक परेशानी और भी है और वो परेशानी ये है कि सामान्यत: विभिन्न नए Versions के साथ कुछ jQuery Functionalities को Deprecate किया जाता है और कुछ नई Functionalities को Add किया जाता है। अब यदि आप अपने Web Pages में निम्न में से किसी CDN को Use करते हैं:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" ></script> <script src="http://code.jquery.com/jquery.js" ></script> <script src="http://code.jquery.com/jquery.min.js" ></script> <script src="http://code.jquery.com/jquery-latest.min.js" ></script> <script src="http://code.jquery.com/jquery-latest.js" ></script>
और नए jQuery Version में किसी ऐसे Method को Deprecate कर दिया गया है, जिसे आप अपनी Web Site पर Use कर रहे हैं या आप जिस jQuery Method को Use कर रहे हैं, उसे jQuery Library में किसी वजह से Modify किया गया है और वह Method अब Exactly वैसा ही काम नहीं करता, जैसा उस समय करता था, जब आपने उसे अपने Web Page पर किसी जरूरत को पूरा करने के लिए Use किया था, तो Automatically Latest Version Set होने की वजह से आपके Web Site के वे Pages ठीक से काम करना बन्द कर देंगे, जो पहले कर रहे थे।
इसलिए बेहतर यही रहता है कि हमेंशा Exact Version के CDN का ही प्रयोग किया जाए और जब भी कोई नया Version Launch हो, तो पहले ये तय कर लिया जाए कि कहीं उस नए Version में ऐसा कोई Change तो नहीं किया गया है, जो आपकी Web Site के Pages के लिए ठीक न हो।
इस बात को निश्चत करने के बाद ही Manually jQuery Library को नए Version के लिए Modify किया जाए, ताकि आपके Web Site की Functionality पर कोई विपरीत प्रभाव न पडे और यदि कुछ विपरीत प्रभाव पडे, तो आप तुरन्त पिछले Version के jQuery पर Switch कर सकें।
यदि आप आपने स्वयं के Web Host पर jQuery Library को Host करना नहीं चाहते बल्कि आप किसी CDN की jQuery Library को ही अपने Web Page में Include करना चाहते हैं, तो आपको Google के CDN को ही Use करना चाहि, क्योंकि वर्तमान समय में सबसे ज्यादा Developers ने Google CDN को ही Use किया है।
परिणामस्वरूप ज्यादातर सम्भावना यही होती है कि User जब आपकी Web Site Open करता है, तो उसके Web Browser के Cache में पहले से ही Google CDN से आई हुई jQuery Library Files Exist होती है और आपके Web Page के लिए वह File Download नहीं होती।
परिणामस्वरूप आपका Web Page और ज्यादा तेजी से User के Web Browser में Load होता है। साथ ही विभिन्न Web Developers ने Research करके ये जाना है कि अन्य CDNs की तुलना में Google का CDN ज्यादा Fast है। इस वजह से भी Google के CDN को प्राथमिकता देनी चाहिए।
आप देख सकते हैं कि Google CDN को Use करते समय हमने <script> Element के src Attribute में Specify कि, गए URL में Protocol (http, https) को Specify नहीं किया है।
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" ></script>
हमने ऐसा इसलिए किया है क्योंकि Google के CDN इन दोनों Protocols को Support करते हैं। इसलिए यदि किसी कारण से कभी कोई Protocol काम न करे, तो उस स्थिति में Google CDN से jQuery Library Download नहीं हो पाएगा क्योंकि सामान्यत: Google स्वयं http से https पर Redirect करता है और Redirect Fail हो जाने की स्थिति में ऐसा हो सकता है।
इसलिए जब हम Protocol को Specify नहीं करते हैं, तो Web Browser स्वयं ही उपयुक्त Protocol को Use करते हुए Google CDN से jQuery Library को Download कर लेता है। लेकिन ऐसा सिर्फ Google CDN के साथ होता है।
साथ ही एक और ध्यान रखने वाली बात ये है कि जब हम उपरोक्त तरीके से Google CDN को Use करते हैं, तब यदि हम Local Computer पर Development करते हैं, तो Local Computer के Web Browser के Cache में Stored jQuery Library Use नहीं होता बल्कि हमेंशा CDN से ही Library Download होता है।
अत: यदि Google CDN को Use करने में किसी तरह की परेशानी आ रही हो, तो आप “https” Protocol के साथ उपरोक्त jQuery CDN को निम्नानुसार Specify कर सकते हैं:
<script src="https//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script> <script src="https//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" ></script>
यानी यदि जरूरत हो, तो हमेंशा “https” Protocol को ही Use करना चाहि,, http को नहीं। फिर भी बेहतर यही है कि Development के समय हमें हमेंशा हमारे Local Computer पर Stored jQuery Library को ही Use करना चाहि, और जब Web Site या Web Application पूरी तरह से तैयार हो जाए, तब अपने Local jQuery Library File को Google CDN से Replace कर देना चाहिए।
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook jQuery in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
jQuery in Hindi | Page:711 | Format: PDF
