प्रॉम्प्ट और लागू संदर्भ
आपको एक सेटिंग्स बटन की आवश्यकता है जो डायलॉग को खोलता और बंद करता है बिना कंपोनेंट स्टेट सिंक्रोनाइज़ेशन को डुप्लीकेट किए। व्याख्या करें कि कैसे command और commandfor डिक्लेरेटिव कंट्रोल बनाते हैं, जिसमें कस्टम कमांड, कीबोर्ड एक्सेसिबिलिटी और पुराने ब्राउज़रों के लिए फ़ॉलबैक शामिल हैं।
Invoker Commands API एक बटन को एलिमेंट ID को लक्षित करने और अंतर्निहित कार्रवाई को इनवोक करने या एक कस्टम command इवेंट डिस्पैच करने की अनुमति देता है। यह HTML में व्यक्त करता है कि कौन इनवोक करता है और कौन सा एलिमेंट कार्य करता है, लेकिन यह बिज़नेस स्टेट मशीनों, अनुमति जांचों या असमर्थित ब्राउज़र फ़ॉलबैक का स्थान नहीं लेता है।
साक्षात्कारकर्ता क्या मूल्यांकन करता है
commandfor के लिए समान-ट्री (same-tree) लक्ष्य आवश्यकता, अंतर्निहित बनाम कस्टम कमांड, इवेंट रद्दीकरण और डिफ़ॉल्ट व्यवहार, कीबोर्ड और फ़ोकस प्रबंधन, और किसी नए एट्रिब्यूट को एकमात्र रनटाइम गारंटी मानने के बजाय प्रोग्रेसिव एन्हांसमेंट को कवर करें।
स्पष्टीकरण हेतु प्रश्न
पुष्टि करें कि क्या लक्ष्य एक मोडल डायलॉग, नॉन-मोडल पॉपओवर, या सामान्य एलिमेंट है; क्या बटन और लक्ष्य एक ही ट्री साझा करते हैं; क्या सबमिट सत्यापन की आवश्यकता है; और कौन से ब्राउज़र महत्वपूर्ण हैं। इसके अलावा प्रारंभिक फ़ोकस, Escape व्यवहार, फ़ोकस वापसी, और क्या कस्टम कमांड को बिज़नेस प्राधिकरण की आवश्यकता है, इसे स्पष्ट करें।
30-सेकंड उत्तर रूपरेखा
“मैं commandfor को लक्ष्य की ओर इंगित करूँगा और दिखाने, छिपाने या टॉगल करने के लिए अंतर्निहित कमांड का उपयोग करूँगा। बिज़नेस क्रियाएं एक कस्टम कमांड इवेंट का उपयोग करती हैं जहाँ एक कंट्रोलर स्थिति को मान्य करता है और डिफ़ॉल्ट व्यवहार को रोक सकता है। नेटिव बटन कीबोर्ड से सुलभ होते हैं, लेकिन मैं फिर भी फ़ोकस प्रविष्टि, Escape, फ़ोकस वापसी और सुलभ नामों को सत्यापित करूँगा। पुराने ब्राउज़र जावास्क्रिप्ट या कंपोनेंट फ़ॉलबैक बनाए रखते हैं जो उसी स्टेट मशीन को कॉल करता है, जिससे नेटिव और फ़ॉलबैक पाथ समतुल्य बने रहते हैं।”
चरण-दर-चरण गहन विश्लेषण
चरण 1: बटन-से-लक्ष्य संबंध घोषित करें
commandfor मान लक्ष्य एलिमेंट का ID है, और दोनों एलिमेंट एक ही ट्री में होने चाहिए। बटन का command मान कार्रवाई का चयन करता है। इस प्रकार स्टेटिक HTML बिना मैन्युअल प्रश्नों और डुप्लीकेट स्टेट सिंक्रोनाइज़ेशन के नियंत्रण व्यक्त कर सकता है।
चरण 2: अंतर्निहित कमांड को प्राथमिकता दें
डायलॉग और पॉपओवर दिखाने, छिपाने और टॉगल करने के लिए ब्राउज़र कमांड को परिभाषित करते हैं। नेटिव व्यवहार टॉप-लेयर, लाइट-डिस्मिस और फ़ोकस नियमों के साथ सहयोग कर सकता है। कस्टम स्ट्रिंग के साथ किसी मौजूदा सिमेंटिक को फिर से लागू न करें।
<button commandfor="settings" command="show-modal">
Open settings
</button>
<dialog id="settings">
<button commandfor="settings" command="close">Close</button>
</dialog>चरण 3: कस्टम कमांड इवेंट्स को संभालें
-- से शुरू होने वाले कस्टम कमांड एक command इवेंट डिस्पैच करते हैं जिसमें लक्ष्य और कमांड मान शामिल होते हैं। हैंडलर को मूल स्रोत और वर्तमान स्थिति को मान्य करना चाहिए, आवश्यकता पड़ने पर preventDefault() को कॉल करना चाहिए, और बिज़नेस एक्शन चलाना चाहिए। कस्टम कमांड स्वचालित रूप से विज़िबिलिटी नहीं बदलता है।
चरण 4: प्राधिकरण और सत्यापन को बिज़नेस कोड में रखें
डिक्लेरेटिव इनवोकेशन केवल इरादा व्यक्त करता है; यह प्राधिकरण, फ़ॉर्म सत्यापन या एसिंक्रोनस पर्सिस्टेंस को बायपास नहीं कर सकता। एक लक्ष्य कंट्रोलर को कार्रवाई करने से पहले अनुमति, डेटा संस्करण और वर्तमान स्थिति की जांच करनी चाहिए, और HTML को सुरक्षा सीमा मानने के बजाय एक रिकवरेबल त्रुटि लौटानी चाहिए।
चरण 5: फ़ोकस और कीबोर्ड व्यवहार डिज़ाइन करें
नेटिव डायलॉग और पॉपओवर के लिए, प्रारंभिक फ़ोकस, Escape डिस्मिसल, फ़ोकस वापसी और सुलभ नाम को सत्यापित करें। सामान्य एलिमेंट स्वचालित रूप से इन सिमेंटिक्स को प्राप्त नहीं करते हैं। एक कस्टम लक्ष्य को एक स्पष्ट कीबोर्ड मॉडल और फ़ोकस नीति की आवश्यकता होती है।
चरण 6: रद्दीकरण और रेस कंडीशंस को संभालें
कई बटन एक साथ कमांड जारी कर सकते हैं। डुप्लीकेट खोलने, सबमिशन, या बंद होने के बाद बासी एसिंक्रोनस री-ओपनिंग को रोकने के लिए लक्ष्य की वर्तमान स्थिति की जांच करें। एसिंक्रोनस बिज़नेस स्थिति को दृश्य स्थिति से अलग रखें ताकि विफलताएं गलत ARIA या फ़ोकस स्थिति न छोड़ सकें।
चरण 7: पुराने ब्राउज़रों के लिए फ़ॉलबैक प्रदान करें
ब्राउज़र जो commandfor का समर्थन नहीं करते हैं, वे एट्रिब्यूट्स को अनदेखा करते हैं, इसलिए एक सामान्य बटन लिसनर या कंपोनेंट बाइंडिंग बनाए रखें। दो अलग-अलग व्यवहारों को बनाए रखने के बजाय उसी कमांड हैंडलर और एक्सेसिबिलिटी परीक्षणों का पुनः उपयोग करें।
चरण 8: नेटिव और फ़ॉलबैक पाथ का परीक्षण करें
माउस, कीबोर्ड, स्क्रीन रीडर, Escape, फ़ोकस वापसी, डुप्लीकेट कमांड, रद्द किए गए डिफ़ॉल्ट, अस्वीकृत अनुमति और एसिंक विफलता का परीक्षण करें। अंतर्निहित कमांड, कस्टम इवेंट और लक्ष्य प्रकारों के लिए एक ब्राउज़र मैट्रिक्स का उपयोग करें; MDN Baseline लेबल हर रनटाइम के लिए कोई गारंटी नहीं है।
उच्च-गुणवत्ता वाला नमूना उत्तर
मैं एक ही ट्री में डायलॉग की ओर commandfor वाले एक स्टेटिक बटन को इंगित करूँगा और बुनियादी व्यवहार के लिए अंतर्निहित show-modal और close कमांड का उपयोग करूँगा। बिज़नेस लॉजिक एक कस्टम कमांड इवेंट का उपयोग करेगा जिसका हैंडलर प्राधिकरण, फ़ॉर्म संस्करण और वर्तमान स्थिति की जांच करता है और डिफ़ॉल्ट व्यवहार को रोक सकता है; कस्टम कमांड स्वयं दृश्यता को टॉगल नहीं करता है। नेटिव डायलॉग मोडल सिमेंटिक्स प्रदान करता है, लेकिन मैं फिर भी फ़ोकस, Escape, फ़ोकस वापसी और सुलभ नाम का परीक्षण करूँगा। पुराने ब्राउज़र नए एट्रिब्यूट्स को अनदेखा करते हैं, इसलिए एक फ़ॉलबैक लिसनर उसी कमांड हैंडलर को कॉल करता है। अंत में, कीबोर्ड और स्क्रीन-रीडर व्यवहार, समवर्ती क्लिक, एसिंक विफलताओं और दोनों पाथ में एक ब्राउज़र मैट्रिक्स का परीक्षण करें।
सामान्य गलतियाँ
यह मान लेना कि commandfor शैडो DOM या दस्तावेज़ के पार खोज करता है
विनिर्देश के लिए लक्ष्य ID का एक ही ट्री में होना आवश्यक है। क्रॉस-ट्री या क्रॉस-डॉक्यूमेंट नियंत्रण के लिए एक स्पष्ट कंपोनेंट प्रोटोकॉल या मैसेजिंग की आवश्यकता होती है, किसी भिन्न ID की नहीं।
यह मान लेना कि प्रत्येक कस्टम कमांड का एक डिफ़ॉल्ट व्यवहार होता है
कस्टम कमांड मुख्य रूप से एक इवेंट डिस्पैच करते हैं। हैंडलर को स्थिति परिवर्तन लागू करना चाहिए और परिभाषित करना चाहिए कि डिफ़ॉल्ट व्यवहार कब रद्द किया जाए।
केवल माउस क्लिक का परीक्षण करना
कीबोर्ड पहुंच, फ़ोकस क्रम, Escape और स्क्रीन-रीडर फ़ीडबैक इंटरेक्शन अनुबंध का हिस्सा हैं। दृश्य रूप से खुली स्थिति पूर्ण एक्सेसिबिलिटी का प्रमाण नहीं है।
फ़ॉलो-अप प्रश्न और उत्तर
क्या डायनामिक लक्ष्य प्रतिस्थापन के लिए commandfor को रीबाइंड करने की आवश्यकता है?
यदि प्रतिस्थापन समान ID बनाए रखता है और उसी ट्री में रहता है, तो डिक्लेरेटिव संबंध जारी रह सकता है। कंट्रोलर को फिर भी फ़ोकस और बिज़नेस स्थिति को रीसेट करना होगा। डुप्लीकेट ID या अनुपलब्ध लक्ष्य को कमांड को ब्लॉक करना चाहिए और एक निदान योग्य स्थिति प्रदर्शित करनी चाहिए।
आप एक कस्टम एसिंक कमांड से डुप्लीकेट सबमिशन को कैसे रोकते हैं?
समान कार्रवाई को लॉक करने के लिए अनुरोध स्थिति (request state) या आइडम्पोटेंसी कुंजी का उपयोग करें, बटन को व्यस्त (busy) चिह्नित करें, और एक रद्द या पुनः प्रयास पाथ रखें। पूरा होने के बाद, पुष्टि करें कि लक्ष्य अभी भी मौजूद है ताकि कोई पुराना परिणाम नए सत्र को परिवर्तित न कर सके।
केवल HTML कमांड का उपयोग करने के बजाय जावास्क्रिप्ट कंपोनेंट कब बना रहना चाहिए?
जब इंटरेक्शन को क्रॉस-ट्री समन्वय, जटिल एनिमेशन, एसिंक स्टेट मशीनों, या व्यापक लीगेसी-ब्राउज़र समर्थन की आवश्यकता हो, तब कंपोनेंट का उपयोग करें। command अभी भी एक प्रोग्रेसिव-एन्हांसमेंट एंट्री पॉइंट हो सकता है, लेकिन बिज़नेस सीमा परीक्षण योग्य बनी रहनी चाहिए।