book

JavaScript Patterns

by Stoyan Stoyan Stefanov Stefanov

May 2012

Intermediate to advanced

240 pages

5h 25m

German

O'Reilly Verlag

Read now

Unlock full access

Zielgruppe dieses BuchesKonventionen in diesem BuchVerwendung der CodebeispieleDanksagungenQuellenLeseempfehlungen
MusterJavaScript: KonzepteObjektorientiertKeine KlassenPrototypenUmgebungECMAScript 5JSLintDie Konsole
Wartbaren Code schreibenWenige globale Variablen verwendenDas Problem mit globalen VariablenNebenwirkungen eines vergessenen varZugriff auf das globale ObjektSingle-var-MusterHoisting: Ein Problem mit verstreuten varsfor-Schleifenfor-in-SchleifenEingebaute Prototypen (nicht) erweiternswitch-MusterImplizite Typecasts vermeideneval() vermeidenZahlen umwandeln mit parseInt()Code-RichtlinienEinrückenGeschweifte KlammernPosition der öffnenden KlammerLeerraumNamenskonventionenKonstruktoren mit Großbuchstaben beginnenWörter trennenAndere Namens-MusterKommentare schreibenEine API-Dokumentation schreibenYUIDoc-BeispielSchreiben, um gelesen zu werdenPeer ReviewsMinifizieren … in der ProduktionsumgebungJSLint nutzenZusammenfassung
Objekt-LiteraleDie Objekt-Literal-SyntaxObjekte aus einem KonstruktorObject-Konstruktor-ÜberraschungEigene Konstruktor-FunktionenRückgabewerte von KonstruktorenMuster zum Erzwingen von newNamenskonventionenthat verwendenSelbst aufrufender KonstruktorArray-LiteralDie Array-Literal-SyntaxKuriositäten im Array-KonstruktorAuf »Array-Haftigkeit« prüfenJSONMit JSON arbeitenRegexp-LiteralRegexp-Literal-SyntaxWrapper für PrimitiveFehler-ObjekteZusammenfassung
HintergrundMehrdeutige TerminologieDeklarationen versus Ausdrücke: Namen und Hoistingname-Eigenschaft von FunctionFunktions-HoistingCallback-MusterEin Callback-BeispielCallbacks und ScopeAsynchrone Event ListenerTimeoutsCallbacks in BibliothekenFunktionen zurückgebenSelbst-definierende FunktionenImmediate FunctionParameter einer Immediate FunctionRückgabewerte aus Immediate FunctionsVorteile und AnwendungsfälleImmediate-Object-InitialisierungVerzweigungen beim Initialisieren (Init-Time Branching)Funktions-Eigenschaften – Ein Memoisierungs-MusterKonfigurations-ObjekteCurryAnwenden einer FunktionPartielle AnwendungCurryingWann man Currying nutztZusammenfassung
Namensraum-MusterNamensraum-FunktionAbhängigkeiten deklarierenPrivate Eigenschaften und MethodenPrivate MemberBevorzugte MethodenPrivacy-LückenObjekt-Literale und PrivacyEigenschaften und PrivacyPrivate Funktionen als öffentliche Methoden bereitstellen (Revelation-Muster)Modul-MusterBereitstellungs-Modul-MusterModule, die Konstruktoren erzeugenGlobale Variablen in ein Modul importierenSandbox-MusterEin globaler KonstruktorModule hinzufügenDen Konstruktor implementierenStatische MemberÖffentliche statische MemberPrivate statische MemberObjekt-KonstantenVerkettungs-MusterVor- und Nachteile des Verkettungs-Mustersmethod()-MethodeZusammenfassung
Klassische versus moderne Vererbungs-MusterErwartete Ergebnisse bei klassischer VererbungKlassisches Muster Nr. 1 – Das Standard-MusterDer Prototypen-Kette folgenNachteile bei Muster Nr. 1Klassisches Muster Nr. 2 – Rent-a-ConstructorDie Prototypen-KetteMehrfachvererbung bei geliehenen KonstruktorenVor- und Nachteile des Geliehener-Konstruktor-MustersKlassisches Muster Nr. 3 – Rent-and-Set-PrototypKlassisches Muster Nr. 4 – Gemeinsamer PrototypKlassisches Muster Nr. 5 – Ein temporärer KonstruktorDie Superklasse speichernDen Konstruktor-Zeiger zurücksetzenKlassPrototypische VererbungDiskussionErgänzung in ECMAScript 5Vererbung durch das Kopieren von EigenschaftenMix-InsMethoden ausleihenBeispiel: Von Array ausleihenAusleihen und BindenFunction.prototype.bind()Zusammenfassung
Singletonnew verwendenInstanz in einer statischen EigenschaftInstanz in einem ClosureFabrik/FactoryEingebaute Object-FabrikIteratorDekorierer/DecoratorAnwendungImplementierungImplementierung mit einer ListeStrategie/StrategyBeispiel: DatenvalidierungFassade/FaçadeStellvertreter/ProxyEin BeispielEin Video-ErweitererOhne StellvertreterHTMLEvent Handlervideos-Objekthttp-ObjektAuftritt des StellvertretersStellvertreter als CacheVermittler/MediatorVermittler-BeispielBeobachter/ObserverBeispiel Nr. 1: Zeitungs-SubskriptionBeispiel Nr. 2: Das Tastatur-SpielZusammenfassung
Separation of ConcernsDOM ScriptingDOM-ZugriffVeränderungen am DOMEventsEvent HandlingEvent DelegationLanglaufende SkriptensetTimeout()Web WorkersRemote ScriptingXMLHttpRequestJSONPJSONP-Beispiel: Tic-Tac-ToeFrames und Image BeaconsJavaScript-Code ausliefernSkripten kombinierenMinifizieren und KomprimierenExpires-HeaderEin CDN verwendenStrategien zum LadenDie Position des <script>-ElementsHTTP ChunkingDynamisches <script>-Element für nicht-blockierende DownloadsDas <script>-Element anfügenLazy-LoadingLoading on DemandJavaScript im Voraus ladenZusammenfassung

Content preview from JavaScript Patterns

Kapitel 8. DOM- und Browser-Muster

In den bisherigen Kapiteln lag der Schwerpunkt auf der Programmiersprache JavaScript (ECMAScript) selbst und weniger auf Mustern zur Anwendung von JavaScript im Browser. In diesem Kapitel wird hingegen eine ganze Reihe Browser-spezifischer Muster beschrieben, da Browser die am häufigsten genutzte Umgebung für JavaScript-Programme sind. Browser Scripting ist außerdem das, was die meisten Leute im Hinterkopf haben, wenn sie auf JavaScript schimpfen. Das ist auch verständlich, wenn man an all die inkonsistenten Host-Objekte und DOM-Implementierungen denkt, die in den Browsern vorhanden sind. Angesichts dieser Tatsache ist jeder gute Ratschlag sehr wertvoll, der das Client Scripting etwas weniger schmerzhaft macht. ...