तत्वों को स्टाइल करना और नुकसान के आसपास पहुंचने की कोशिश करना

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


विशेषताओं के साथ समस्या का अध्ययन करने के बाद, यह अनजाने में मेरे दिमाग में आता है - "लेकिन क्या हमें तत्व के गुणों में परिवर्तन पकड़ना शुरू करना चाहिए?" ios पूरी तरह से पहले से ही समर्थन करता है। परिणाम निम्नलिखित कोड ( jsFiddle ) है

var MO = (window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver); var observer = new MO(function(){ console.log("disabled changed") }); observer.observe(document.querySelector("id"), { attributes: true, attributeFilter: ["disabled"] }); 

यह केवल IE को दूर करने के लिए पहले से ही अच्छा है, और यहां सब कुछ खराब है ... पहले जा रहा है - अच्छी तरह से, DOMAttrModified है , साथ ही बहुत पुराने प्रॉपर्टीचेंज के लिए भी ।
बेशक, वे भी काम करते हैं, लेकिन हमारे मामले में नहीं: एक zadizeyblenny तत्व पर घटनाएं नहीं फेंकती हैं। यहां से हमें एक दिलचस्प तस्वीर मिलती है: जब आप अक्षम विशेषता जोड़ते हैं, तो घटनाओं को पक्षपात के रूप में चुप कर दिया जाता है, हटाते समय, वे चुपचाप रोल करते हैं। मैं इसे मानक व्यवहार के बजाय एक बग कहूंगा, क्योंकि घटना अप्रिय है और हर चीज को काट देना बुरा है, लेकिन मैं क्या कर सकता हूं। हालाँकि, यह हमें इस समस्या के लिए एक मिनी समाधान लिखने से नहीं रोकता है ( jsFiddle )

 var AttributeObserver = function(element, callback, attribute){ var MO = (window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver); if (MO) { var observer = new MO(callback); observer.observe(element, { attributes: true, attributeFilter: [attribute] }); } else { if (!AttributeObserver.__timer) { AttributeObserver.__observed = [] AttributeObserver.__timer = setInterval(function(){ for (var i = 0; i < AttributeObserver.__observed.length; i++) { var o = AttributeObserver.__observed[i]; if (o.element.hasAttribute(o.attribute) !== o.flag) { callback() } o.flag = o.element.hasAttribute(o.attribute) } }, 500) AttributeObserver.__observed.push({ element: element, attribute: attribute, flag: element.hasAttribute(attribute) }) } } } 

सेट इन्टरवल के बारे में कुछ लोगों के आक्रोश की व्याख्या करते हुए मैं समझाता हूं: नहीं, यह हैक नहीं है, सेटइंटरवाल भाषा का काफी काम करता है, जो एक उचित दृष्टिकोण के साथ, अराजकता और ब्रेक नहीं लाता है, यदि आप वास्तविक स्थिति को देखते हैं, तो एक उचित अंतराल 500-1000ms होगा, और यदि आप अनुमति देते हैं। आमतौर पर पृष्ठ पर 10-20 नियंत्रण होते हैं, और भले ही 100 उनकी विशेषता की जांच करते हैं - कोई समस्या नहीं है।
साथ ही, यह विधि उन मामलों के लिए लागू होती है, यदि आपको अधिकतम गति, न्यूनतम, अधिकतम और अन्य विशेषताओं में परिवर्तन का जवाब देने की आवश्यकता होती है जो कस्टम नियंत्रण के व्यवहार को प्रभावित कर सकते हैं। रेंज इनपुट के लिए एक ही मिनट, अधिकतम विशेषताएँ, यदि आप देशी रेंज इनपुट के साथ काम करते हैं और समर्थन के बिना ब्राउज़रों के लिए कमबैक करते हैं, तो अवलोकन योग्य विशेषताओं के समान दृष्टिकोण के साथ अच्छा लगेगा और इससे कई समस्याएं हल हो सकती हैं - आप अपने मूल रूप में इनपुट के साथ काम करते हैं, और प्लगइन परिवर्तनों को उठाता है। मैं अब इस विकल्प पर विचार करना चाहूंगा, क्योंकि यहां हमें एक महत्वपूर्ण समस्या है - हम अक्षम तत्वों के साथ काम नहीं कर रहे हैं, जिसका अर्थ है कि हम अपने समाधान ( jsFiddle ) को अपग्रेड कर सकते हैं

 var AttributeObserver = function(element, callback, attribute){ var MO = (window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver); if (MO) { var observer = new MO(callback); observer.observe(element, { attributes: true, attributeFilter: [attribute] }); } else if (element.addEventListener) { element.addEventListener('DOMAttrModified', function(e){ if (e.attrName == attribute) { callback() } }, false); } else if ("onpropertychange" in document) { element.attachEvent ('onpropertychange', function(e){ if (e.attrName == attribute) { callback() } }); } } 

पुनश्च मैं जोड़ना चाहूंगा कि कोड एक तैयार-किए गए प्लगइन होने का दावा नहीं करता है, बल्कि सिर्फ एक संभव दृष्टिकोण को प्रदर्शित करता है।