StateController। इंटरफेस के विकास में एक घटना मॉडल। भाग २

भाग 1

इस लेख में, हम स्टेटकंट्रोलर इवेंट मॉडल की बुनियादी अवधारणाओं की जांच करेंगे।

घटना वितरण क्षेत्र

चयनात्मक अनुप्रयोग मॉडल में, उन तत्वों के साथ काम किया जाता है जिन्हें पहले काम के लिए चुना गया था। शुद्ध ईवेंट मॉडल में, ईवेंट को DOM ट्री के सभी तत्वों तक विस्तारित किया जाना चाहिए। यह छोटे संस्करणों में बिल्कुल महत्वपूर्ण नहीं है, लेकिन नोड्स की संख्या में वृद्धि के साथ, गति का क्षरण भी रैखिक नहीं होगा। कल्पना करें कि click इवेंट को सभी नोड्स के माध्यम से जाना जाना चाहिए ताकि यह निर्धारित हो सके कि यह किन तत्वों पर ट्रिगर होगा। अटकलें हैं कि :hover IE6 में :hover छद्म :hover ने ऐसा ही किया, इसलिए यह इतना धीमा हो गया।

किसी तरह से घटना जनरेटर के संचालन में तेजी लाने के लिए, यह लगातार नोड्स के पूरे पेड़ के चारों ओर जाने के लिए मजबूर किए बिना, सबसे अच्छा समाधान घटनाओं के वितरण क्षेत्रों को सीमित करना है। वास्तव में, हम ईवेंट मॉडल के अंदर एक चयनात्मक मॉडल का उपयोग करते हैं, लेकिन कुछ सीमाओं के साथ।

घटना प्रसार क्षेत्र एक और समस्या को हल करने की अनुमति देते हैं - आप सभी नोड्स को ट्रेस करने के बाद प्राप्त किए गए परिणाम को कुशलता से जोड़ सकते हैं। इसे बेहतर ढंग से समझने के लिए, मैं एक सरल उदाहरण दूंगा।

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

1. हर कोई जो एक्स में लिख सकता है वह एक कदम आगे है
2. जो छोड़े हैं उनकी एक टीम तैयार करें।

ऐसे सरल तरीके से, हमने कुछ डेवलपर्स के लिए दूसरे पैराग्राफ में घटना के क्षेत्र को तेजी से कम कर दिया है।

मैं एक और उदाहरण दूंगा, जो थोड़ा और सटीक रूप से दिखाता है कि घटनाओं के वितरण के क्षेत्रों के माध्यम से परिणाम को कैसे हेरफेर किया जा सकता है।
मान लीजिए कि आपके पास दो बटन हैं: सहेजें और साफ़ करें।
क्लियर बटन का व्यवहार

1. सभी फ़ॉर्म तत्व साफ़ करें ( clear_form event)
2. सत्यापन त्रुटि संदेश छिपाएं जो पिछले डेटा भेजने ( clear_form घटना) से रह सकते हैं
3. गतिशील रूप से बनाए गए तत्वों को उनके मूल रूप में रीसेट करें ( clear_form event)

सहेजें बटन व्यवहार

1. सत्यापन त्रुटि संदेश छिपाएं ( clear_form घटना)
2. सर्वर को डेटा भेजें ( submit_form घटना)

जैसा कि आप देख सकते हैं, हमारे पास कम से कम एक कार्रवाई है जो दोनों बटन के लिए समान है: सत्यापन त्रुटि संदेश छिपाएं। लेकिन अगर हम इवेंट डिस्ट्रिब्यूशन ज़ोन को निर्दिष्ट किए बिना सेव बटन पर clear_form इवेंट को clear_form , तो हमें गलत व्यवहार मिलेगा - भेजने से पहले हमारा फॉर्म साफ़ हो जाएगा और कुंवारी clear_form वापस आ जाएगा। हमें "क्लियर" बटन पर क्लिक करने पर सभी फॉर्म एलिमेंट्स पर एक क्लीनअप इवेंट को ट्रिगर करना होगा, और केवल clear_form मैसेज एलिमेंट्स पर अगर clear_form "सेव" बटन clear_form जेनरेट होता है।

स्टेटकंट्रोलर लिमिटेशन

जानबूझकर ढांचा जटिल चयनकर्ताओं का उपयोग नहीं करता है, निम्न सूची तक सीमित है

• माता-पिता
• childNodes
• nodename

यह जानबूझकर किया जाता है ताकि घटना के वितरण के क्षेत्र में आने वाले तत्वों की संख्या को नियंत्रित किया जा सके। प्रतिबंध ने एक उत्कृष्ट सेवा निभाई, HTML संरचनाओं के लिए अधिक संगठित दृष्टिकोण को मजबूर करते हुए, संभावित त्रुटियों की संख्या को कम करते हुए।

डिफ़ॉल्ट रूप से, ईवेंट कंटेनर के अंदर सभी तत्वों पर लागू होता है ( container.getElementsByTagName(*) . container.getElementsByTagName(*) )।

कंटेनर, जिसमें से घटना शुरू होती है, हमेशा हैंडलर के दायरे में आती है। आप मापदंडों को जोड़ सकते हैं, संकेत कर सकते हैं, उदाहरण के लिए, इस तरह के एक वितरण क्षेत्र: p: "childNodes,A,SPAN" , जिसका अर्थ है - कंटेनर, उसके बच्चों, साथ ही इस कंटेनर के अंदर A और SPAN तत्वों को घटनाओं को वितरित करें।

संचालकों

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

मॉड्यूल का जावास्क्रिप्ट हिस्सा आमतौर पर स्क्रिप्ट का एक सेट होता है, इसलिए डेवलपर कोड पर काम करते समय शायद ही कभी वहां दिखता है। बहुत अधिक समय अंतिम एचटीएमएल संरचनाओं के साथ काम करने में खर्च किया जाता है: कोड के तर्क को गति देना और वर्णन करना। भला, इसमें हैंडलर क्यों नहीं जोड़े जाते?

स्टेटकंट्रोलर एक विशेष SC विशेषता का उपयोग करता है, जिसमें कुछ घटनाओं और उनके लिए मापदंडों के लिए हैंडलर की सूची होती है। विशेषता में नियमित पाठ निर्देश होते हैं जिन्हें इस दृश्य क्षेत्र में पहली बार घटना के शुरू होने पर पार्स किया जाता है। बार-बार, इवेंट हैंडलर पहले से ही ऑब्जेक्ट संरचना के साथ काम करता है, जिसके कारण पहले रन की तुलना में लगभग पांच गुना त्वरण हासिल किया जाता है।

हैंडलर का कोड अलग से पंजीकृत है, और सामान्य तौर पर, प्रक्रिया किसी भी ढांचे में प्लगइन्स को जोड़ने के समान है।

इवेंट ट्रिगर और हैंडलिंग

ईवेंट को निकाल दिए जाने के बाद, StateController वितरण क्षेत्र के फिल्टर को ध्यान में रखते हुए, नोड्स की एक निश्चित सरणी का चयन करता है। इसके अलावा, केवल उन नोड्स जिनमें SC विशेषता है, इस सरणी से चुने गए हैं। इन नोड्स के बीच, उन लोगों को चुना जाता है जिनके पास हैंडलर होते हैं जो इस घटना का जवाब देते हैं। और उसके बाद, शेष नोड्स में से प्रत्येक के लिए हैंडलर लॉन्च किए जाते हैं। यह याद रखने योग्य है कि नोड पेड़ पर आंदोलन आखिरी नोड से पहली तक किया जाता है।

घटना परिमाणीकरण

मानक ईवेंट ब्राउज़र मॉडल के विपरीत, स्टेटकंट्रोलर में कई उपयोगी मोड़ हैं। घटनाओं को परिमाणित किया जा सकता है, अर्थात् वे केवल घटना का नाम नहीं हैं, लेकिन एक कुंजी / मूल्य जोड़ी है। "सक्रिय तीसरे टैब", "त्रुटि संख्या 38", "संपर्क डेटा के साथ ब्लॉक डेटा भेजना", "उपयोगकर्ताओं की सूची के साथ ब्लॉक को फिर से लोड करना" प्रकार की घटनाओं को उत्पन्न करते समय यह आवश्यक है।

अतिरिक्त डेटा

प्रत्येक घटना के साथ अतिरिक्त डेटा "यात्रा" कर सकते हैं। यह एक नियमित कंटेनर ऑब्जेक्ट है। हैंडलर इस कंटेनर में खेतों को संशोधित कर सकते हैं क्योंकि कुछ क्रियाएं की जाती हैं। अक्सर इसका इस्तेमाल किसी तरह के डेटा को इकट्ठा करने के लिए किया जाता है। उदाहरण के लिए, हम अक्सर फॉर्म फील्ड्स की सामग्री के संग्रह का उपयोग सीधे JSON में करते हैं।

घटना का स्तर

इवेंट स्तर अतिरिक्त लचीलापन प्रदान करते हैं, जिससे आप एक स्थानीय ईवेंट वितरण क्षेत्र बना सकते हैं। उदाहरण के लिए, ऊपर वर्णित "सहेजें" बटन के साथ उदाहरण में, आप एक निश्चित ट्रिगर स्तर के साथ clear_form ईवेंट को आग लगा सकते हैं, जिससे डेवलपर और नोड्स यह तय कर सकते हैं कि कौन क्या कार्य करेगा।

प्रलेखन और उदाहरण

फ्रेमवर्क कोड
प्रलेखन
यह कैसे काम करता है
उपयोग के उदाहरण

निम्नलिखित लेख उपयोग का एक उदाहरण पर विचार करेगा।

आपका ध्यान के लिए धन्यवाद!