जावास्क्रिप्ट में, क्या आप डोम का विस्तार कर सकते हैं?

Question

जावास्क्रिप्ट में, आप अपने प्रोटोटाइप वस्तु का उपयोग करके मौजूदा कक्षाओं का विस्तार कर सकते हैं:

String.prototype.getFirstLetter = function() { 
    return this[0]; 
}; 

यह डोम तत्वों का विस्तार करने के लिए इस विधि का उपयोग करने के लिए संभव है?

Answer 1

आप तत्व के प्रोटोटाइप का उपयोग करके डोम विस्तार कर सकते हैं। हालांकि, यह आईई 7 और इससे पहले में काम नहीं करता है। आपको एक समय में विशिष्ट तत्व का विस्तार करने की आवश्यकता होगी। प्रोटोटाइप लाइब्रेरी यह करता है। मैं यह देखने के लिए source के माध्यम से देखने की अनुशंसा करता हूं कि यह कैसा हुआ।

Answer 2

मुझे जवाब मिला जैसे मैं सवाल लिख रहा था, लेकिन सोचा कि मैं जानकारी साझा करने के लिए वैसे भी पोस्ट करूंगा।

जिस वस्तु को आप विस्तारित करने की आवश्यकता है वह Element.prototype है।

Element.prototype.getMyId = function() { 
    return this.id; 
}; 

Answer 3

हाँ आप कर सकते हैं, लेकिन यह दृढ़ता से सलाह नहीं दी जाती है।

यदि आप किसी अन्य लाइब्रेरी को ओवरराइड करते हैं तो मूल या अन्य लाइब्रेरी की अपेक्षा की जा रही है जिसे आप उम्मीद कर रहे थे .. अराजकता!

अपने कोड को अपने नामस्थान/दायरे में रखने का सबसे अच्छा अभ्यास है।

Answer 4

आपको कुछ भी नहीं ("कुछ भी" जिसका अर्थ है मूल डोम ऑब्जेक्ट्स) - जो केवल खराब चीजों का कारण बनता है। इसके अलावा प्रत्येक नए तत्व को फिर से विस्तारित करना (आपको आईई का समर्थन करने के लिए कुछ करना होगा) अतिरिक्त ओवरहेड जोड़ता है।

क्यों jQuery दृष्टिकोण नहीं लेने के लिए और एक आवरण/निर्माता बना सकते हैं और बजाय का विस्तार है कि:

var myDOM = (function(){ 
    var myDOM = function(elems){ 
      return new MyDOMConstruct(elems); 
     }, 
     MyDOMConstruct = function(elems) { 
      this.collection = elems[1] ? Array.prototype.slice.call(elems) : [elems]; 
      return this; 
     }; 
    myDOM.fn = MyDOMConstruct.prototype = { 
     forEach : function(fn) { 
      var elems = this.collection; 
      for (var i = 0, l = elems.length; i < l; i++) { 
       fn(elems[i], i); 
      } 
      return this; 
     }, 
     addStyles : function(styles) { 
      var elems = this.collection; 
      for (var i = 0, l = elems.length; i < l; i++) { 
       for (var prop in styles) { 
        elems[i].style[prop] = styles[prop]; 
       } 
      } 
      return this; 
     } 
    }; 
    return myDOM; 
})(); 

तो फिर तुम myDOM.fn के माध्यम से अपने खुद के तरीकों में जोड़ सकते हैं ... और आप इस तरह इसका इस्तेमाल कर सकते हैं:

myDOM(document.getElementsByTagName('*')).forEach(function(elem){ 
    myDOM(elem).addStyles({ 
     color: 'red', 
     backgroundColor : 'blue' 
    }); 
});