Westhoff Plugin-Entwicklung mit jQuery

1. Auflage 2010
ISBN: 978-3-86802-237-7
Verlag: entwickler.press
Format: PDF
Kopierschutz: 0 - No protection

E-Book, Deutsch, 300 Seiten

Jedes ernst zu nehmende Webportal bedient sich heutzutage Technologien und Methoden, die sich hinter Begriffen wie Web 2.0, RIA, Ajax und Javascript verstecken. Benutzer erwarten mittlerweile selbst von einfachsten Webapplikationen ein gewisses Maß an Interaktivität und Fähigkeit zur Userkommunikation. Hier erweist sich das Javascript-Framework jQuery als besonders nützlich. Es ist äußert kompakt, schnell und gut strukturiert. Im Vergleich zu seinen Artgenossen hebt es sich durch die Konzentration auf Kernfunktionen, sowie seine Geschwindigkeit hervor. Mit dem Wandel der Internet-Präsenzen haben sich auch die Entwicklungs- und Deploymentprozesse geändert. Sogenannte 'Web2.0-Portale' erlauben dem Benutzer und gleichermaßen dem Entwickler das Hinzuschalten von Erweiterungen und neuen Funktionalitäten. Hier spielt jQuery ein weiteres seiner herausragenden Merkmale voll aus: Die Erweiterbarkeit durch Plugins. Plugins vereinfachen die Modularisierung der Applikation und fördern damit den angestrebten agilen Deploymentprozess. Der jüngste Sprössling des jQuery-Frameworks ist jQuery UI. Es kommt schon von Hause aus mit einer Vielzahl von Widgets und Animationen daher, welche schnell und einfach in ein bestehendes jQuery-Projekt integriert werden können. Darüber hinaus stellt es das nötige Handwerkszeug für die Entwicklung von eigenen wiederverwendbaren Widgets bereit. Dieses Buch beschreibt die verschiedenen Aspekte der Entwicklung von jQuery Plugins und den Aufbau von Applikationen auf deren Basis. Die Autoren identifizieren die verschiedenen elementaren Plugintypen und stellen diese detailliert vor. Zu jeder dieser Umsetzungen beschreiben Feder und Westhoff die Tricks und Kniffe, auf die sie in ihrem täglichen Umgang mit jQuery gestoßen sind und warnen vor möglichen Fallstricken. Natürlich fehlt auch ein Kapitel zum Thema Test-Driven-Development nicht.

Autoren/Hrsg.

Westhoff, Jakob

Inhaltsverzeichnis

1;Inhaltsverzeichnis;4
2;Vorwort;12
3;1 JavaScript: Ein Überblick;14
3.1;1.1 Webanwendungen;14
3.2;1.2 Serverseitige Webanwendungen;15
3.3;1.3 Eingebettet;16
3.4;1.4 JavaScript als Wunderwaffe?;17
3.5;1.5 Zusammenfassung;18
4;2 Willkommen in der Welt von jQuery;20
4.1;2.1 Herunterladen und Einbinden von jQuery;20
4.1.1;2.1.1 Download von der jQuery-Webseite;21
4.1.2;2.1.2 Verwendung eines CDN;23
4.1.3;2.1.3 Welcher Weg ist der bessere?;25
4.2;2.2 jQuery vs. JavaScript;25
4.3;2.3 Dokumententraversierung;28
4.3.1;2.3.1 CSS-Selektoren;28
4.3.2;2.3.2 Element-Sets;31
4.3.3;2.3.3 Fluent Interface;32
4.3.4;2.3.4 Traversierung der Baumstruktur;32
4.3.5;2.3.5 jQuerys Gedächtnis für Sets;34
4.4;2.4 Dokumentenmanipulation;35
4.4.1;2.4.1 CSS-Eigenschaften;35
4.4.2;2.4.2 Umgang mit Attributen und CSS-Klassen;38
4.4.3;2.4.3 Erstellen neuer Elemente;40
4.4.4;2.4.4 Elemente im DOM platzieren;42
4.4.5;2.4.5 Inhalte von Elementen auslesen und verändern;43
4.4.6;2.4.6 Elemente ersetzen, umhüllen oder löschen;47
4.4.7;2.4.7 Elemente aus dem DOM lösen;51
4.4.8;2.4.8 Optische Position und Größe;51
4.4.9;2.4.9 Callbacks anstelle von Werten mit jQuery 1.4;56
4.5;2.5 Ereignisbehandlung;57
4.5.1;2.5.1 Ereignisse registrieren mit jQuery;57
4.5.2;2.5.2 Das Event-Objekt;58
4.5.3;2.5.3 Ereignisregistrierungen wieder aufheben;59
4.5.4;2.5.4 Ereignisse auslösen;60
4.5.5;2.5.5 Umgang mit benutzerdefinierten Ereignissen;61
4.5.6;2.5.6 Abkürzungen zur Ereignisregistrierung;62
4.5.7;2.5.7 Ereignisnamensräume;64
4.5.8;2.5.8 Der Weg eines Ereignisses;65
4.5.9;2.5.9 Ereignisdelegation;66
4.5.10;2.5.10 Ereignisse außerhalb von Elementen;70
4.5.11;2.5.11 Die Proxy-Funktion;73
4.6;2.6 Animation;75
4.6.1;2.6.1 CSS-Eigenschaften über die Zeit verändern;75
4.6.2;2.6.2 Relative Werte als Animationsziel;76
4.6.3;2.6.3 Werte mit spezieller Bedeutung;77
4.6.4;2.6.4 Mehrschrittige Animationen;78
4.6.5;2.6.5 Animationen während der Ausführung anhalten;80
4.6.6;2.6.6 Eine Easing-Funktion pro Eigenschaft;80
4.6.7;2.6.7 Animieren mit Abkürzungen;80
4.7;2.7 AJAX mit jQuery;82
4.7.1;2.7.1 JSON;83
4.7.2;2.7.2 Verschiedene Kommunikationswege;85
4.7.3;2.7.3 Die ajax-Funktion;90
4.7.4;2.7.4 Globale AJAX-Optionen mit ajaxSetup;99
4.7.5;2.7.5 Abkürzungen auf dem Weg zu neuen Daten;100
4.8;2.8 Zusammenfassung;102
5;3 jQuery-Plug-ins;104
5.1;3.1 Was sind jQuery-Plug-ins?;104
5.2;3.2 Unterschiedliche Plug-in-Typen;105
5.2.1;3.2.1 Neue Methoden;106
5.2.2;3.2.2 Neue Funktionen;108
5.2.3;3.2.3 Special Events;108
5.2.4;3.2.4 Animations Easing-Funktionen;108
5.2.5;3.2.5 CSS-Selektoren;109
5.2.6;3.2.6 Widgets;109
5.2.7;3.2.7 Effects;109
5.2.8;3.2.8 Behaviours;110
5.3;3.3 Grundregeln der Plug-in-Entwicklung;110
5.3.1;3.3.1 Konventionen zur Namensgebung;110
5.3.2;3.3.2 Zugriff auf die jQuery-Bibliothek;112
5.3.3;3.3.3 Anlegen neuer Set-Methoden;114
5.3.4;3.3.4 Anlegen neuer Funktionen;115
5.3.5;3.3.5 Beachtung des Fluent-Interface;115
5.3.6;3.3.6 Multiple Elemente eines Sets korrekt behandeln;116
5.4;3.4 Grundgerüst;117
5.5;3.5 Zusammenfassung;118
6;4 Hello World;120
6.1;4.1 Anforderungen an das Plug-in;120
6.2;4.2 Grundgerüst des world-Plug-ins;120
6.3;4.3 Behandlung von Optionen;121
6.3.1;4.3.1 Implementierung der Optionsbehandlung;122
6.4;4.4 Manipulation des DOM;125
6.5;4.5 Das vollständige Plug-in;126
6.6;4.6 Zusammenfassung;127
7;5 Objektorientierung;128
7.1;5.1 Konzept der Objektorientierung;128
7.1.1;5.1.1 Ein Beispiel bitte!;129
7.2;5.2 Klassen != Prototypen;130
7.2.1;5.2.1 Objekte in JavaScript;131
7.2.2;5.2.2 Prototypen;134
7.2.3;5.2.3 Konstruktorfunktionen;138
7.3;5.3 Zurück zum Bankszenario;140
7.3.1;5.3.1 Der Prototyp für das Kundenobjekt;140
7.3.2;5.3.2 Der Prototyp für das Kontenobjekt;141
7.3.3;5.3.3 Anlegen neuer Kunden- und Kontenobjekte;142
7.4;5.4 Prototype Chains;142
7.4.1;5.4.1 Ketten von Prototypen;143
7.4.2;5.4.2 Ein weiteres Hindernis: Konstruktorfunktionen;145
7.5;5.5 Zurück zum Bankszenario II;147
7.6;5.6 Zusammenfassung;148
8;6 Livesearch;150
8.1;6.1 Livesearch im Detail;150
8.2;6.2 Aufgaben des Plug-ins;151
8.3;6.3 Kategorisierung des Plug-ins;153
8.3.1;6.3.1 Objektorientiertes Design;153
8.3.2;6.3.2 Objektorientierung nicht zum Selbstzweck;154
8.4;6.4 Das übliche Grundgerüst;154
8.5;6.5 Das _Livesearch-Objekt;156
8.5.1;6.5.1 Der Konstruktor;156
8.5.2;6.5.2 Methode: disableNativeAutocomplete;158
8.5.3;6.5.3 Methode: createListContainer;159
8.5.4;6.5.4 Methode: createSearchFunction;161
8.5.5;6.5.5 Methode: attachToTarget;165
8.5.6;6.5.6 moveCursor-Methode;170
8.5.7;6.5.7 closeAutocompleteList-Methode;172
8.5.8;6.5.8 renewSearchDelay-Methode;173
8.5.9;6.5.9 abortRunningSearch-Methode;175
8.5.10;6.5.10 executeSearch-Methode;175
8.5.11;6.5.11 resultReceived-Methode;176
8.6;6.6 Glückwunsch zum ersten echten Plug-in;177
8.7;6.7 Zusammenfassung;178
9;7 Neue Funktionen für jQuery;180
9.1;7.1 Kurzeinführung in REST;180
9.2;7.2 Die Funktionen $.put, $.head und $.delete;181
9.2.1;7.2.1 Die Definition von Funktionen;182
9.3;7.3 Zusammenfassung;184
10;8 Special Events;186
10.1;8.1 Aufbau eines Special Events;186
10.1.1;8.1.1 Magische Methoden;187
10.2;8.2 Existierende Ereignisse erweitern;190
10.2.1;8.2.1 Ein angemessener Mauszeiger für alle Elemente;190
10.3;8.3 Drag and Drop;191
10.3.1;8.3.1 Die Ereignisse „dragstart“, „dragmove“ und „dragend“;192
10.3.2;8.3.2 Das Kernstück: _Handler;193
10.4;8.4 Tastaturshortcuts mit „add“ und „remove”;196
10.4.1;8.4.1 Erweiterung des keypress-Ereignisses;197
10.5;8.5 Zusammenfassung;199
11;9 CSS-Selektoren entwickeln;200
11.1;9.1 Sizzle;200
11.1.1;9.1.1 Geschichte von Sizzle;200
11.1.2;9.1.2 Sizzles Erweiterungsmöglichkeiten;201
11.2;9.2 Neue Pseudoklassen für jQuery;205
11.2.1;9.2.1 Die Pseudoklasse :draggable;205
11.2.2;9.2.2 Die Pseudoklasse :ev;208
11.3;9.3 Zusammenfassung;210
12;10 Easing-Funktionen zur Animationskontrolle;212
12.1;10.1 Easing-Funktionen im Allgemeinen;212
12.2;10.2 jQuerys Dreingaben: linear und swing;212
12.2.1;10.2.1 Easing auf einen Blick: Grafische Darstellung;212
12.2.2;10.2.2 jQuerys Interface für Easing-Funktionen;213
12.3;10.3 Weitere Easing-Funktionen mit dem Easing- Plug-in;218
12.3.1;10.3.1 Grafische Übersicht über die Funktionen des Plug-ins;219
12.4;10.4 Zusammenfassung;223
13;11 jQuery UI;224
13.1;11.1 Installation und Einsatz;225
13.2;11.2 Bereiche des Frameworks;227
13.3;11.3 Widgets und Behaviours im Einsatz;228
13.3.1;11.3.1 Das Widget-API;228
13.3.2;11.3.2 Behaviours;231
13.4;11.4 Animationen und Effekte;233
13.4.1;11.4.1 Effekte – Das neue Pferd im Stall;233
13.4.2;11.4.2 Farbanimationen und Klassenübergänge;234
13.4.3;11.4.3 Easing – Übergänge mit Niveau;237
13.5;11.5 ThemeRoller;237
13.6;11.6 Entwicklung eigener jQuery UI Widgets;238
13.6.1;11.6.1 Widget oder Plug-in?;239
13.6.2;11.6.2 Ziel: Das myprogressbar-Widget;240
13.6.3;11.6.3 Die Widget Factory;241
13.6.4;11.6.4 Verarbeitung von Optionen;243
13.6.5;11.6.5 Magische Methoden und Eigenschaften;246
13.6.6;11.6.6 Widgets erschaffen und zerstören;250
13.6.7;11.6.7 Rückgabe eines konkreten Wertes;252
13.7;11.7 Behaviours entwickeln;254
13.7.1;11.7.1 Behaviour: destroyable;254
13.8;11.8 Komplexe Effekte zum Selbermachen;258
13.8.1;11.8.1 registrierung des eigenen Effekts;258
13.8.2;11.8.2 Effektoptionen behandeln;259
13.8.3;11.8.3 Hilfsmittel zur Effektentwicklung;260
13.8.4;11.8.4 Der grid-Effekt im Detail;262
13.9;11.9 Widgets fit für den ThemeRoller;268
13.9.1;11.9.1 jQuery-UI-CSS-Framework;268
13.9.2;11.9.2 Namensgebung für eigene CSS-Klassen;270
13.10;11.10 Zusammenfassung;271
14;12 Testen von Software;272
14.1;12.1 Verschiedene Stufen des Testens;272
14.2;12.2 Unit Tests in JavaScript;274
14.2.1;12.2.1 Testframeworks;274
14.3;12.3 QUnit;275
14.3.1;12.3.1 Download und Dokumentation;275
14.3.2;12.3.2 Einrichten einer Testumgebung;275
14.3.3;12.3.3 Der erste Unit Test;278
14.3.4;12.3.4 Assertions;281
14.3.5;12.3.5 Das xUnit-Pattern und QUnit;284
14.3.6;12.3.6 HTML Fixtures;287
14.3.7;12.3.7 Ereignisbehandlung testen;290
14.3.8;12.3.8 Asynchrone Aufrufe testen;293
14.3.9;12.3.9 FireUnit mit QUnit verheiraten;296
14.4;12.4 Mocks und Stubs;297
14.4.1;12.4.1 Simulation Stubs;298
14.4.2;12.4.2 Mock-Objekte;301
14.4.3;12.4.3 Sinon.JS – Stubs, Mocks und Spys;301
14.4.4;12.4.4 Sinon.JS und der fakeXMLHttpRequest;302
14.4.5;12.4.5 Ein Stub für die Zeit;305
14.5;12.5 JsTestDriver;310
14.5.1;12.5.1 Client/Server-Architektur;311
14.5.2;12.5.2 Installation und Einrichtung einer Testumgebung;312
14.5.3;12.5.3 Assertions;319
14.5.4;12.5.4 Testlebenszyklen;321
14.5.5;12.5.5 HTML-Fixtures;322
14.5.6;12.5.6 Asynchrone Tests mit JsTestDriver;325
14.5.7;12.5.7 Code-Coverage-Analyse;325
14.5.8;12.5.8 Legacy-Tests: QUnit-Tests mit JsTestDriver ausführen;330
14.6;12.6 Zusammenfassung;331
15;Stichwortverzeichnis;334
15.1;Symbole;334
15.2;A;334
15.3;B;334
15.4;C;335
15.5;D;335
15.6;E;336
15.7;F;337
15.8;G;337
15.9;H;337
15.10;I;338
15.11;J;338
15.12;K;338
15.13;L;339
15.14;M;339
15.15;N;339
15.16;O;339
15.17;P;340
15.18;Q;340
15.19;R;340
15.20;S;341
15.21;T;341
15.22;U;342
15.23;V;342
15.24;W;342
15.25;X;343
15.26;Y;343
15.27;Z;343