Query-Syntax nachrüsten

Kategorie JavaScript

Datum: 07.06.2008, 19:27 - Autor: Manko10

Seit einiger Zeit gibt es eine Fülle an JavaScript-Frameworks; alle mehr oder weniger brauchbar. Ob nun Fluch oder Segen: es ist unbestreitbar, dass es einige nützliche Funktionalitäten gibt, die einige Frameworks mit sich bringen und auf die man nicht verzichten will.
Doch will man nicht immer gleich ein ganzes Framework benutzen. Also stellt sich die Frage, ob man gewisse Features nicht auch selbst nachrüsten kann.
Ein weit verbreitetes Feature, das man z.B. aus Prototype oder jQuery kennt, ist eine verkürzte DOM-Syntax, die in etwa so aussieht:

Code:

1:	$('#my_id').innerHTML = 'abc';

Die Entsprechnung in der Langform sähe so aus:

Code:

1:	document.getElementById('my_id').innerHTML = 'abc';

Es liegt auf der Hand, was praktischer ist.
Dieses Feature ist auch gar nicht so schwer nachzurüsten. Fassen wir zusammen, was diese Query-Funktion können soll:

Bei Angabe von #xyz soll ein Element mit der ID xyz zurückgegeben werden.
Bei Angabe von .xyz soll ein Array aller Elemente mit dem class-Namen xyz zurückgegeben werden.
Andernfalls soll ein Array aller Elemente mit entsprechendem Tagnamen zurückgegeben werden.

Das erste und das letzte Kriterium ließen sich mit document.getElementById() und document.getElementsByTagName() realisieren. Für die Rückgabe der Klassen existiert aber so keine Methode. Also müssen wir diese zunächst implementieren:

Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

document.getElementsByClassName = function(c) {
    var elements = new Array();
    var tags = document.getElementsByTagName('*');
    for (var i = 0, len = tags.length; i < len; i++) {
        if (tags[i].className == c) {
            elements.push(tags[i]);
        }
    }
    
    return elements;
}

Hier werden zunächst alle Elemente des DOM-Baums eingelesen (* ist hier ein Synonym für alle vorhandenen Elemente) und dann in einer Schleife auf das entsprechenden Kriterium geprüft.

Nachdem wir das haben, können wir an die Implementierung der eigentlichen Query-Funktion gehen:

Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

function $(selector) {
    var selAttr = selector.substr(0, 1);
    var selName = selector.substr(1);
    
    if (selAttr == '#') {
        return document.getElementById(selName);
    } else if (selAttr == '.') {
        return document.getElementsByClassName(selName);
    } else {
        return document.getElementsByTagName(selector);
    }
}

Durch die Methode substr() wird geprüft, ob das erste Zeichen ein # oder . ist. Wenn ja, werden entsprechenden Maßnahmen ergriffen. Der Rest des Selektors (also alles nach dem ersten Zeichen) wird hierfür genutzt.
Ist das erste Kriterium nicht erfüllt, werden alle Elemente, deren Tagname dem Selektor entspricht, zurückgegeben.

Das wäre es an sich auch schon. Nun bietet jQuery aber z.B. noch einiges mehr. Zum Beispiel bestimmte Methoden, die den Zugriff auf verschiedene Eigenschaften noch weiter vereinfachen. Diese lassen sich jedoch auf die gleiche Weise dem Ergebnis hinzufügen, wie wir dem document-Objekt die Methode getElementsByClassName() hinzugefügt haben.
Es wäre auch möglich, statt der eigentlichen Element-Referenzen Instanzen einer Klasse zurückzugeben, die den Zugriff auf die nativen Eigenschaften kapselt. Also praktisch ein Adaper-Pattern

Natürlich soll das jetzt kein Anreiz sein, jQuery nachzuprogrammieren (wer alle Features von jQuery haben will, der benutze lieber gleich jQuery

), aber man kann doch durchaus seine eigene und für einen selbst passende Light-Version erstellen.

Seiten: (1/1) 1

3 Kommentare:

Datum: 02.11.2008, 18:35 - Autor: nikosch

Coole Idee. Kleine Anregung: Unter
http://www.php.de/tutorials/44167-js-einfuehrung-javascript-im-schichtenmodell.html / "Schritt 1: Eine Grundlage" habe ich eine Funktion gepostet, mit der getElementsByClass auch für mehrteilige Klassenattribute möglich ist. Sinnvoll z.B., wenn man Elemente mit CSS Klassen und gleichzeitig für unobtrusive JS auszeichen will.

Datum: 02.11.2008, 19:30 - Autor: Gast

Argh, Manko, Deine Kommentarbox ist nicht Reload-sicher... Sorry.

Datum: 02.11.2008, 19:36 - Autor: Manko10

Nicht so schlimm, ich habe ein Lösch-Icon neben jedem Beitrag.

Navigation:

Besucherzähler:

Spamfresser:

Versionen:

Foren-Beiträge:

RSS-Feeds:

Bookmarks:

Query-Syntax nachrüsten

Kategorie JavaScript

3 Kommentare:

Kommentar schreiben: