jQuery - Filter

[dedlfix]

Tach!

Ich habe meine Funktion nach deinen Vorgaben angepasst:

Bitte als Vorschläge, nicht als Vorgaben ansehen.

function doSomethingWithAusgabe() {

"Es gibt nur zwei schwierige Dinge beim Programmieren: Cache-Invalidation, Naming Things und Off-By-One-Fehler." - Ein Spruch, den ich hier nur zitiere.

Hier hätten wir den Vertreter Naming Things. Als ich die Funktion so benannt habe, war es nicht meine Absicht, dass du die mit diesem Namen übernehmen sollst. Deswegen stand da ja auch noch ein Kommentar dahinter. Vielmehr hätte ich es gern gesehen, wenn du dir selbst Gedanken machst, was die Funktion eigentlich macht und wie man das möglichst prägnant in Worte fassen kann, damit sich daraus ein für den Code-Leser verständlicher Name ergibt, aus dem er bereits entnehmen kann, was der Zweck dieser Funktion ist. Das ist mitunter eines der schwersten Unterfangen beim Programmieren, weswegen es ja den obigen Spruch gibt.

  var filter = localStorage.filter || 'defaultValue'; // defaultValue nach Bedarf anpassen

Auch da gibts noch Veränderungsbedarf. defaultValue ist wohl eher nicht der Wert, der von deiner Anwendung benötigt wird. Da musst du schon das nehmen, was sinnvoll ist. Der String defaultValue war nur als Beispiel gedacht, dass da eigentlich was hinkommen sollte. Das Problem hier ist, dass du den Inhalt von localStorage.filter auch dann liest, wenn noch keiner vorhanden ist (erster Besuch mit einem Browser, der noch nie auf der Seite war). Den Fall musst du berücksichtigen und entweder so wie gezeigt einen Default-Wert angeben, der in dem Fall einspringt, oder du sorgst über ein if-else-Konstrukt, dass der Filter so angewendet wird, wie es dir angemessen erscheint. (Das "muss" ist keine Forderung von mir, sondern eine Notwendigkeit, die sich ergibt, wenn du ein robustes Programm schreiben möchtest.) Welcher Wert der Default-Wert sein soll, musst du dir überlegen. Ich kann dir nicht sagen, ob ein Leerstring oder irgendwas anderes sinnvoll ist.

Aber kommen wir zur eigentlichen Frage. Ich sehe, dass du wohl noch nicht so richtig verstanden hast, wie der Ablauf am Ende vonstatten gehen soll. Macht nichts, ich formuliere das mal als vollständiges Beispiel (gekürzt auf das Wesentliche und ohne die oben genannten Punkte zu berücksichtigen).

$(document).ready(function(){
    // erstens
    function doSomethingWithAusgabe() {
        var filter = localStorage.filter || 'defaultValue'; // defaultValue nach Bedarf anpassen
	        
        $("#ausgabe div").each(function(){ ... });
    }

    // zweitens
    $("#filter").keyup(function() {
        localStorage.filter = $(this).val();
        doSomethingWithAusgabe();
    });

    // drittens
    doSomethingWithAusgabe();
});

Als erstes brauchst du die Funktion doSomethingWithAusgabe, in der das drinsteht, was zum einen einmalig zum Seitenstart zu tun ist und was bei jedem Keyup ausgeführt werden muss. Nur das kommt da rein.

Der nächste Punkt ist, dass du einen Keyup-Handler brauchst, der die Funktion nach dem Schreiben in den localStorage aufruft.

Und als Drittes soll die Funktion auch noch einmalig zum Seitenstart ausgeführt werden, um die gemerkten Werte einzutragen.

Die Kommentare (erstens, zweitens, drittens) dienen jetzt nur um die Erklärungen zuzuordnen. In deinem eigentlichen Code kannst und solltest du sie entfernen, oder durch einen sinnvollen Hinweis für den Code-Leser ersetzen.

In meiner Diskussion mit Wumpelbär geht es übrigens um den Teil "erstens". Den kannst du dort stehen lassen, wo er jetzt steht. Theoretisch kann er aber auch außerhalb von $(document).ready(function(){...} stehen, also davor oder danach, und es würde genauso funktionieren. Der Punkt ist, dass man es möglichst vermeiden sollte, Dinge im globalen Raum abzulegen. Für kleine Anwendungen spielt das keine Rolle, aber stell dir mal vor, jQuery würde all seinen Kram im globalen Raum ablegen. Du müsstest dann berücksichtigen, welche Bezeicher jQuery bereits verwendet hat, oder sie würden mit deinen in Konflikt kommen, wenn du diese Namen ebenfalls verwendest. Für kleine Anwendungen spielt es keine große Rolle, inwieweit du den globalen Namensraum mit deinen Bezeichnern belegst, solange du die Übersicht behältst. Das Problem offenbart sich meist erst bei größeren Anwendungen, wenn es sich ergibt, dass der Programmierer für zwei Dinge denselben Namen zu vergeben versucht. Deshalb versucht man, die Dinge zu ordnen und in eigenen Scopes und damit eigenen Namensräumen unterzubringen. Mitunter artet das dann auch so aus, dass man den globalen Raum meidet, als wäre es der Teufel. Aber das will ich jetzt nicht weiter ausführen, die "richtige" Ordnung im Code ist ein anderes abendfüllendes Thema.

dedlfix.