2010-11-16 8 views
8

Ich weiß, wie zu jedem Objekt neue Methoden hinzufügen - durch das Objekt Prototyp Vermehrung:Den Prototyp von DOM-Elementknoten erweitern?

Object.prototype.foo = function() { }; 

Aber ist es möglich, nur neue Methoden für die DOM-Element-Knoten zu definieren? Haben DOM-Elementknotenobjekte einen Prototyp? Oder gibt es vielleicht einen Prototyp für DOM-Knoten im Allgemeinen?

Oder existieren Prototypenobjekte nur für integrierte Objekte?

Antwort

20

Ja, aber nicht in allen Browsern. Internet Explorer 8 unterstützt DOM-Prototypen (bis zu einem gewissen Grad), ebenso wie Firefox, Chrome, Opera und Safari.

Viele halten es für eine schlechte Praxis, DOM-Objekte über ihren Prototyp zu erweitern. Kangax hat einen tollen Artikel zum Thema: http://perfectionkills.com/whats-wrong-with-extending-the-dom/. DOM-Prototypen ermöglichen uns jedoch, standardbasierte Methoden in Umgebungen zu implementieren, die sie noch nicht unterstützen, ähnlich wie Shims für ECMAScript 5th Edition-Methoden.

+0

Das ist in der Tat ein großartiger Artikel. Ich überprüfe es und melde mich zurück. –

+4

Der Beispielprototyp versteckt das Element nicht. Es ist Toggle – jscripter

+0

warum nur 'HTMLDivElement' warum nicht einen Prototyp zu allen HTML-Elementen hinzufügen? – vsync

0

Das ist genau was prototype.js tut, aber jetzt gilt als extrem schlechte Praxis. Es ist viel besser, Wrapper/Handler zu verwenden. Beachten Sie, dass das Erweitern ANY nativer Objekte, insbesondere des Objekts Object, eine schlechte Übung ist.

lesen:

Whats wrong with extending the DOM
Object.prototype is verboten

Nachtrag:

Während erstreckt native Objekte in kleinen Projekten kann es sicher in Betracht gezogen wird es tatsächlich eine extrem Unsitte worden. Es ist nur marginal weniger schlimm, als den globalen Geltungsbereich mit Funktionen und Variablen zu überschütten. Es treten nicht nur Namenskollisionen, sondern auch Implementierungskollisionen auf. Dies wird umso mehr möglich, je mehr Bibliotheken Sie zusammenstellen.

Die einzige Möglichkeit zur Vermeidung von Kollisionen, Namen, Implementierungen oder anderweitig besteht darin, Ihre Implementierung auf Ihren eigenen Objekten zu halten.

Alles, was gesagt, es ist Ihre perogative zu tun, was Sie wollen, aber ich werde nichts empfehlen, das weithin als reine schlechte Praxis akzeptiert wird. Ich bleibe bei meiner Empfehlung.

+0

@BGerrissen Können Sie erklären, was genau prototype.js tut? Ich bin mit dieser Bibliothek nicht vertraut. Könnten Sie auch die Verwendung von Wrappern/Handlern näher erläutern? Was meinen Sie damit? Außerdem sagst du "augmenting ANY nativ objects, besonders das Object object" - aber ich erweitere es nicht, sondern sein Prototyp-Objekt. –

+6

Gegen die Erweiterung eines nativen Objekts zu empfehlen, ist Angstmonitoring, IMO. * String.prototype * -Erweiterungen sind zum Beispiel sehr nützlich, mit dem einzigen möglichen Nachteil, Kollisionen in der Zukunft zu benennen. –

+0

a) Dies ist eine Essenz von OOP, b) JS ist vollständig objektorientiert.Seit wann "jetzt"? –

3

In einigen Browsern tun DOM-Elemente ein Prototyp-Objekt aus, da dies auch von Object.prototype erben kann, aber das ist nicht allgemein wahr (zB IE nicht). Im Allgemeinen sind Host-Objekte wie DOM-Elemente nicht dazu verpflichtet; Tatsächlich sind Host-Objekte nicht an viele der Regeln gebunden, die für native JavaScript-Objekte gelten. Sie sollten sich daher niemals auf DOM-Elemente verlassen, um diese Art von Dingen zu unterstützen.

Ich empfehle kangax's excellent article on this subject.

+0

@Tim stelle ich diese Frage, weil ich Ihre Auswahlfunktionen bequemer machen möchte.Wenn ich zum Beispiel ein 'selec'-Objekt zu HTML-Elementknoten hinzufügen könnte, könnte ich Ihre Funktionen wie folgt verwenden:' input.selec.get(); input.selec.set (5,8); ' –

+1

@ Šime: Ah, richtig. Wenn Sie jQuery verwenden, können Sie etwas Ähnliches tun, indem Sie '$ .fn' erweitern, wie dies bei Plug-Ins der Fall ist. Andernfalls ist es im IE ohne irgendeine Art von Element-Wrapper-Objekt (wie jQuery) nicht möglich. –

+0

Zum Glück für uns, IE ist endlich in die richtige Richtung - IE 9 DOM-Objekte erben von 'Object.prototype'. @ Šime Wrapping ist mit ziemlicher Sicherheit der richtige Weg. –

Verwandte Themen