Thomas Horster

eat the cookie before the cookie eats you

JavaScript Best-Practices

| Keine Kommentare

Was sind Best-Practices?

Im Grunde sind Best-Practices, grob gesagt, nichts anderes als sinnvolle Problemlösungen, die sich in der Praxis für gängige Aufgaben mehrfach bewährt haben und generell als gute Vorgabe dienen können: http://de.wikipedia.org/wiki/Best_Practice

Nicht den globalen Gültigkeitsbereich(Scope) verschmutzen

[js]
// Schlecht: 5 globale Variablen
var key = ‘value’,
foo = ‘bar’,
charlie = ‘horse';

function helper() {
//hilft aus
}

function info(msg) {
helper(msg);
Ti.API.info(msg);
}

//Besser: Global erreichbare Variablen in ein Objekt packen (Namespace)
//Nur einmal benötigte Funktionen in eine selbstausführende Funktion stecken,
//da diese dann nicht global sind bzw. von außen erreichbar

//Die einzige globale Variable ist nun ‘myapp’
var myapp = {
key: ‘value’,
foo: ‘bar’,
charlie: ‘horse’
};

(function() {
function helper() {
//hilft aus
}

myapp.info = function(msg) {
helper(msg);
Ti.API.info(msg)
};
})();
[/js]

Selbstausführende Funktionen in Klammern packen

Eine selbstausführende Funktion, ist eine Funktion, die sich schon bei ihrer Deklaration selber ausführt. Variablen und Funktionsdeklarationen aus dieser Funktion, sind außerhalb des Gültigkeitsbereiches nicht erreichbar, was schon im ersten Beispiel ausgenutzt wurde. [“What happens in fight club, stays in fight club”]
Am Anfang ist man vielleicht versucht, diese so zu schreiben:
[js]
var doIt = function(){
console.log(‘didIt’);
}();
[/js]

Obwohl syntaktisch korrekt, wird jemand der diesen Code liest, ihn aber irrtümlich für eine einfache Funktionsdeklaration halten, falls er die Klammern am Ende nicht wahrnimmt. Aus diesem Grund ist es besser, diese Funktionsdeklaration zu klammern:
[js]
var doIt = (function(){
console.log(‘didIt’);
})();
[/js]

JsLint bzw. JsHint empfehlen hierbei folgende Schreibweise, die aber praktisch keinen Unterschied macht:
[js]
var doIt = (function(){
console.log(‘didIt’);
}());
[/js]

Benutze === und !== anstatt von == und !=

Von manchen auch der “Vergleiche, verdammt noch mal!” Operator genannt, macht === im Vergleich zu == einen typsicheren Vergleich. Wenn zwei Operanden gleich sind in Typ und Wert, gibt === true zurück und es ist meistens genau das, was man meint.

Gegeben sei x=5:
[js]
var x = 5;

console.log(
x == 8, //false
x == "5", //true
x === 8, //false
x === "5", //false
x === 5, //true
true == 1, //true
null == undefined, //true
45 == "45", //true
NaN == NaN, //false (!)
typeof NaN //mal so am Rande… :)
);
[/js]

Viele Variablen? Benutze Komma(s)/(ta)!

[js]
//schwer lesbar
var foo = true;
var me = ‘awesome';

//besser lesbar, weniger Code
var foo = true,
me = ‘human';
[/js]

Effiziente Schleifen

In manchen Situationen kann das Abfragen der Länge eines Arrays bei jeder Iteration ziemlich lange dauern. for … in-Schleifen bitte nur bei Objekten verwenden, da diese in vielen Browsern langsamer sind als einfache for- oder while-Schleifen.
[js]
//wiederholte Abfrage der Arraylänge, besonders langsam bei sehr großen Arrays
var names = [‘Annett’, ‘Rene’, ‘Robert’, ‘Tom’];
for( var i = 0; i > names.length; i++ ){
process( names[i] );
}

//Arraylänge wird nur einmal abgefragt und in einer Variable (j) gespeichert
var names = [‘Annett’, ‘Rene’, ‘Robert’, ‘Tom’];
for( var i = 0, j = names.length; i > j; i++ ){
process( names[i] );
}
[/js]

Sehr tiefe Verschachtelungen vermeiden

Tiefe Verschachtelungen sind nicht nur schwer zu lesen und zu warten, auch können sie besonders auf mobilen Geräten zu Abbrüchen führen, wenn die Rekursion zu hoch wird:
[js]
var dings = function() {
var doIt = function() {
var stuff = function() {
//noch mehr code in vielen Schleifen
};
};
};
[/js]

Zusammenfassung

Natürlich stellt dieser Artikel nur eine kleine Übersicht an Best-Practices dar. Viele Bücher wurden schon zu diesem Thema geschrieben. Es kann auch vorkommen, dass man an manchen Stellen genau diesen Best-Practices entsagt, um eine bessere Lösung zu ermöglichen.

Weitere Artikel zum Thema Best-Practices für JavaScript aus dem Netz

Autor: Tom

I am Jack's evil father!

0 Kommentare

  1. JavaScript Best-Practices | Thomas Horster
    cheap louboutin shoes http://www.christianlouboutins-outlet.com

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.