JQuery कैसे काम करता है: हम स्रोत कोड का अध्ययन करते हैं

jQuery वेब युवती उद्योग में स्पष्ट रूप से मानक बन गया है । कई बेहतरीन js चौखटे हैं जो ध्यान देने योग्य हैं, लेकिन jQuery ने अपनी लपट, लालित्य और जादू से सभी को प्रभावित किया। लोग jQuery का उपयोग करके लिखते हैं, लोग jQuery के लिए प्लगइन्स लिखते हैं, लोग jQuery के बारे में लेख भी लिखते हैं, लेकिन बहुत कम लोग जानते हैं (विशेषकर शुरुआती से) HQuery jQuery काम करता है।

इस लेख में, हम इस रूपरेखा के इनसाइड में एक छोटा सा भ्रमण करेंगे और विश्लेषण करेंगे कि अंदर क्या है।
लेख बुनियादी जावास्क्रिप्ट ज्ञान के लिए डिज़ाइन किया गया है। इसके बारे में सोचो और, यदि आप जानते हैं कि एक jQuery क्लोन कैसे लिखना है, तो सबसे अधिक संभावना है कि आपको यहां कुछ भी नया नहीं मिलेगा। बाकी के लिए - कैट में आपका स्वागत है

सामान्य जानकारी

jQuery एक जावास्क्रिप्ट लाइब्रेरी है।


आधिकारिक वेबसाइट jquery.com पर जॉन रेजिग उर्फ ​​जेरेसीग , एक प्रसिद्ध गुरु और मोज़िला कॉर्पोरेशन में पूर्व जावास्क्रिप्ट इंजीलवादी हैं । उनका अपना ब्लॉग है - ejohn.org , जहाँ उन्होंने शांत लेखों का एक गुच्छा और कैनवस के साथ काम करने के लिए लिखा था - प्रोसेसिंग.जेएस , साथ ही साथ पुस्तक "जावास्क्रिप्ट। पेशेवर प्रोग्रामिंग तकनीक। ” RIT हॉल ऑफ फ़ेम में स्थित है

मुख्य jQuery रिपॉजिटरी GitHub पर स्थित है , जहां स्रोत कोड, यूनिट परीक्षण, कलेक्टर, js-lint चेकर, आदि स्थित हैं।

इस बिंदु पर, मैं गीथहब पर ध्यान देना चाहता हूं। OpenSource Javascript लिबास की एक बड़ी संख्या - प्रोटोटाइप , js , MooTools , node.js , jQuery , राफेल , LibCanvas , YUI, साथ ही साथ जावास्क्रिप्ट (और न केवल जावास्क्रिप्ट) समुदाय का एक महत्वपूर्ण हिस्सा वहां शरण पाया, क्योंकि यदि आप अपनी जावास्क्रिप्ट परियोजना को पूरा करना चाहते हैं। GitHub सबसे अच्छी जगह है।

/ Src निर्देशिका में कई फ़ाइलों में विभाजित स्रोत फ़ाइलें हैं। यदि आपने code.jquery.com/jquery-*.js फ़ाइल को देखा था और इस बात से भयभीत थे कि आप कैसे भ्रमित हो सकते हैं, तो आपको पता होना चाहिए कि सब कुछ संरचित है और इतना भयानक नहीं है। एक बिल्डर का उपयोग करके इकट्ठा किया गया है। इसमें, स्रोत के "@ संस्करण" और "@ डेट" को संबंधित मानों से बदल दिया जाता है।

हम स्रोत कोड में गहराई से जाते हैं

कोडिंग शैलियों बहुत परिचित और साधारण हैं। मैं आपको प्रसन्न या निराश करूंगा। टैब और मिस्र के ब्रैकेट का उपयोग किया जाता है। केवल # इंडेंटेशन को निरस्त किया जाता है, संरेखण का उपयोग कहीं भी नहीं किया जाता है।

दो फाइलें हैं - intro.js और outro.js , जिन्हें क्रमशः एकत्रित स्रोत की शुरुआत और अंत में रखा जाता है।

(function( window, undefined ) { var document = window.document, navigator = window.navigator, location = window.location; [...] //    window.jQuery = window.$ = jQuery; })(window); 

कोर

हमारे लिए मुख्य ब्याज core.js फ़ाइल है, जिसमें सभी "मांस" शामिल हैं।

स्रोत कोड इस तरह दिखता है। हम देखते हैं कि कोड नेस्टिंग का एक और स्तर गिरा दिया है, जिससे चर के दायरे को नियंत्रित करना आसान हो जाता है:

 var jQuery = (function () { var jQuery = function ( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }; // Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ in case of overwrite _$ = window.$, // A central reference to the root jQuery(document) rootjQuery, [...] rootjQuery = jQuery(document); [...] return jQuery; })(); 

कॉपी किए गए अनुभाग में, आप jQuery ऑब्जेक्ट के निर्माता, jQuery और $ के सहेजे गए वर्तमान मानों को देख सकते हैं (हमें बाद में उन्हें jQuery.noConflict() ) के साथ-साथ कुछ रूटजिविक को लागू करने की आवश्यकता होगी - दस्तावेज़ के लिंक के साथ एक jQuery ऑब्जेक्ट (अक्सर कैश $(document) पाया जाता है $(document) अनुकूलन)

थोड़ा कम RegExp की एक श्रृंखला है जिसे jQuery.browser, jQuery.trim, json parsing, आदि को लागू करने के लिए आवश्यक है। आधुनिक ब्राउज़र ''.trim और [].indexOf , क्योंकि jQuery ने उनके लिए लिंक बनाए रखा है और अपने jQuery.trim और jQuery.inArray में मूल कार्यान्वयन का उपयोग करता है।

 trim = String.prototype.trim, indexOf = Array.prototype.indexOf, 

वस्तु निर्माण

हम "पवित्र-संतों" के साथ जुड़ रहे हैं jQuery - $ -function। यह हिस्सा एक अ-आच्छादित व्यक्ति के लिए सबसे मुश्किल टुकड़ा है, इसलिए हम इसे एक नए सिरे से सीखते हैं;) jQuery के प्रोटोटाइप का जादू यहां छिपा हुआ है, मुझे इस बात की जानकारी नहीं है कि यह इस तरह क्यों काम करता है , मैं केवल यह काम करता हूं।

हमने पहले ही ऊपर jQuery कंस्ट्रक्टर कोड देखा है:

 var jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); }, 

यही है, जब आप jQuery फ़ंक्शन को कॉल करते हैं, तो इकाई " jQuery.fn.init " बनाई जाती है और वापस आ जाती है। यह जगह जावास्क्रिप्ट जादू का उपयोग करती है। कोड में थोड़ा कम हम लगभग निम्नलिखित पा सकते हैं:

 jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { [...] } [...] } // Give the init function the jQuery prototype for later instantiation jQuery.fn.init.prototype = jQuery.fn; 

अब से, हम जानते हैं कि jQuery.fn एक jQuery प्रोटोटाइप से ज्यादा कुछ नहीं है और यह ज्ञान हमें कुछ नीचे जानने में मदद करेगा। इसके अलावा, jQuery.fn.init.prototype एक jQuery प्रोटोटाइप के लिए अंक, और jQuery.fn.init.prototype निर्माता jQuery को इंगित करता है। यह दृष्टिकोण हमें एक बहुत ही रोचक परिणाम देता है। JQuery खोलें, क्रोम कंसोल, और दर्ज करें:

 $(document) instanceof jQuery; // true $(document) instanceof jQuery.fn.init; // true 

ताकि आप इस व्यवहार का सार समझें, मैं आपको एक और उदाहरण दूंगा:

 var Init = function () { console.log('[Init]'); }; var jQuery = function () { console.log('[jQuery]'); return new Init(); }; Init.prototype = jQuery.prototype = { constructor: jQuery }; var $elem = jQuery(); // [jQuery] , [Init] console.log( $elem instanceof jQuery ); // true console.log( $elem instanceof Init ); // true 

इस प्रकार, सभी निर्माण jQuery.fn.init ऑब्जेक्ट jQuery.fn.init , और jQuery jQuery.fn.init ऑब्जेक्ट jQuery.fn.init

पारसिम तर्क

JQuery फ़ंक्शन का उपयोग करने के लिए कई विकल्प हैं:

 $(function () { alert('READY!') }); // ,      DOM $(document.getElementById('test')); //    $('<div />'); //    $('<div />', { title: 'test' }); //      //       css-: $('#element'); //    "element" $('.element', $previous ); //      element  $previous $("div[name=city]:visible:has(p)"); //  ,     

चयनकर्ताओं के विस्तृत विवरण के लिए - एंटोनशेवचुक के लेख " शुरुआती के लिए jQuery। भाग 4। चयनकर्ता " पढ़ें ।

हम कंस्ट्रक्टर में आते हैं, जो, जैसा कि हम पहले से ही जानते हैं jQuery.fn.init । मैं यहां छद्म कोड प्रदान करूंगा:

 init: function( selector, context, rootjQuery ) { if ( !selector ) return this; // Handle $(DOMElement) if ( selector.nodeType ) return this = selector; // The body element only exists once, optimize finding it if ( selector === "body" && !context ) return this = document.body; if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } // Handle HTML strings if ( typeof selector === "string" ) { // Verify a match, and that no context was specified for #id if ( selector.match(quickExpr) ) { if ( match[1] ) { return createNewDomElement( match[1] ); } else { return getById( match[2] ) } } else { return jQuery( context ).find( selector ); } } }, 

पहले चार टुकड़े काफी समझ में आते हैं - वे मामलों का प्रसंस्करण कर रहे हैं जब वे एक खाली चयनकर्ता, एक डोम तत्व को चयनकर्ता या स्ट्रिंग 'बॉडी' के रूप में पारित करते हैं - जल्दी से दस्तावेज़ शरीर प्राप्त करने के लिए, साथ ही डोमरेड्डी के लिए फ़ंक्शन को संसाधित करते हैं।

मामले के साथ एक दिलचस्प बिंदु जब हम एक स्ट्रिंग पास करते हैं। सबसे पहले, यह इसे "तेज नियमित अभिव्यक्ति" के साथ पार्स करता है। इसमें, बाएं भाग लाइन में टैग खोजने के लिए जिम्मेदार है, और दूसरा भाग तत्व की आईडी द्वारा खोज करने के लिए है:
quickExpr = /^(?: [^<]*(<[\w\W]+>)[^>]*$ | #([\w\-]*)$ )/;

और केवल अगर अनुरोध अधिक जटिल है, तो find विधि को वर्तमान संदर्भ में कहा जाता है, जो खोज इंजन का उपयोग करके तत्व की खोज करता है (यह भी JResig द्वारा प्रायोजित) Sizzle (अधिकार Dojo फाउंडेशन से संबंधित हैं)।

प्लगइन विकास

कई जावास्क्रिप्ट पेशेवरों को पता है कि एक प्रोटोटाइप वर्ग को बहुत आसानी से बढ़ाया जा सकता है।

 var MyClass = function () { // constructor }; MyClass.prototype = { // prototype }; var instance = new MyClass(); //            ,    MyClass.prototype.plugin = function () { console.log("He's alive!"); }; instance.plugin(); // He's alive! 

उसी तरह, हम मानक jQuery के प्रोटोटाइप का विस्तार कर सकते हैं:

 jQuery.prototype.plugin = function () { // Here is my plugin }; 

लेकिन, जैसा कि हमने पहले ही ऊपर उल्लेख किया है, fn jQuery.prototype का एक छोटा लिंक है, जिससे आप कम लिख सकते हैं:

 jQuery.fn.plugin = function () { // Here is my plugin // this    jquery-,     }; 

और यह प्लगइन सभी पहले से ही निर्मित और उन लोगों में दिखाई देगा जो कि बनाई गई इकाइयाँ हैं। सीधे ऑब्जेक्ट में गुण जोड़कर, हम स्थैतिक गुणों को लागू करते हैं:

 jQuery.plugin = function () { // Here is my plugin }; 

इस प्रकार, छोटे प्लगइन्स के लिए सबसे अच्छा टेम्पलेट:

 new function (document, $, undefined) { var privateMethod = function () { // private method, used for plugin }; $.fn.myPlugin = function () { }; // ,   ,    dom-: $.myPlugin = function () { }; }(document, jQuery); 

यह दृष्टिकोण jQuery के अधिकांश प्लगइन्स में देखा जा सकता है, उदाहरण के लिए, डेटपिकर ।

निष्कर्ष

मेरी राय में, jQuery की लोकप्रियता का कारण बाहरी सादगी और हल्कापन था, साथ ही नामों की संक्षिप्तता: setStyles खिलाफ setStyles , setAttributes खिलाफ attr , आदि। विचार सिर्फ सुंदर था और कई लोगों का मन जीत लिया। JQuery के क्लोन बहुत आम हैं या विचारों को अन्य भाषाओं में स्थानांतरित किया जाता है। लेकिन सरलता धोखा है। और यह हमेशा अच्छा नहीं होता है, इसलिए हमेशा अपनी विधि के समझने योग्य नाम को छोटा करने से पहले तीन बार सोचें, हो सकता है कि यह आपके सामने आ जाए;)

मुझे उम्मीद है कि आपको यह लेख अच्छा लगा होगा और यह बहुत ही लाजिमी नहीं था यदि आप चाहते हैं, तो आप चक्र को जारी रख सकते हैं और गहराई तक jQuery में जा सकते हैं, या अन्य रूपरेखाओं का पता लगा सकते हैं।