Powerful mostly unknown Javascript-Features
Upcoming SlideShare
Loading in...5
×
 

Powerful mostly unknown Javascript-Features

on

  • 1,342 views

Präsentation zum Thema "Powerful mostly unknown Javascript-Features", gehalten von Entwicklern der Softwareagentur App Aware: Sascha Hameister und Aron Homberg

Präsentation zum Thema "Powerful mostly unknown Javascript-Features", gehalten von Entwicklern der Softwareagentur App Aware: Sascha Hameister und Aron Homberg

Statistics

Views

Total Views
1,342
Views on SlideShare
1,337
Embed Views
5

Actions

Likes
2
Downloads
4
Comments
0

1 Embed 5

http://www.slideshare.net 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Powerful mostly unknown Javascript-Features Powerful mostly unknown Javascript-Features Presentation Transcript

  • Powerful mostly unknown Javascript-Features 1 Freitag, 20. November 2009 1
  • Sascha Hameister - lebt in Berlin - Entwickler, App Aware - über 10 Jahre Entwicklungserfahrung - Speaker auf Fachkonferenzen - Autor bei O‘Reilly und Hanser-Verlag - Fokus: Mobile, Web 2 Freitag, 20. November 2009 2
  • Aron Homberg - lebt in München - Entwickler, App Aware - über 8 Jahre Entwicklungserfahrung - Speaker auf Fachkonferenzen - Autor bei O‘Reilly und Hanser-Verlag - Aktiv in der OpenSource Gemeinschaft - Fokus: Web, Datenbanken 3 Freitag, 20. November 2009 3
  • Agenda - Daten über mehrere Aufrufe persistent halten - Anonyme Funktionen verwenden - Debugging von Objekten verbessern - Standard-Verhalten nativer Funktionen ersetzen - Aufrufhierarchien ohne Temporärvariablen - Funktionen mit beliebiger Argumentanzahl - Funktionalität bestehender Funktionen dynamisch erweitern - Folgefehler durch Objektreferenzierung verhindern - Keywords 4 Freitag, 20. November 2009 4
  • Daten über mehrere Aufrufe persistent halten 5 Freitag, 20. November 2009 5
  • Daten über mehrere Aufrufe persistent halten - Gründe - Persistenz im Client abbilden - Netzwerktraffic verringern - Serverlast verringern 6 Freitag, 20. November 2009 6
  • Client Cookies! 7 Freitag, 20. November 2009 7
  • Client Cookies - Die Anatomie eines Cookies: cookieName=cookieValue - Weitere Parameter: - Expire date (Default: Zum Ende der Zugriffsphase) - Path (Default: Aufrufendes Dokument) - Domain (Default: Aktuelle Domain) - Secure (Boolscher Parameter: Wird eine verschlüsselte Verbindung benötigt? (HTTPS) 8 Freitag, 20. November 2009 8
  • Client Cookies - Setzen eines lokalen Cookies: document.cookie = "dieAntwort=42"; - Das ganze einfach testen: alert(document.cookie); // Besser (mit Firebug) ⋮ >>> console.debug(document.cookie); dieAntwort=42; ... (weitere Cookies) 9 Freitag, 20. November 2009 9
  • Client Cookies - Eine schöne Funktion zum speichern: function setCookie(name, value, expires, path, domain, secure) { var curCookie = name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : ""); document.cookie = curCookie; } - Persistenz bis zur nächsten WebTechCon: var naechsteWTC = new Date(); naechsteWTC.setTime(naechsteWTC.getTime() + 365 * 24 * 60 * 60 * 1000); setCookie("dieAntwort", 42, naechsteWTC); Freitag, 20. November 2009 10
  • Client Cookies - Und das ganze auslesen: function getCookie(name) { var dc = document.cookie; var prefix = name + "="; var begin = dc.indexOf("; " + prefix); if (begin == -1) { begin = dc.indexOf(prefix); if (begin != 0) return null; } else begin += 2; var end = document.cookie.indexOf(";", begin); if (end == -1) end = dc.length; return unescape(dc.substring(begin + prefix.length, end)); } - Achtung: Cookies werden escaped gespeichert und müssen daher durch get/setCookie un/escaped werden. Freitag, 20. November 2009 11
  • Client Cookies - Die Persistenzschicht ist fertig: console.log(getCookie("dieAntwort")); ⋮ 42 - Seite neu laden... und das ganze nochmal: getCookie("dieAntwort") -> 42 :-) - Implementiert z.B. im Dojo-Framework im Namespace: dojo.cookie Freitag, 20. November 2009 12
  • Anonyme Funktionen verwenden 13 Freitag, 20. November 2009 13
  • Anonyme Funktionen verwenden - Gründe - Implizite Codeübergabe - Funktionalität dynamisch injecten - Temporärcode ausführen 14 Freitag, 20. November 2009 14
  • Anonyme Funktionen! 15 Freitag, 20. November 2009 15
  • Anonyme Funktionen - Eine anonyme Funktion kreieren: (function () { alert("I am unnamed!"); }()); // Calls the method directly - Einer Funktion eine anonyme Funktion übergeben: var obj = {"answer": 33}; function execOnObject(obj, funcRef) { obj.__jailCode = funcRef; obj.__jailCode(); // Einfache Variante - oder apply/call() } execOnObject(obj, function() { alert(this.answer); // -> 33 16 }); Freitag, 20. November 2009 16
  • Anonyme Funktionen - Iterative Scope-Jail-Execution (z.B. ähnlich dojo.forEach()) function forEach(map, code) { for (key in map) { map[key].__jailCode = code; map[key].__jailCode(); } return map; } var myMap = [{value: 1}, {value: 2}, {value : 3}]; myMap = forEach(myMap, function() { // This references to map iterator while // function execution this.value = this.value * 4; }); console.debug(myMap); 17 Freitag, 20. November 2009 17
  • Freitag, 20. November 2009 18
  • Debugging von Objekten verbessern 19 Freitag, 20. November 2009 19
  • Debugging von Objekten verbessern - Gründe - Standard-Debugging-Output von Objekten ist stets [object Object] - Objekte werden serialisierbar (beispielsweise für den Versand zum Server) function Person (firstName, lastName) { } var p = new Person("Sascha", "Hameister"); alert(p); // [object Object] alert(p + " FOO"); // [object Object] FOO 20 Freitag, 20. November 2009 20
  • toString und valueOf! 21 Freitag, 20. November 2009 21
  • toString & valueOf function Person (firstName, lastName) { this.toString = function () { return "<Person {firstName: '" + firstName + "', lastName: '" + lastName + "'"} >" } this.valueOf = function () { return firstName + " " + lastName; } } var p = new Person("Sascha", "Hameister"); alert(p); // <Person {firstName: "Sascha", lastName: ”Hameister”} > alert(p + " FOO"); // [object Object] FOO // Sascha Hameister FOO 22 Freitag, 20. November 2009 22
  • Standard-Verhalten nativer Funktionen ersetzen 23 Freitag, 20. November 2009 23
  • Standard-Verhalten nativer Funktionen ersetzen - Gründe - alert-, con rm-, prompt-Funktionen mit eigener Funktionalität ersetzen und Aufrufbarkeit nativer Funktionalität sicherstellen 24 Freitag, 20. November 2009 24
  • Native function overloading! 25 Freitag, 20. November 2009 25
  • Native function overloading var _alert = window.alert; function alert(msg) { console.debug(msg); } alert("FOO"); // Debugs FOO _alert("BAR") // Alerts BAR with native alert-window. delete window.alert; // Später dazu mehr :) alert("FOO AGAIN!"); 26 Freitag, 20. November 2009 26
  • Aufrufhierarchien ohne Temporärvariablen 27 Freitag, 20. November 2009 27
  • Aufrufhierarchien ohne Temporärvariablen - Gründe - Mehrstu ge Aufrufverkettungen gut leserlich implementieren (beispielsweise bei Graphenzeichnung oder Charting) 28 Freitag, 20. November 2009 28
  • Chaining! 29 Freitag, 20. November 2009 29
  • Chaining - Verkettete Funktionsaufrufe de nieren: var validValues = new Array( {valid: false, value: 0}, {valid: true, value: 1} ).filter(function(ele) { if (ele.valid) {return ele} }).map(function(ele) { return ele.value; }).toString(); console.log(validValues); // -> 1 30 Freitag, 20. November 2009 30
  • Chaining - Pro‘s: - Sehr gut anwendbar, um temporäre Variablen zu vermeiden - Kann bei kleinen Chains die Lesbarkeit erhöhen - Automatisches „delete“ der - implizit nicht deklarierten - Temporärvariablen (Speicherschonend, weniger Code!) - Con‘s: - Achtung bei „unde ned“ returns! - Achtung bei zu langen Verkettungen! (Lesbarkeit) 31 Freitag, 20. November 2009 31
  • Funktionen mit beliebiger Argumentanzahl 32 Freitag, 20. November 2009 32
  • Funktionen mit beliebiger Argumentanzahl - Gründe - Realisierung von Funktionen wie printf - Realisierung von Funktionen ohne benamte Parameter 33 Freitag, 20. November 2009 33
  • arguments! 34 Freitag, 20. November 2009 34
  • arguments - Beliebige Argumentanzahlen verarbeiten: function lotOfArgs() { console.debug(arguments); } lotOfArgs("A", "B", 3, 4, 20, true, /rg/); ⋮ -> ["A", "B", 3, 4, 20, true, /rg/] - „arguments“ ist ein Keyword im Funktionskontext - Es ist als Array iterierbar (arguments.length, arguments[i]) 35 Freitag, 20. November 2009 35
  • arguments - Tracing des Aufrufers & Dynamische Rekursion: var maxThiefTry = 3; function thief() { attractOfficer(); } function attractOfficer() { maxThiefTry--; console.log("Arrest thief in... " + maxThiefTry + "times!"); if (maxThiefTry > 0) { arguments.callee(); } else { console.log("Thief arrested!") } } thief(); - arguments.callee references calling function and scope36 Freitag, 20. November 2009 36
  • arguments - Drei Chancen hatte er ;-) Arrest thief in... 2times! Arrest thief in... 1times! Arrest thief in... 0times! Thief arrested! - Die Aufgerufene Funktion ruft den Aufrufer dynamisch auf und muss nichts über dessen Funktionsnamen etc. wissen. - Es lassen sich so endliche und unendliche dynamische Rekursionsschleifen bzw. Ping-Pongs erstellen. 37 Freitag, 20. November 2009 37
  • Funktionalität bestehender Funktionen dynamisch erweitern 38 Freitag, 20. November 2009 38
  • Funktionalität bestehender Funktionen dynamisch erweitern - Gründe - Bestehende Funktionen nicht weiter aufblähen - Mixen mehrerer Funktionalitäten zu einer neuen Funktion 39 Freitag, 20. November 2009 39
  • Delegation! 40 Freitag, 20. November 2009 40
  • Delegation - Funktionen miteinander vereinen (Mixing) function delegate() { var stack = arguments; return function() { for (var i=0; i<stack.length; i++) { stack[i](arguments); } }; } var func1 = function() {console.debug(arguments)}; var func2 = function() {console.debug(arguments)}; func3 = delegate(func1, func2); func3("C"); - „func3()“ ruft „func1()“ und „func2()“ mit seinen Aufrufparametern auf! 41 Freitag, 20. November 2009 41
  • Folgefehler durch Objektreferenzierung verhindern 42 Freitag, 20. November 2009 42
  • Folgefehler durch Objektreferenzierung verhindern - Standard: Mit Referenzen arbeiten: var aron = {name: "Aron Homberg"}; var sascha = aron; sascha.name = "Sascha Hameister"; console.debug(aron); -> aron.name -> „Sascha Hameister“ - Achtung: Versteckte Bugs! Durch die Verwendung als Referenz wurde das Objekt Aron ebenfalls manipuliert! - Skalare Typen werden immer kopiert, nie referenziert. 43 Freitag, 20. November 2009 43
  • Objekte klonen! 44 Freitag, 20. November 2009 44
  • Objekte klonen - Lösung: Objekte und ihre Attribute (1st-Level) klonen! function clone(props) { var tobj = {}; for(var x in props){ tobj[x] = props[x]; } return tobj; } var aron = {name: "Aron Homberg"}; var sascha = clone(aron); sascha.name = "Sascha Hameister"; console.debug(aron); -> aron.name -> „Aron Homberg“ // Bleibt unverändert! - Diese Funktion klont lediglich die erste Attribut-Ebene eines Objekts. In tieferen Ebenen blieben Referenzen erhalten. Freitag, 20. November 2009 45
  • Keywords 46 Freitag, 20. November 2009 46
  • Keywords - instanceof - typeof - with - delete - in - continue - new 47 Freitag, 20. November 2009 47
  • Keyword: instanceof 48 Freitag, 20. November 2009 48
  • Keyword: instanceof - Gibt true zurück, wenn das Objekt die Instanz einer gegebenen Klasse ist. var example = 'FOO'; alert(example instanceof String); // false var example = new String('FOO'); alert(example instanceof String); // true 49 Freitag, 20. November 2009 49
  • Keyword: typeof 50 Freitag, 20. November 2009 50
  • Keyword: typeof var example = 'FOO'; alert(typeof example); // string var example = 10; alert(typeof example); // number var example = true; alert(typeof example); // boolean var example = /foo/ig alert(typeof example); // object var example = []; alert(typeof example); // object var example = {}; alert(typeof example); // object 51 Freitag, 20. November 2009 51
  • Keyword: with 52 Freitag, 20. November 2009 52
  • Keyword: with with (document.getElementById('example')) { innerHTML = 'HTML INHALT'; style.color = '#123456'; style.height = '20px'; } 53 Freitag, 20. November 2009 53
  • Keyword: delete 54 Freitag, 20. November 2009 54
  • Keyword: delete - Per delete können Zuweisungen aller Art hart gelöscht werden: var object = { attribute1 : 'value1', attribute2 : 'value2' }; ⋮ delete object.attribute1; Mit „delete“ lässt sich Speicher freiräumen. Temporärvariablen bei Iterationen sollten so immer „Garbage collected“ werden. 55 Freitag, 20. November 2009 55
  • Keyword: delete - Aufpassen bei Arrays oder Iterationen! var anArray = ['foo', 'bar']; delete anArray[1]; for (var i = 0; i < anArray.length; i++) { console.log(anArray[i]); // foo, undefined } Es wird hart gelöscht. Eine Änderung der Indizes oder des length- Attributes des Arrays erfolgt nicht! 56 Freitag, 20. November 2009 56
  • Keyword: delete - ACHTUNG: delete() löscht je nach Implementation (Javascript- VM / Interpreter) hart die Referenz aus dem Memory. - Bei Zugriff auf einen so gelöschten Wert können dadurch kritische Interpreter / VM-Runtime Execution Fehler auftreten. 57 Freitag, 20. November 2009 57
  • Keyword: in 58 Freitag, 20. November 2009 58
  • Keyword: in var object = { attribute1 : 'value1', attribute2 : 'value2' }; 'attribute1' in object // TRUE var object = { attribute1 : 'value1', attribute2 : 'value2' }; var idx; for (idx in object) { alert(object[idx]); // two alerts… value1, value2 } 59 Freitag, 20. November 2009 59
  • Keyword: in (Prototypes!) Object.prototype.example = function () {}; var object = { attribute1 : 'value1', attribute2 : 'value2' }; var idx; for (idx in object) { alert(object[idx]); // Was erwarten Sie? } value1 value2 function () {} 60 Freitag, 20. November 2009 60
  • Keyword: in (Prototypes!) - Bei der Nutzung von in bei jedem Cycle Plausibilitätsprüfung des aktuellen Typs Object.prototype.example = function () {}; var object = { attribute1 : 'value1', attribute2 : 'value2' }; var currentObject; var idx; for (idx in object) { currentObject = object[idx]; if (typeof currentObject === 'string') { alert(object[idx]); // two alerts… value1, value2 } } 61 Freitag, 20. November 2009 61
  • Keyword: continue 62 Freitag, 20. November 2009 62
  • Keyword: continue outerLabel: for (var i = 0; i < 5; i++) { innerLabel: for (var j = 0; j < 5; j++) { if (j == 2) { continue outerLabel; } } } 63 Freitag, 20. November 2009 63
  • Keyword: new 64 Freitag, 20. November 2009 64
  • Keyword: new function MyClass () {} var foo = new MyClass(); var bar = MyClass(); // Unterschied? function MyClass () { if (!(this instanceof MyClass)) { throw 'You tried to instantiate MyClass without new.'; } } 65 Freitag, 20. November 2009 65
  • Powerful known Javascript- Features! Vielen Dank! :-) 66 Freitag, 20. November 2009 66