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

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

$(document).ready(function() {
//document is ready
});

Nämlich diese hier:

$(function() {
// document is ready
});

Übergibt man eine anonyme Funktion an die $ Methode von jQuery, so wird diese erst bei document.ready(); ausgeführt.

Gut zu wissen

Dies und weiteres wird sehr gut in diesem empfehlenswerten Buch erklärt:

Verwandte Artikel:

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

Das Ergebnis dieses Experimentes ist hier in einer kleinen Demo zu sehen.

Update: Eine erweiterte Version bietet nun auch Deeplinking, so dass man auf Tabs verlinken kann, diese ist hier zu finden. Bei modernen Browsern wird auch der Vor- und Zurückbutton unterstützt, mit einem jQuery Plugin ließe sich diese Funktion auch noch für ältere Browser aufbohren.

Verwandte Artikel:

1. Online-Editor für JavaScript, HTML und CSS
2. Kurzform von $(document).ready() in jQuery
3. Kostenlose JavaScript Bücher, Webseiten und sonstige Ressourcen

You can find a testrun here: http://jsfiddle.net/ZjsYB/

Based on a Thomas Fuchs article found here.

Verwandte Artikel:

1. High Performance JavaScript-Tabs mit Jquery (auch mit Deeplinking)
2. JavaScript Best-Practices
3. Online-Editor für JavaScript, HTML und CSS

Mashable.com

Verwandte Artikel:

1. Habe ich Schweinegrippe?

Verwandte Artikel:

1. Freie Icons finden mit den besten Suchmaschinen für freie Icons
2. Kostenlose und freie Icons

Außerdem lässt er sich einfach auch in eigenen Scripten zusätzlich verwenden, wenn Inhalte versteckt und dann angezeigt werden sollen. Der Vorteil bei dd_belated liegt an der Benutzung von VML anstatt des üblichen Alphafilters, was bessere Resultate ermöglicht. Was bleibt, ist natürlich eine kurze Verzögerung bis zum Ausführen des Scriptes und der damit kurz sichtbaren falsch angezeigten PNGs.

Recht häufig trat bei der Verwendung des Fixes ein Problem mit der Positionierung des Elementes selber im Elternelement auf. Ein einfaches “position:relative” für das umgebende Elternelement reichte dann aber meist aus.

Verwandte Artikel:

1. Flex in 2008
2. Wie man inline styles in CSS überschreiben kann
3. Stylen von input=”file” Formularfeldern im Webdesign