DOM तत्व का विस्तार करने के लिए कैसे (jQuery के बिना) एक वर्ग के रूप

Question

संभव डुप्लिकेट:
In Javascript, can you extend the DOM?

मैं तत्व करने के तरीकों और गुण जोड़ने के लिए कोशिश कर रहा हूँ। यह एक वैश्विक वर्ग के रूप में सूचीबद्ध नहीं है। मैं इस तरह स्ट्रिंग का विस्तार कर सकते हैं:

String.prototype.dosomething = function { ... }; 

मैं इस तरह की कोशिश (यह बड़ा है, यह बुनियादी है):

function $id(str){ 
    this.element = document.getElementById(str); 
    return element; 
} 
var myElem = $id('myId'); // WORKS !!! 
$id.prototype.dosomethig = function (... }; 
var myValue = $id('myId').dosomething(); // DOESN'T WORK !!! 

मैं अन्य तरीकों से कोशिश लेकिन बात यह हमेशा एक ही है, जब मैं कक्षा का विस्तार करने की कोशिश करें, यह काम नहीं करता है। इससे बचने का कोई रास्ता है क्या? मुझे पता है कि jQuery ऐसा करते हैं, लेकिन मैं अपना चालू करना चाहता हूं - अगर वे कर सकते हैं, तो मैं कर सकता हूं ... सही?

संपादित करें: पहले से ही सफारी और फ़ायरफ़ॉक्स में काम कर रहे एक कोड नीचे ...

Element.prototype.pos = function(){ 
    var curleft = this.offsetLeft; 
    var curtop = this.offsetTop; 
    var scrleft = this.scrollLeft; 
    var scrtop = this.scrollTop; 
    var pElement = pElementScr = this.offsetParent 
    while(pElement){ 
     curleft += pElement.offsetLeft; 
     curtop += pElement.offsetTop; 
     pElement = pElement.offsetParent; 
    } 
    while(pElementScr){ 
     scrleft += pElementScr.scrollLeft; 
     scrtop += pElementScr.scrollTop; 
     pElementScr = pElementScr.offsetParent; 
    } 
    return {x:this.offsetLeft, y:this.offsetTop}; 
} 

यह एक div अन्य divs का एक बहुत की भी भीतरी की स्थिति देता है। मैं अपनी लाइब्रेरी के कई अन्य मुद्दों को हल करने के बाद, आईई 8 में परीक्षण करने की कोशिश करूंगा।

Answer 1

फ़ायरफ़ॉक्स, क्रोम और IE8 + तत्वों में Element.prototype से विरासत ताकि आप कार्य करना होगा:

Element.prototype.doSomething = function() { 
    alert("hello"); 
}; 

मेजबान प्रोटोटाइप का विस्तार बहुत नाजुक और अनुशंसित नहीं है, लेकिन अगर आप सिर्फ चारों ओर खेल रहे हैं ठीक होना चाहिए। मुख्य कारण यह है कि डीओएम विनिर्देश प्रोटोटाइप कार्यान्वयन निर्दिष्ट नहीं करता है लेकिन केवल इंटरफेस, elem.appendChild() बस काम करना चाहिए, यह कुछ प्रोटोटाइप में होना आवश्यक नहीं है।

---

यह:

function $id(str) { 
    this.element = document.getElementById(str); 
    return element; 
} 

केवल अवांछित व्यवहार कि this वैश्विक वस्तु जब एक समारोह किसी भी वस्तु के संदर्भ के बिना शुरू हो जाती है (यह सिर्फ फ्लैट बाहर में एक त्रुटि फेंक चाहिए को संदर्भित करता है की वजह से काम किया केवल this की दृष्टि, हालांकि सख्त मोड इसे undefined पर सेट करके कुछ हद तक ठीक करता है)। आप वैश्विक चर element बना रहे हैं (चूंकि वैश्विक वस्तु के लिए संपत्ति असाइनमेंट वैश्विक चर बन जाते हैं) और फिर वैश्विक चर लौट रहे हैं।

Answer 2

$id('myId').dosomething() 

$ आईडी ('myId') एक तत्व है।

आपके पास 'एलिमेंट' में डूसमिंग नामक कोई फ़ंक्शन नहीं है, तो आपके पास यह $ id पर है, जो एक फ़ंक्शन है। असल में क्या होता है जब आप किसी फ़ंक्शन में कोई फ़ंक्शन जोड़ते हैं, तो क्या यह संभव है ??

Answer 3

सबसे पहले, डीओएम का विस्तार अक्सर (खराब: हमेशा) खराब विकल्प होता है। यदि आप तेज़, क्रॉस-ब्राउज़र कोड लिखना चाहते हैं, तो आपको DOM या अन्य मूल ऑब्जेक्ट्स (ऑब्जेक्ट, स्ट्रिंग ...) का विस्तार नहीं करना चाहिए। देशी वस्तुओं को विस्तारित करने से लाइब्रेरी आदि के साथ संगतता समस्याएं भी हो सकती हैं।आप विषय के बारे में अधिक जानना चाहते हैं, तो मैं तुम्हें इस उत्कृष्ट से ब्लॉग पोस्ट पर एक नज़र लेने के लिए सुझाव देंगे: यदि आईई (IE6 & & 7) के पुराने संस्करणों का समर्थन http://perfectionkills.com/whats-wrong-with-extending-the-dom/

आप के लिए महत्वपूर्ण नहीं है, तो यह जो आप चाहते हैं:

Element.prototype.doSomething = function() { 
    // Your code here 
}; 

आपके उदाहरण में, समस्या यह है कि $ आईडी एक तत्व देता है। आपका "doSomething" फ़ंक्शन $ आईडी से जुड़ा हुआ है, न कि वह तत्व जो लौटाता है।

ऐसा काम करता है:

function $id(str){ 
    this.element = document.getElementById(str); 
    return this; 
} 

Answer 4

इसके बजाय डोम वस्तु प्रदान करने का है, यह क्यों रैप नहीं, एक तरह से की तरह jQuery करता है।

var myLib = { 
    addWrapper: function (id) { 
     return new this.WrapperClass(document.getElementById(id)); 
    }, 
    WrapperClass: function (element) { 
     this.element = element; 
    } 
}; 
MyLib.WrapperClass.prototype.someMethod = function() { 
    alert(this.element); 
} 

var wrappedElement = myLib.addWrapper('someid'); 
wrappedElement.someMethod();