Wie kann ich wiederverwendbares Javascript schreiben?

Habe ich angefangen, zu wickeln meine Funktionen innerhalb von Objekten, z.B.:

var Search = {
  carSearch: function(color) {
  },
  peopleSearch: function(name) {
  },
  ...
}

Dies ist sehr hilfreich, mit Lesbarkeit, aber ich habe immer noch Probleme mit reusabilty. Um genauer zu sein, die Schwierigkeit liegt in zwei Bereichen:

  1. Empfangen Parameter. Viele Male habe ich eine Suchmaske mit mehreren Eingabefeldern und einem button zum aufrufen der javascript search-Funktion. Ich muss entweder einen Haufen code in das onclick der Schaltfläche zum abrufen und dann martial die Werte aus den Eingabefeldern in die Funktion aufrufen, oder ich habe zu fest die HTML-input-Feld mit Namen/IDs, so dass ich später abrufen, Sie mit Javascript. Die Lösung habe ich sich auf für ist die übergabe der Feld-Namen/IDs in der Funktion, die er verwendet, zum abrufen der Werte aus den Eingabefeldern. Dies ist einfach, aber scheint wirklich unpassend.
  2. Zurückgeben von Werten. Die Wirkung der meisten Javascript-Aufrufe neigt dazu, in dem einige visuelle auf dem Bildschirm direkt ändern, oder als ein Ergebnis einer anderen Aktion, die in dem Aufruf. Wiederverwendbarkeit ist toast wenn ich diese Bildschirm-verändernde Wirkung, die am Ende einer Funktion. Zum Beispiel, nachdem Sie eine Suche abgeschlossen ist, brauche ich zur Anzeige der Ergebnisse auf dem Bildschirm.

Wie andere mit diesen Problemen? Putting mein denken Mütze auf, führt mich zu glauben, dass ich brauche, um eine Seite-spezifische Schicht von Javascript zwischen jedem Gebrauch in meiner Anwendung und die generischen Methoden, die ich erstellen, die verwendet werden, Anwendung-breit. Mit dem vorherigen Beispiel würde ich einen suchen-button, dessen onclick ruft eine myPageSpecificSearchFunction, in denen das such-Feld-IDs/Namen hartcodiert sind, die Streckenposten die Parameter und ruft die generische Suche-Funktion. Die generische Funktion wäre die Rückgabe von Daten/Objekten/Variablen und nicht direkt Lesen oder änderungen an die DOM. Die Seiten-spezifische such-Funktion würde dann diese Daten erhält Sie zurück und ändern den DOM angemessen.

Bin ich auf dem richtigen Weg oder gibt es eine bessere Muster zu handhaben, die Wiederverwendung von Javascript-Objekten/Methoden?

Kommentar zu dem Problem
Empfehlen, so dass dies ein community-wiki, es ist ziemlich subjektiv. Kommentarautor: T.J. Crowder

InformationsquelleAutor der Frage aw crud | 2010-04-09

  1. 21

    Grundmuster

    In Bezug auf Ihre grundlegenden Muster, kann ich schlage vor, Sie ändern Ihre Struktur zu verwenden, das Modul-Muster und benannte Funktionen:

    var Search = (function(){
    var pubs = {};

    pubs.carSearch = carSearch;
    function carSearch(color) {
    }

    pubs.peopleSearch = peopleSearch;
    function peopleSearch(name) {
    }

    return pubs;
})();

    Ja, das sieht viel komplizierter aus, aber das ist teilweise, weil es keine Helfer-Funktion beteiligt. Beachten Sie, dass nun jede Funktion hat einen Namen (Ihre bisherigen Funktionen wurden anonym; die Eigenschaften, die Sie gebunden waren, hatten Namen, aber die Funktionen nicht, die Auswirkungen in Bezug auf die Anzeige der call-stack im Debugger und so). Mit dem module pattern gibt Ihnen auch die Möglichkeit zu haben ganz private Funktionen, die nur die Funktionen in Ihrer Search Objekt zugreifen können. (Nur erklären, sondern die Funktionen innerhalb der großen anonymen Funktion und nicht fügen Sie Sie zu pubs.) Mehr über meine Beweggründe für dieses (mit vor-und Nachteile, und warum kann man nicht kombinieren, die Deklaration der Funktion und Eigenschaft-Zuordnung) hier.

    Abrufen Von Parametern

    Eins der Funktionen, die ich wirklich, wirklich wie aus Prototyp ist die Form#serialisieren - Funktion, die Spaziergänge durch die form-Elemente und baut ein schlichtes Objekt mit einer Eigenschaft für jedes Feld anhand des Feldnamens. (Prototyp die aktuelle – 1.6.1 – Implementierung hat ein Problem, wenn es nicht die Erhaltung der um der Felder, aber es ist überraschend, wie selten das ist das problem.) Es klingt wie Sie wäre gut mit so etwas aus und Sie sind nicht schwer zu bauen; dann wird Ihre business-Logik ist der Umgang mit Objekten mit Eigenschaften, die nach dem benannt, was Sie sind, die damit zusammenhängen, hat keine Erkenntnis der tatsächlichen form selbst.

    Zurückgeben von Werten /Mischen von UI und Logik

    Ich dazu neigen zu denken, der Anwendungen wie die Objekte und die verbindungen und Wechselwirkungen zwischen Ihnen. Ich Neige also dazu zu erstellen:

    • - Objekte, die die business-Modell und solche, unabhängig von der Schnittstelle (obwohl, natürlich, die Geschäftsmodell ist sicherlich teilweise getrieben von der Schnittstelle). Diese Objekte sind in einem Ort, aber sowohl client - und server-Seite (ja, ich benutze JavaScript auf server-Seite), und gestaltet mit Serialisierung (über JSON, in meinem Fall) im Auge, damit ich senden kann Ihnen hin und her leicht.
    • Ojects server-Seite, die wissen, wie Sie diese aktualisieren die zugrunde liegende Geschäft (da Neige ich dazu, an Projekten zu arbeiten und mit einem zugrunde liegenden speichern), und
    • Objekte auf client-Seite, die wissen, wie Sie diese Informationen verwenden, um das Rendern der UI.

    (Ich weiß, kaum original!) Ich versuche immer, den laden und Rendern von Objekten generisch, so dass Sie meist durch den Blick auf die öffentlichen Eigenschaften der business-Objekte (die so ziemlich alle Eigenschaften, die ich nicht verwenden Sie die Muster, wie Crockford ' s, mit denen Sie wirklich Daten ausblenden, ich finde Sie zu teuer). Pragmatismus bedeutet, manchmal laden oder Rendern von Objekten müssen nur wissen, was Sie zu tun haben, speziell, aber ich versuche, die Dinge generischen wo ich kann.

    InformationsquelleAutor der Antwort T.J. Crowder

  2. 1

    Angefangen habe ich mit dem Modul-Muster, aber dann fing an, alles in jQuery-plugins. Die plugins erlauben es passieren Seite bestimmte Optionen.

    Mit jQuery würde das auch lassen, Sie zu überdenken die Art und Weise, die Sie identifizieren Ihre Suchbegriffe ein und finden Sie Ihre Werte. Sie überlegen, das hinzufügen einer Klasse zu jedem Eingang, und verwenden Sie diese Klasse, um zu vermeiden, speziell die Benennung jeden Eingang.

    InformationsquelleAutor der Antwort Mark

  3. 1

    Javascript lächerlich ist flexibel, was bedeutet, dass Ihre Konstruktion ist besonders wichtig, da Sie Dinge machen können, die in viele verschiedene Möglichkeiten. Dies ist, was wahrscheinlich macht Javascript fühlen sich weniger wie die Kreditvergabe selbst zu re-usability.

    Gibt es ein paar verschiedene Notationen für die Erklärung Ihrer Objekte (Funktionen/Klassen), und dann die Verwendung von Namensräumen. Es ist wichtig zu verstehen, diese Unterschiede. Wie bereits in einem Kommentar hier 'Verwendung von Namensräumen ist ein Kinderspiel" - und ist ein guter Ort, um zu starten.

    Ich wäre nicht in der Lage zu gehen, weit genug, in dieser Antwort, und wäre nur die Umschreibung, so dass ich empfehlen den Kauf dieser Bücher:

    Pro JavaScript Design Patterns

    Pro Javascript techniques

    InformationsquelleAutor der Antwort Lewis

Schreibe einen Kommentar