DE EN

Die JavaScript Framework Matrix

soll einen Überblick der bekanntesten JavaScript-Frameworks und deren Funktionen geben. Zu jedem Framework gibt es verschiedene Beispiele und die dazugehörigen Links zur offiziellen Dokumentation. Die Wahl eines Frameworks hängt von vielen Faktoren ab und kann nicht ausschließlich durch dieses Dokument getroffen werden. Die Matrix soll lediglich die unterschiedlichen API-Stile sowie die Funktionsweisen der JavaScript-Bibliotheken veranschaulichen. Es gibt zudem noch weitere interessante Frameworks, die hier aufgelistet sind.

Sortierung:

Allgemein DOM Ready DOM Basics DOM Filtering DOM Manipulation Effekte Transitions Events Eigene Funktionen Ajax Klassen

jQuery

1 2 3

Code Link 1 Link 2 Link 3 Quellcode Dokumentation:


										$("#id1").append("<p>Zusätzlicher Inhalt</p>");

										$("#id2").replaceWith("<p>Neuer Inhalt</p>");

										$("#id3").remove();

MooTools

1 2 3

Code Link 1 Link 2 Link 3 Quellcode Dokumentation:


										$("id1").grab(new Element("p", { html: "Zusätzlicher Inhalt" }));

										$(new Element("p", { html: "Neuer Inhalt" })).replaces($("id2"));

										$("id3").dispose();

The Dojo Toolkit

1 2 3

Code Link 1 Link 2 Link 3 Quellcode Dokumentation:


										dojo.create("p", { innerHTML: "Zusätzlicher Inhalt" }, "id1");

										dojo.place(dojo.create("p", { innerHTML: "Neuer Inhalt" }), "id2", "replace");

										dojo.destroy("id3");

Prototype / Script.aculo.us

1 2 3

Code Link 1 Link 2 Link 3 Quellcode Dokumentation:


										$("id1").insert("<p>Zusätzlicher Inhalt</p>");

										$("id2").replace("<p>Neuer Inhalt</p>");

										$("id3").remove();

Ext JS

1 2 3

Code Link 1 Link 2 Link 3 Quellcode Dokumentation:


										Ext.DomHelper.append("id1", { tag: "p", html: "Zusätzlicher Inhalt" });

										Ext.DomHelper.overwrite("id2", { tag: "p", html: "Neuer Inhalt" });

										Ext.get("id3").remove();

Adobe Spry

1 2 3

Code E Link 1 Quellcode Dokumentation:


										Spry.$$("#id1").forEach(function(e){

											var n = document.createElement("p");

											n.innerHTML = "Zusätzlicher Inhalt";

											e.appendChild(n);

										});


										Spry.$$("#id2").forEach(function(e){

											var n = document.createElement("p");

											n.innerHTML = "Neuer Inhalt";

											e.parentNode.replaceChild(n, e);

										});


										Spry.$$("#id3").forEach(function(e){

											e.parentNode.removeChild(e);

										});

BBC Glow

1 2 3

Code Link 1 Link 2 Link 3 Quellcode Dokumentation:


										glow.dom.get("#id1").append("<p>Zusätzlicher Inhalt</p>");

										glow.dom.get("#id2").replaceWith("<p>Neuer Inhalt</p>");

										glow.dom.get("#id3").remove();

Yahoo! UI Library

1 2 3

Code Link 1 Quellcode Dokumentation:


										Y.one("#id1").append("<p>Zusätzlicher Inhalt</p>");

										Y.one("#id2").insert("<p>Neuer Inhalt</p>", "replace");

										Y.one("#id3").remove();

Die JavaScript Framework Matrix

Matthias Schütz - Mediendesigner / Webdesigner / Grafiker / Freelancer