Nachrichten:Scheinwohnsitz

Javascript-Entwicklung unter Firefox und dem Internet Explorer ist eine Herausforderung für sich. Beide Browser verfügen zum Teil über den gleichen Sprachschatz, verwenden jedoch auch einen eigenen Befehlssatz, der von dem jeweilig anderen Browsertyp nicht verstanden wird bzw. die entsprechende Funktion besitzt einen anderslautenden Namen.

Beispiel: Event-Listener:
//IE
object.attachEvent( 'onclick', callMe );
//Firefox
object.addEventListener( 'click', callMe, false );


In solchen Fällen muss meist auf Programmierweichen oder Workarounds zurückgegriffen werden, was wiederum die Übersichtlichkeit des Codes nicht gerade fördert und den Quellcode nur sinnlos aufbläht.

Beispiel: Weiche Event-Listener
if( object.addEventListener ) {
object.addEventListener( 'click', callMe, false );
} else {
object.attachEvent( 'onclick', callMe );
}

Beispiel: Workaround Event-Listener:
function addEventToObject( object, e, func ) {
var oldhandler = object[ e ];
object[ e ] = ( typeof object[ e ] != 'function' ) ? func : function( e ) {
oldhandler( e );
func( e );
};
}


Kann man nicht auf Weichen und Workarounds, speziell beim Internet Explorer und Firefox, komplett verzichten?

Javascript besitzt unter anderem die prototype-Funktion, mit der es möglich ist eigene Methoden bzw. Klassen zu überschreiben aber auch DOM-Objekte zu erweitern. Diese grundlegende Funktionalität unterstützten zunächst erst einmal beide Browser.

Folgende DOM-Objekte sind verfügbar:

• Object
• Array
• String
• Number
• Date
• Function
• RegExp
• Boolean

Mit dieser Erkenntnis, lässt sich nun schon einmal die Weiche bzw. der Workaround z.B. für einen allgemein gültigen Event-Listener aufheben.

Beispiel: attachEvent()
Object.prototype.attachEvent = function( type, handler ) {
handler.eventHandler = function( e ) {
window.event = e;
return handler();
};
this.addEventListener( type.replace( /on/, '' ), handler.eventHandler, false );
}

Das Überschreiben einer vom DOM-Objekt vorgegebenen Funktion ignoriert bei diesem aufgezeigten Lösungsansatz der IE jedoch.

Der kleine aber feine Unterschied

Der Firefox jedoch kann mit dem nun aufgezeigten Lösungsansatz nicht nur eigens erstellt Methoden, Klassen und bestehende DOM-Objekte, sondern auch DOM-Interfaces überschreiben bzw. diese um einzelne Methoden erweitern.

Auflistung einiger DOM-Interfaces:

• HTMLCollection
• HTMLDocument
• HTMLElement
• Node
• Event
• CSSStyleDeclaration

Aufbauend auf dieser Erkenntnis ist es möglich dem Firefox auch die Getter und Setter des IE beizubringen.

Beispiel: event.keyCode für den Firefox
Event.prototype.__defineGetter__( 'keyCode', function() {
return this.which;
} );


Hierbei muss man jedoch aufpassen, dass die Getter und Setter zentral in einer Datei für den FF definiert werden und mit einer Weiche vor dem Zugriff des IE geschützt sind, da sich dieser ansonsten mit einer Fehlermeldung melden kann, wenn der Debugger-Modus eingestellt ist. Man sieht, um eine Weiche kommt man nicht ganz rum

Quellen:
Document Object Model (DOM)
Extending JavaScript Objects and Classes
IE Emu for Moz

This entry was posted on Montag, September 10th, 2007 at 21:24 and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.