काम पर, मुझे कई बार हमारी कंपनी में क्लाइंट साइडर की स्थिति के लिए उम्मीदवारों के साक्षात्कार में भाग लेना था, जावास्क्रिप्ट में उनके ज्ञान को देखने के लिए। हैरानी की बात है, उनमें से कोई भी वास्तव में नहीं जानता था कि अंदर से बाहर तक jQuery कैसे काम करता है, यहां तक ​​कि जो लोग अपने jQuery के ज्ञान को "उत्कृष्ट", अफसोस के रूप में चिह्नित करते हैं।

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

क्षमा करें, विचलित। पोस्ट का सार और श्रृंखला के निम्नलिखित भागों के बारे में बात करना है कि पुस्तकालय अंदर से कैसे काम करता है और इसमें क्या होता है क्योंकि कुछ तरीकों को निष्पादित किया जाता है।

स्रोत कोड

परियोजना के स्रोत यहां हैं । सब कुछ कई मॉड्यूल में विभाजित है, इसे ग्रंट की मदद से एक में (किसी के द्वारा भी सफलतापूर्वक) इकट्ठा किया जाता है। लेख में विश्लेषण के लिए, मैं नवीनतम स्थिर संस्करण के कोड का उपयोग करूंगा (लेखन के समय, यह 1.8.3 है)।

आंकिक रूप से, इस लेख में हम एक ऐसी स्क्रिप्ट पर विचार करेंगे, जिसे ग्लूइंग इंट्रो द्वारा प्राप्त किया जा सकता है। core.js, [sizzle] (संक्षेप में), sizzle-jquery.js, support.js (संक्षेप में भी), और outro.js।

Intro.js और outro.js स्क्रिप्ट्स की जरूरत सिर्फ एक गुमनाम फंक्शन में लाइब्रेरी कोड को रैप करने के लिए होती है, ताकि विंडो को लिटाना न पड़े। विंडो और अपरिभाषित पैरामीटर फ़ंक्शन को पारित किए जाते हैं (यह पैरामीटर पारित नहीं होता है, और इसलिए अपरिभाषित होता है)। क्यों? ऐसे चरों का नामकरण के दौरान उनके नाम नहीं बदलते हैं, लेकिन फ़ंक्शन मापदंडों के नाम संपीड़ित होते हैं और इस तरह के हेरफेर के परिणामस्वरूप गंभीर लाभ होता है।

प्रारंभ

पहली बात जब हम लोड करते हैं तो jQuery लोड हो रहा है। कोर, फ्रेमवर्क का कोर। RegExp और नीचे उपयोग किए गए चर का एक टन घोषित करने के अलावा, प्रारंभिक चरण में क्या होता है:

सबसे पहले, jQuery और इसके उपनाम $ लिंक सहेजे जाते हैं, जब वे पहले से ही खिड़की में होते हैं। यह उस स्थिति में किया जाता है जब noConflict फ़ंक्शन को बुलाया जाता है , जो $ ऑब्जेक्ट लौटाता है (और यदि noConflict को सही पर सेट किया गया है, तो jQuery) अपनी जगह पर वापस आ जाता है, और इसके कार्य के परिणामस्वरूप हमें इस स्क्रिप्ट में पहले से वर्णित jQuery देता है। जब आप अपने कोड का उपयोग करने की योजना बनाते हैं और तृतीय-पक्ष संसाधन पर jQuery का उपयोग करते हैं तो यह फ़ंक्शन उपयोगी होता है और लोगों को कुछ भी तोड़ना नहीं चाहता है।

एक स्थानीय jQuery फ़ंक्शन बनाया गया है, जो एक प्रकार का "कंस्ट्रक्टर" है जो चयनकर्ता और संदर्भ पर आधारित होता है। एक फ़ंक्शन जो डेवलपर्स अपने अधिकांश समय के साथ काम करते हैं। यह यह होगा कि बहुत अंत में window.jQuery और window.$ को निर्यात किया जाएगा window.$ ( Exports.js )। इसके अलावा, इस ऑब्जेक्ट का विस्तार इसके प्रोटोटाइप ( jQuery.prototype , उर्फ jQuery.prototype ) में अतिरिक्त तरीकों को jQuery.fn किया जाएगा। Aforementioned "कंस्ट्रक्टर" jQuery.fn - init में विधियों में से एक को कॉल करता है, इसके बारे में थोड़ी देर बाद।

ध्यान, जादू:

 jQuery.fn.init.prototype = jQuery.fn 

इसीलिए, इस "निर्माणकर्ता" के कार्य के परिणाम से, आप हमेशा सभी jQuery विधियों तक पहुँच सकते हैं।

दरअसल, jQuery.fn विस्तार बुनियादी तरीकों से किया जाता है, जिनमें से jQuery.extend , जिसका उपयोग वस्तुओं का विस्तार करने के लिए किया जाता है, जिसमें jQuery की कार्यक्षमता का और विस्तार शामिल है।

एक class2type सेवा हैश class2type , जो कार्य करने के लिए प्रकार और उसके डेरिवेटिव के लिए आवश्यक है ( isArray , isFunction , isNumeric , आदि)। यहां आप विशेष जादू पर ध्यान दे सकते हैं - सामान्य प्रकार का प्रकार कुछ प्रकार के चर को परिभाषित करने के लिए बहुत सुविधाजनक नहीं है, इसलिए jQuery में इसके लिए यह विधि मौजूद है। तदनुसार, इसका कार्यान्वयन सामान्य typeof से थोड़ा अलग है।

और अंत में, rootjQuery बनाया गया है, एक चर जिसमें jQuery(document) निष्पादन का परिणाम निहित है, यह इसके संबंध में है कि यदि संदर्भ डेवलपर द्वारा सीधे सेट नहीं किया गया है, तो init से तत्वों को खोजा जाएगा।

सब कुछ अपेक्षाकृत सरल प्रतीत होता है, लेकिन यह सभी चिंताएं केवल core.js. लोड करते समय कोई भी मॉड्यूल कुछ करता है और उन्हें अलग से विचार करना बेहतर होता है। हम अलग से support.js का उल्लेख करते हैं, जिसमें प्रारंभ में ब्राउज़र की क्षमताओं को निर्धारित करने के लिए बहुत सारे परीक्षण किए जाते हैं।

JQuery की वस्तु

तो एक jQuery वस्तु क्या है और क्यों?

आमतौर पर $([- ]) का परिणाम कुछ इस प्रकार है:

 { 0: , 1: 2, context:  length: 2, selector: '  - ' __proto__: (   ,    - jQuery.fn) } 

यह length संपत्ति के कारण है कि किसी कारण से कई गलत हैं और सोचते हैं कि यह वास्तव में एक सरणी है। वास्तव में, लंबाई की संपत्ति मैन्युअल रूप से jQuery के अंदर बनाए रखी जाती है और लौटे तत्वों की संख्या होती है जो ऑब्जेक्ट की अनुक्रमित कुंजियों में खरोंच से अनुक्रमित होती हैं। यह ठीक से किया जाता है ताकि आप इस ऑब्जेक्ट के साथ एक सरणी के रूप में काम कर सकें। एक selector स्ट्रिंग को selector संपत्ति में रखा जाता है, अगर हमने इसे खोजा था, और context - वह संदर्भ जिसके द्वारा हमने खोज किया था (यदि निर्दिष्ट नहीं है, तो यह होगा - document )।

याद रखें कि कोई भी jQuery फ़ंक्शन जिसे किसी विशेष परिणाम को वापस करने का इरादा नहीं है, हमेशा एक ऑब्जेक्ट लौटाता है जिसका प्रोटोटाइप jQuery.fn , इसलिए आप कॉल की काफी बड़ी श्रृंखला बना सकते हैं।

jQuery.fn.init

तो क्या होता है जब हम $([- ]) तरह कुछ निष्पादित करते हैं? ध्यान से पढ़ें? यह सही है, उसी "कंस्ट्रक्टर" को बुलाया जाएगा। अधिक सटीक होने के लिए , new jQuery.fn.init([ ]) हमारे पास लौटेगा।

सबसे पहले, फ़ंक्शन यह जांच करेगा कि क्या चयनकर्ता इसे पास किया गया है, और यदि यह पारित नहीं किया गया है (या एक खाली स्ट्रिंग पारित किया गया है, अशक्त, गलत, अपरिभाषित) - इस मामले में हम एक खाली jQuery वस्तु लौटाएंगे, जैसे कि इसे खिड़की के माध्यम से एक्सेस किया था। $।

फिर यह जांचा जाएगा कि चयनकर्ता एक DOM तत्व है या नहीं। इस स्थिति में, jQuery इस तत्व के साथ सीधे वस्तु को लौटाएगा। $(document.body) साथ उदाहरण $(document.body) :

 { 0: <body>, context: <body>, length: 1, __proto__: ... } 

यदि चयनकर्ता एक स्ट्रिंग है, तो संदर्भ के सापेक्ष (यदि कोई संदर्भ नहीं है, तो यह दस्तावेज़ है, ऊपर rootjQuery देखें), निर्दिष्ट चयनकर्ता की खोज विधि निष्पादित की जाएगी, अर्थात:

 $('p', document.body) -> $(document.body).find('p') $('p') -> rootjQuery.find('p') 

अगर चयनकर्ता #id जैसा कुछ है, तो सामान्य document.getElementById #id को तत्व (हेल्लो, #id इन कैनवस विद आर्टिकल) की खोज के लिए बुलाया जाएगा।

लेकिन अगर चयनकर्ता के बजाय html कोड प्रसारित किया जाता है (यह लाइन की शुरुआत में टैग के उद्घाटन टैग की उपस्थिति और अंत में बंद होने से निर्धारित होता है), jQuery इसे पार्स करने की कोशिश करेगा ( parseHTML , जिसे हम अगले भाग में अधिक विस्तार से चर्चा करेंगे) और इसके आधार पर इन तत्वों का निर्माण करेंगे और उनके साथ पहले से ही परिणाम लौटा दें। यह हमें $(' -- - ') से मिलता है $(' -- - ')

$(' -- - ')

$(' -- - ') :

 { 0: <h1> 1: <p> length: 2 __proto__: ... } 

पैराग्राफ के अंदर की अवधि पर ध्यान दें - परिणामों में यह इसके अंदर भी होगा, सूचकांक 1 के साथ तत्व में।

ऐसे मामलों के लिए जब एक चयनकर्ता के बजाय, एक फ़ंक्शन आता है, jQuery इसे तब कॉल करेगा जब दस्तावेज़ काम के लिए तैयार हो। यहां वादा का उपयोग किया जाता है, जिसे एक अलग अध्याय को उजागर करना चाहिए। किसी कारण के लिए, बहुत से लोग थोड़े लंबे एनालॉग - $(document).ready( callback ) (टिप्पणियों में वे कहते हैं कि यह अधिक पठनीय है), लेकिन अंत में यह समान हो जाता है।

jQuery.find

Jizz लाइब्रेरी एक दस्तावेज़ की खोज करने के लिए Sizzle लाइब्रेरी का उपयोग करती है, इसलिए find , साथ ही साथ expr , unique , text , isXMLDoc और contains सीधे Sizzle से उनके संबंधित तरीकों को देखें, या उनके ऊपर सरल आवरण विधियों को शामिल करें। चयनकर्ताओं का काम jQuery में एक से अधिक बार लिखा गया था और हैबर पर यह सब पता लगाना संभव है। find परिणामस्वरूप find हमें समान jQuery वस्तु मिलती है जिसमें सभी तत्व पाए जाते हैं।

एक अलग लाइन पर, मैं कहता हूं कि न तो jQuery और न ही Sizzle find विधि के परिणामों को कैश करता है। और वे ऐसा क्यों करेंगे? विधि को अक्सर अनावश्यक रूप से न खींचें, अगर सब कुछ पहले से ढूंढना संभव है - एक अलग चर में ढूंढें और डाल दें।

यदि Sizzle आपको किसी चीज़ के साथ सूट नहीं करता है, लेकिन ऐसा होता है, तो आप इसके बजाय अपने खुद के (या किसी और के) कुछ का उपयोग कर सकते हैं, sizzle-jquery.js देखें, यह वह जगह है जहाँ Sizzle से विधियों के लिंक बनाए गए हैं। इस मामले में, Sizzle को निर्माण से बाहर फेंकने के लिए मत भूलना।

निष्कर्ष

jQuery बढ़ रहा है और बढ़ रहा है, अब पुस्तकालय कोड की लगभग 10 हजार पंक्तियों (Sizzle को छोड़कर) तक बढ़ गया है। फिर भी, स्रोत कोड को कई फाइलों में विभाजित किया जाता है, बड़े करीने से लिखा गया है और यहां तक ​​कि स्थानों में भी टिप्पणी की गई है। वहां झांकने से न डरें, बल्कि इसके विपरीत भी - अगर आपको लगता है कि आपको नहीं पता है कि आप किस तरह से कामों का उपयोग करना चाहते हैं, तो लाइब्रेरी स्रोतों को देखने के लिए बहुत आलसी न हों। यह न केवल jQuery पर लागू होता है, बल्कि सामान्य रूप से किसी भी लाइब्रेरी में लागू होता है।

याद रखें कि jQuery एक पुस्तकालय है जिसका उद्देश्य केवल डेवलपर के लिए जीवन को आसान बनाना है जो इसकी सहायता से प्राप्त होता है, लेकिन यह प्रागैतिहासिक लोगों सहित सभी संभावित ब्राउज़रों में काम करने के लिए एक इंटरफ़ेस बनाने के लिए है, जो एक निश्चित उपरि जोड़ता है। इसलिए यह जानना जरूरी है कि लाइब्रेरी आपके लिए क्या करती है। कुछ मामलों में, आप इन एक सौ किलोबाइट्स के बिना कर सकते हैं (याद रखें कि आप अभी भी अपने फोन पर एज आइकन देखते हैं) और बिना कॉल के ओवरहेड और ब्राउज़र की क्षमताओं का परीक्षण किए। उदाहरण के लिए, 90% की संभावना के साथ, क्रोम या फ़ायरफ़ॉक्स के लिए एक एक्सटेंशन लिखते समय, यह आपको कोई लाभ नहीं लाएगा।

मेरा लेख उतना बड़ा नहीं था जितना मैं डरता था और यह बहुत अच्छा था - इसे पढ़ना आसान होगा (मुझे आशा है) पेशेवर वेब विकास के क्षेत्र में, मैं केवल 7 वर्ष का हूं, इसलिए, एक शुरुआत के रूप में, निश्चित रूप से, मैं कुछ नहीं जान सकता हूं, और कुछ जान सकता हूं - बिल्कुल (पूरी तरह से) गलत या पूरी तरह से नहीं। मुझे ठीक करने के लिए स्वतंत्र महसूस करें, पूरक करें, आलोचना करें, पूछें।

PS जैसा कि यह पता चला है, Habré ने पहले से ही TheShock के अद्भुत लेखक से इस विषय पर एक लेख है - jQuery कैसे काम करता है : हम स्रोत का अध्ययन करते हैं । मैं अपना लेख छोड़ रहा हूं क्योंकि किसी ने पहले ही इसे मेरे पसंदीदा में जोड़ दिया है और यह संभावना नहीं है कि मैं "लेख को मसौदे में रखा गया" शिलालेख के साथ खुश हो जाऊंगा।

सामग्री चक्र

1. परिचय
2. एचटीएमएल पार्सिंग
3. डोम जोड़-तोड़
4. गुण, गुण, डेटा