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 jQuery MooTools The Dojo Toolkit Prototype / Script.aculo.us Ext JS Adobe Spry BBC Glow Yahoo! UI Library

DOM Ready

Code Link 1 Quellcode Dokumentation:


										Spry.Utils.addLoadListener(function(){

											// Code

										});

DOM Basics

Code Link 1 Quellcode Dokumentation:


										Spry.$$("#id, .class, div").setStyle("background: blue;");

DOM Filtering

1 2 3

Code Link 1 Quellcode Dokumentation:


										Spry.$$("div p").setStyle("background: blue;");

										Spry.$$("div[rel='test']").setStyle("background: blue;");

										Spry.$$("div p:nth-child(odd)").setStyle("background: blue;");

DOM Manipulation

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);

										});

Effekte

1 2 3

Code Z Link 1 Link 2 Link 3 Zusatz Quellcode Dokumentation:


										Spry.Effect.DoBlind("id1");

										Spry.Effect.DoFade("id2", { from: 100, to: 0, duration: 1000 } );


										FadeBlind = function(e){

											this.addParallelEffect(new Spry.Effect.Opacity(e, 1, 0.5, { duration: 1500 }));

											this.addParallelEffect(new Spry.Effect.Blind(e, { duration: 1500, to: "20px" }));

										};

										FadeBlind.prototype = new Spry.Effect.Cluster();

										FadeBlind.prototype.constructor = FadeBlind;

										var fx3 = new FadeBlind("id3").start();

Transitions

Code Z Link 1 Zusatz Quellcode Dokumentation:


										var fx = new Spry.Effect.Blind("id", {

											duration: 1500,

											to: "20px",

											transition: Spry.sinusoidalTransition

										}).start();

Events

Code Link 1 Quellcode Dokumentation:


										Spry.$$("#id")

											.addEventListener("click", function(){

												Spry.$$("#id").setStyle("background: red;");

											}, false)

											.addEventListener("mouseout", function(){

												Spry.$$("#id").setStyle("background: blue;");

											}, false);

Eigene Funktionen

Code Link 1 Quellcode Dokumentation:


										Spry.$$.Results.eigeneFunktion = function(parameter){

											return this.setStyle(

												"background:" + parameter.farbe + ";" +

												"border:" + parameter.rand + ";"

											)

										};


										Spry.$$("#id").eigeneFunktion({

											farbe: "red",

											rand: "3px blue solid"

										});

Ajax

1

2

Code Z Link 1 Link 2 Zusatz Quellcode Dokumentation:


										Spry.Utils.updateContent("id", "ajax.html");


										// Erweitert

										Spry.Utils.loadURL(

											"GET",

											"ajax.html",

											true,

											function(req){

												Spry.Utils.setInnerHTML("id", req.xhRequest.responseText);

											}

										);

Klassen

Code E Quellcode Dokumentation:


										function Entwickler(name){

											this.name = name;

											this.firma = "Neue Firma";


											this.aufgabe = function(){

												return "Entwicklung";

											};


											this.info = function(){

												alert(this.name + ", " + this.aufgabe() + ", " + this.firma);

											};

										}


										function Designer(name){

											Entwickler.call(this, name);


											this.aufgabe = function(){

												return "Design";

											};

										}


										var neuerEntwickler = new Entwickler("Tim");

										var neuerDesigner = new Designer("Tom");


										neuerEntwickler.info(); // Ausgabe: "Tim, Entwicklung, Neue Firma"

										neuerDesigner.info(); // Ausgabe: "Tom, Design, Neue Firma"

Die JavaScript Framework Matrix

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