JavaScript/AdvancedTopics: Difference between revisions

From Medien Wiki
No edit summary
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
==Variablen-Hoisting==
==Variablen-Hoisting==
''Hoisting'' ist das "hochziehen" von Variablen an den Funktionsanfang; so als wären Variablen die irgendwo in der Funktion deklariert worden, eigentlich Anfang der Funktion deklariert. Der Javascript-Interpreter macht dies automatisch. Von diesem Verhalten ist allerdings nur die Deklaration betroffen nicht die Zuweisung eines Wertes zu der Variablen.  
''Hoisting'' ist das "hochziehen" von Variablen an den Funktionsanfang; so als wären Variablen, die irgendwo in der Funktion deklariert worden, eigentlich Anfang der Funktion deklariert. Der Javascript-Interpreter macht dies automatisch. Von diesem Verhalten ist allerdings ''nur'' die Deklaration betroffen, nicht die Zuweisung eines Wertes zu der Variablen.  


d.h., dass aus einem Code, der so geschrieben wurde:  
d.h., dass aus einem Code, der so geschrieben wurde:  
<source lang="javascript">
<source lang="javascript" highlight="3,5">
function doCalc(){
function doCalc(){
    var aNumber = 4;
     console.log("Hello Programmer!");
 
    var aNumber; //Deklaration
     console.log("Die Nummer ist:"+aNumber);
     aNumber = 4; //Zuweisung
      
     var anotherNumber = aNumber*2; //Deklaration und Zuweisung
     var anotherNumber = aNumber*2;
 
     console.log("Die andere Nummer ist:"+anotherNumber);
     console.log("Die andere Nummer ist:"+anotherNumber);
}
}
Line 19: Line 17:
<source lang="javascript" highlight="2,3">
<source lang="javascript" highlight="2,3">
function doCalc(){
function doCalc(){
     var aNumber;
     var aNumber; //Deklaration
     var anotherNumber;
     var anotherNumber; //Deklaration
     aNumber = 4;
    console.log("Hello Programmer!");
 
     aNumber = 4; //Zuweisung
     console.log("Die Nummer ist:"+aNumber);
     console.log("Die Nummer ist:"+aNumber);
 
     anotherNumber = aNumber*2; //Zuweisung
     anotherNumber = aNumber*2;
 
     console.log("Die andere Nummer ist:"+anotherNumber);
     console.log("Die andere Nummer ist:"+anotherNumber);
}
}
</source>
</source>
==Server/Client==
Mit node.js besteht die Möglichkeit, auch den Server-Teil einer Applikation in Javascript zu schreiben.
Nachteil: es muss entschieden werden, wieviel "Logik" jeweils auf dem Server und dem Client laufen soll.
Ein guter Überblick über die verschiedenen Denkmodelle und die entsprechenden Libraries, die diese implementieren:
http://blog.nodejitsu.com/scaling-isomorphic-javascript-code
Übersicht anhand eines konkreter Code-Beispiele: http://todomvc.com
(hier wurde die gleiche simple ToDo-App in versch. Client-Frameworks implementiert, von "reinem" Javascript über jQuery bis zu backbone.js)

Latest revision as of 21:36, 3 February 2013

Variablen-Hoisting

Hoisting ist das "hochziehen" von Variablen an den Funktionsanfang; so als wären Variablen, die irgendwo in der Funktion deklariert worden, eigentlich Anfang der Funktion deklariert. Der Javascript-Interpreter macht dies automatisch. Von diesem Verhalten ist allerdings nur die Deklaration betroffen, nicht die Zuweisung eines Wertes zu der Variablen.

d.h., dass aus einem Code, der so geschrieben wurde:

function doCalc(){
    console.log("Hello Programmer!");
    var aNumber; //Deklaration 
    aNumber = 4; //Zuweisung
    var anotherNumber = aNumber*2; //Deklaration und Zuweisung
    console.log("Die andere Nummer ist:"+anotherNumber);
}

Bei der Ausführung vom Interpreter so "umgeschreiben" wird:

function doCalc(){
    var aNumber; //Deklaration
    var anotherNumber; //Deklaration
    console.log("Hello Programmer!");
    aNumber = 4; //Zuweisung
    console.log("Die Nummer ist:"+aNumber);
    anotherNumber = aNumber*2; //Zuweisung
    console.log("Die andere Nummer ist:"+anotherNumber);
}

Server/Client

Mit node.js besteht die Möglichkeit, auch den Server-Teil einer Applikation in Javascript zu schreiben. Nachteil: es muss entschieden werden, wieviel "Logik" jeweils auf dem Server und dem Client laufen soll.

Ein guter Überblick über die verschiedenen Denkmodelle und die entsprechenden Libraries, die diese implementieren: http://blog.nodejitsu.com/scaling-isomorphic-javascript-code

Übersicht anhand eines konkreter Code-Beispiele: http://todomvc.com (hier wurde die gleiche simple ToDo-App in versch. Client-Frameworks implementiert, von "reinem" Javascript über jQuery bis zu backbone.js)