tinyJS - ein kleines JS-Toolkit

Download

tiny.js [20788b] - tiny-min.js.gz [3816b]

Cheat Sheet

Für den beschäftigten Entwickler ist ein Cheat Sheet immer ausgesprochen nützlich.

Kompatibilität

Die folgenden Browser sollen standardmäßig unterstützt werden:

• MSIE 6-8
• Firefox 2-3.6
• Safari 3-4
• Opera 9-10
• Chrome/Iron 3-4

Es ist beispielsweise denkbar, den Support zusätzlicher älterer Browser als Plugin zu erzeugen. Neuere Browser sollten von Haus aus unterstützt werden. In späteren Versionen ist insbesondere Support für den mobile Safari und mobile Chrome geplant, da ein Einsatz von tiny.js besonders auf diesen Geräten interessant wird.

Der Quirks-Mode im IE wird von tiny.js absichtlich nicht unterstützt. Einerseits spart der Verzicht auf die Unterstützung einigen Platz, andererseits ist die Verwendung des Quirks Modes nicht mehr zeitgemäß - ein Versagen des Toolkits ist eine vergleichsweise milde Strafe für derartiges Fehlverhalten.

DOM

t - DOM Selection

tinyJS unterstützt von Haus aus CSS-Selektoren nach CSS2.1-Standard.

DOM Nodes selektieren:

returns Object with Node selection and very interesting methods (unless "methodless" is true, in this case, just an Array of nodes is returned).

t.cf - CSS-Filter

Hier versteckt sich die Sektion mit den CSS-Filtern. Diese kann man auch leicht manuell um zusätzliche Pseudoattribute erweitern. Die vorliegenden CSS-Filter sind weitestgehend CSS2.1-Kompatibel, sowohl mit geringfügigen Einschränkungen als auch Erweiterungen. Jeder Filter hat einen Namen, als Parameter mindestens ein Node-Array (wobei Pseudoattribute einen zusätzlichen Wert in Klammern als Parameter übergeben bekommen können).

Basic Types

body (Tagname)

Filtert Nodes nach ihrem Tag-Namen (bspw. 'body'):

.class

Filtert Nodes nach einem ihrer Klassennamen. Wenn es um Child-Elemente geht, wird als Abkürzung getElementsByClassName verwendet, sofern vorhanden:

#id

Filtert Nodes nach ihrer genauen ID:

Traversing

* (Everything)

Sucht rekursiv alle Kind-Elemente mit getElementByTagName('*'):

> (Direct Childs)

Liefert alle direkten Kind-Nodes zurück:

~ (Siblings)

Bringt alle Elemente auf gleicher Ebene hinter dem Element:

+ (Next)

Gibt das nächste Element auf gleicher Ebene wider, sofern vorhanden:

< (Parent)

Dieser Filter entspricht nicht den CSS-Standards, ist aber dennoch ungemein praktisch. Er gibt das jeweilige Eltern-Element wider:

<< (Parents)

Auch dieser Filter ist nicht standardkonform, liefert aber alle Parents bis hin zum document:

Attributes

[key], [key=value] (Present/Equals)

Dieser Selektor-Filter filtert das Vorhandensein oder den Wert von Attributen. Für * [name=...] gibt es eine Abkürzung über getElementsByName.

[key!=value] (Not Equals)

Gibt eine Collection zurück, deren Nodes im Attribut einen anderen Wert als den Angegebenen haben:

[key^=value] (Starts with)

Filtert darauf, dass das angegebene Attribut des Elements mit dem Wert beginnt:

[key$=value] (Ends with)

Übergibt ein Array mit Nodes, deren angegebenes Attribut mit dem Wert endet:

[key*=value] (Partly Equal)

Filtert auf jene Nodes, deren Attributwert an einer beliebigen Stelle dem angegebenen Wert entspricht:

[key~=value] (Seperate Part Equals)

Läßt nur solche Nodes übrig, in deren Wert des angegeben Attributs der übergebene Wert einzeln steht:

[key|=value] (Subpart before "-" Equals)

Gibt jene Nodes zurück, deren Attributwert vom Start ab bis zum Ende oder vor einem "-" den Wert enthält:

Pseudo Attributes

:odd

Reduziert die Auswahl auf die Nodes mit ungradem Index (1, 3, 5, ...):

:even

Gibt nur Nodes mit geradem Index (2, 4, 6, ...) wieder:

:empty

Läßt nur Nodes ohne childNodes übrig:

:first-child

Prüft, ob die angegebenen Nodes jeweils das erste HTML-Knoten-Kind ihres Eltern-Elements sind:

:last-child

Filtert auf Nodes, die jeweils das letzte HTML-Knoten-Kind ihres Eltern-Elements sind:

:only-child

Liefert alle Nodes zurück, die das einzige HTML-Knoten-Kind ihres Eltern-Elements sind:

:nth-child(index)

Sortiert Nodes aus, die nicht das n-te HTML-Knoten-Kind ihres Eltern-Elements sind:

:not(selector)

Entfernt jene Nodes aus der Auswahl, auf die der Selektor zutrifft:

:has(selector)

Filtert alle Nodes, die Parent-Elemente der Nodes sind, auf die der Selektor zutrifft:

:contains(text)

Gibt alle Nodes zurück, in deren Text-Inhalt irgendwo der angegebene Text steht:

:lang(language)

Testet die Nodes auf ihre Sprache, sofern angegeben:

Erweiterungen der Selektoren

Das entsprechende Objekt kann leicht um weitere Selektoren erweitert werden. Zusätzliche Pseudoattribute kann man durch ihren Namen ohne vorangestellten ":" definieren. Selektor-Funktionen bekommen ein Array mit den zu filternden Nodes und ggf. einen zusätzlichen Parameter als String geliefert.

t._ - Selektions-Methoden

Selektierte DOM-Nodes werden mit den folgenden Methoden erweitert:

t._.i - Iterate

Führt eine Funktion aus, innerhalb der this das Selektions-Objekt, der erste Parameter der Index und der zweite Parameter das jeweilige Node ist.

t._.f - Filter

Filtert die Nodes der Selektion anhand einer Funktion, die this als Selektions-Objekt und als Parameter Index und Node übergeben bekommt.

t._.g - Get

Vielseitige Methode, um mehr aus einer Selektion zu holen. Wenn ein Index (Integer) übergeben wird, bekommt man das entsprechende Node samt Methoden zurück. Wird stattdessen ein Node übergeben, bekommt man dessen Index. Ein String, der einen weiteren Selektor enthält, verwendet die bestehende Collection als Basis.

t._.e - Events

Belegt die selektierten Nodes mit Events. Siehe auch t.e, der erste Parameter ist jedoch hierbei schon mit der Selektion gesetzt.

t._.a - Attributes

Setzt Attribute der bestehenden Nodes. Wenn kein Attributwert angegeben ist, wird das Attribut aus dem ersten Node der Collection ausgelesen. Die Normalisierung findet über die Normalisierungs-Filter statt.

t._.c - CSS Attributes

Setzt Style-Attribute der bestehenden Nodes. Wenn kein Attributwert angegeben ist, wird das Attribut aus dem ersten Node der Collection ausgelesen. Die Normalisierung findet über die Normalisierungs-Filter statt.

t._.h - HTML

Liest oder schreibt den HTML-Inhalt. In manchen Browsern (Safari) ist dieser Inhalt nicht sofort verfügbar.

t._.v - Values

Liest oder schreibt den Wert eines Input-Feldes. Wenn t.p als Parameter übergeben wird, kann damit eine komplette Formular-Selektion parameterisiert werden.

t._.r - Remove Element

Löscht alle selektierten Nodes.

t._.nf - Normalisation filters

Die Normalisierungs-Funktionen sind in einem eigenen Objekt abgelegt, so dass sie leicht erweitert werden können. Die Notwendigkeit der Normalisierung wird ausschließlich durch Feature-Erkennung ermittelt.

t.e - Events

Einfache Event Engine:

Wenn das Callback weggelassen wird, gibt die Funktion das Array des Events "eventname" zurück. Ist auch dieser nicht angegeben, bekommt man das gesamte Event-Objekt zurück.

Die Events sind insofern normalisiert, dass ein Tastencode in der Eigenschaft "key" steht, die normalisierte Cursorposition in mouseX und mouseY und immer eine target-Eigenschaft vorhanden ist.

Helpers

t.i - Iterate

Interiert über Arrays und Objekte:

t.i([object:Array|Object], [callback:Function, this=object, arguments=[key, value]]);
t.i([1, 2, 3], function(i, v) { console.log(v); });
t.i(window, function(k, v) { console.log(k); });

t.x - eXtend Object

Erweitert Objekte und Arrays:

Objekte erweitern:

Arrays erweitern:

Arrays werden einfach aneinander gehängt:

t.f - Filtert Arrays und Objekte:

Gibt ein gefiltertes Array oder Objekt zurück. Wenn asArray true ist, wird das Objekt in jedem Fall als Array behandelt. Die Funktion hat in this das Objekt und bekommt die key-value-Paare als Parameter übergeben. Wenn sie "undefined" zurückgibt, wird die Instanz ausgefiltert. Wird nur ein Array und nichts weiteres übergeben, dient t.f als "unique"-Funktion, d.h. sie filtert doppelte Einträge aus.

t.w - Where in the Array is...?

Gibt den Index eines Objekts im Array oder -1 zurück

t.w([object], [array:Array])

t.p - Parameterize Object

Verwandelt ein Objekt in einen parameterisierten String:

Wenn man t.p als Parameter an die Selektions-Methode v übergibt, bekommt man die Values aller selektierten Nodes als URL-Parameterierten String zurück.

Network

t.a - Ajax

Vielseitiger Ajax Request:

t.a({
    url:[url:String],
    method:[method:String,(GET|POST), optional],
    data:[postdata:String|Object, optional],
    async:[callback:Function, optional]
});

t.j - JavaScript, JSONp

Kann Scripte (etwa Plugins) einfügen oder JSONp-Requests durchführen:

t.j([url:String], [callback:(name)String, Function], [timeout,Integer(ms, optional)]); // lädt Script od. JSONp-Request

Plugins

• t.b - Browser-Erkennungt.b enthält ein Objekt mit Informationen zum Browser und System:
  { name: browsername, version: 1.0, versionDetail: [1,0,0,1], browsername: 1.0, os: { name: 'Windows NT', version: 5.1 }}
• t.b64 - Base64-Codect.b64.enc(data) - kodiert Daten nach Base64,
  t.b64.dec(data) - dekodiert Base64-Daten.
• t._.C - ClassName-MethodMethode, um den Klassennamen von selektierten Objekten zu erkennen bzw. zu manipulieren.
• t.c - Cookie-Funktiont.c([Name/Objekt]) - ist ein Name (String) angegeben, wird der Wert des Cookies zurückgegeben. Wenn stattdessen ein Objekt im Format
  { name:"Cookie-Name", value:"Cookie-Wert",
  date:[Date-Objekt oder Number(ms)],
  domain:"*.test.de", path:"/", extra:"; secure"}
  übergeben wird (wobei alle Instanzen außer name und value optional sind), wird das entsprechende Cookie gesetzt.
• t.er - Element Readyt.er([Selektor], [Callback]) - führt das Callback (this ist das Ergebnis der Selektion) aus, wenn der Selektor mindestens ein Node zurückliefert.
• t.e.[...] - Normalized Eventstiny-events.js stellt normalisierte mouseenter/-leave sowie drag'n'drop-Events zur Verfügung.
• t.fx - Effekt-FrameworkFramework zur Vorberechnung und Durchführung von CSS-Effekten
• JSON - JSON-ObjektErgänzt falls nötig ein JSON-Objekt mit den Methoden stringify und parse.
• outerHTML-NormalisierungErgänzt eine Funktion zur Normalisierung der Node-Eigenschaft outerHTML (als Gegenstück zu innerHTML) zur Verwendung mit t().a().
• t._.p - Put-MethodePut-Methode als Gegenstück zur Get-Methode bei Selektionen. Wenn nur ein Node übergeben wird, wird die Selektion an dieses angehängt. Wird 0 und ein Node übergeben, wird das Node mit der Selektion ersetzt. 1 anstelle der Node sorgt dafür, dass die Selektion im Node vorangestellt wird, 2 schiebt die Selektion vor das Node.
• t._.S - Auswahl-MethodeMethode, um die Auswahl innerhalb von Input-Feldern zu lesen bzw. zu manipulieren
• CSS3-SelektorenErgänzt die Selektion um vollständige CSS3-Selektoren und einige zusätzliche nützliche Selektoren
• t.swf - Flash-EinbindungFunktion zur eleganten Erstellung von Object-Tags
• t.u - URL-Objektt.u([URL:String]) liefert ein URL-Objekt ähnlich wie location.href zurück, jedoch mit einem zusätzlichen params-Unterobjekt und einer toString-Methode, die je nach Wert absolute oder relative URLs erzeugt.

Code-Styleguide und Minifizierung

Das Ziel der Größenreduzierung hat zwar oberste Priorität, dennoch sollte ein gewisser Stil nicht fehlen und Geschwindigkeitsoptimierungen, die mit wenigen Zeichen zu erzielen sind, nicht verschmäht werden. In den Situationen, in denen die Reduzierung die Lesbarkeit zu sehr beeinträchtigt, wird zugunsten der Lesbarkeit entschieden oder so weit dokumentiert, dass auch ein Unbeteiligter noch versteht, was passiert. Stellen, an denen Debugging interessant sein können, werden so mit Umbrüchen getrennt, dass sie im Debugger noch zu erfassen sind. Des weiteren ist in der Entwicklerversion jede Zeile, die nicht selbsterklärend ist, mit einem Kommentar zu versehen. Lieber einen Kommentar zu viel als zu wenig.

Die Minifizierung sollte nur solche Umbrüche entfernen, die das Debugging nicht gefährden - wenn mehr als eine problematische Anweisung in einer Zeile steht, muss man im Zweifel raten - was die Nützlichkeit der Minifizierung leider mindert.

© 2010 Alex Kloss