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

// 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)
    };
})();

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:

var doIt = function(){
    console.log('didIt');
}();

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:

var doIt = (function(){
    console.log('didIt');
})();

JsLint bzw. JsHint empfehlen hierbei folgende Schreibweise, die aber praktisch keinen Unterschied macht:

var doIt = (function(){
    console.log('didIt');
}());

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:

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... 
);

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

//schwer lesbar
var foo = true;
var me = 'awesome';

//besser lesbar, weniger Code
var foo = true,
      me = 'human';

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.

//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] );
}

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:

var dings = function() {
    var doIt = function() {
        var stuff = function() {
            //noch mehr code in vielen Schleifen
        };
    };
};

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

• Operas Best-Practices
• Präsentation von Christian Heilmann
• Hacker-News zum Thema
• JavaScript in 10 Minuten

Verwandte Artikel:

1. JavaScript Miniframework
2. Douglas Crockford über die Entstehung von JavaScript
3. Sichtbarkeit eines Elementes in JavaScript togglen

Verwandte Artikel:

1. Sichtbarkeit eines Elementes in JavaScript togglen
2. JavaScript Best-Practices

Verwandte Artikel:

1. JavaScript Best-Practices
2. Schräges JavaScript
3. Douglas Crockford über die Entstehung von JavaScript

Verwandte Artikel:

1. JavaScript Best-Practices
2. Douglas Crockford über die Entstehung von JavaScript
3. Kostenlose JavaScript Bücher, Webseiten und sonstige Ressourcen

Verwandte Artikel:

1. jQuery am Freitag…
2. High Performance JavaScript-Tabs mit Jquery (auch mit Deeplinking)
3. Kurzform von $(document).ready() in jQuery

Verwandte Artikel:

1. Kostenlose und freie Icons
2. Kostenlose JavaScript Bücher, Webseiten und sonstige Ressourcen
3. Freie Icons finden mit den besten Suchmaschinen für freie Icons

Verwandte Artikel:

1. Spaß am Freitag
2. Herzklopfen mit jQuery
3. High Performance JavaScript-Tabs mit Jquery (auch mit Deeplinking)

Hier ein paar Anregungen meinerseits:

• Mozilla JavaScript-Guide -> bitte beachten, dass die Mozillaner auch > JS 1.5 erwähnen, aber 1.5 gerade allgemeiner Standard ist
• JavaScript – The Definitive Guide -> komplettes online JavaScript-Buch aus dem empfehlenswerten O’Reilly-Verlag
• Nettuts+ JavaScript-Ecke -> größtenteils gute bis sehr gute JavaScript-Tutorials

Um das gelernte mal schnell auszuprobieren empfiehlt sich der allseits beliebte Onlineeditor jsfiddle, hier kann man auch jegliche Art von JS-Framework einbinden und seit neuestem auch JSLint (prüft richtige Verwendung von JS), so wie jQuery-Lint (prüft richtige Verwendung von jQuery) benutzen.

Verwandte Artikel:

1. Die allerbeste, freie und kostenlose JavaScript-Dokumentation
2. High Performance JavaScript-Tabs mit Jquery (auch mit Deeplinking)
3. Online-Editor für JavaScript, HTML und CSS

Warum man das machen sollte? So ist es einfacher, über Fehler auf der eigenen Seite, neue Funktionen oder Ideen von anderen Seiten zu sprechen, wo man normalerweise einen Screenshot machen würde, was weit umständlicher ist.
Der Dienst ist zwar noch Beta, aber ich werde das weiterverfolgen! Anschauen lohnt sich jetzt schon!

Verwandte Artikel:

1. Kostenlose JavaScript Bücher, Webseiten und sonstige Ressourcen
2. Flex in 2008
3. Der beste PNG-Fix für den IE6

Verwandte Artikel:

1. Schräges JavaScript
2. JavaScript Best-Practices
3. Kostenlose JavaScript Bücher, Webseiten und sonstige Ressourcen