jQuery Anti-Patterns und Best Practices

Vor langer Zeit war JavaScript in einer weit entfernten Galaxie eine verhasste Sprache. In der Tat ist "gehasst" eine Untertreibung; JavaScript war eine verachtete Sprache. Die Entwickler behandelten es daher generell so, als würden sie ihre Zehen nur dann in die JavaScript-Gewässer stecken, wenn sie ein wenig Flair in ihre Anwendungen bringen wollten. Trotz der Tatsache, dass es in der JavaScript-Sprache aufgrund der weit verbreiteten Unwissenheit eine ganze Menge Gutes gibt, nahm sich nur wenige Zeit, um es richtig zu lernen. Einige von Ihnen erinnern sich vielleicht daran, dass die Standard-JavaScript-Nutzung ein erhebliches Maß an Kopieren und Einfügen erfordert.

"Machen Sie sich nicht die Mühe, zu erfahren, was der Code tut oder ob er Best Practices folgt; fügen Sie ihn einfach ein!" - Der schlechteste Rat überhaupt

Da das Aufkommen von jQuery das Interesse an der JavaScript-Sprache weckte, sind viele Informationen im Web etwas unklar.

Ironischerweise stellt sich heraus, dass vieles, was die Entwicklungsgemeinschaft hasste, sehr wenig mit der JavaScript-Sprache selbst zu tun hatte. Nein, die wirkliche Bedrohung unter der Maske war das DOM (Document Object Model), das gerade zu dieser Zeit von Browser zu Browser furchtbar inkonsistent war. "Sicher, es kann in Firefox funktionieren, aber was ist mit IE8? Okay, es kann in IE8 funktionieren, aber was ist mit IE7?" Die Liste ging unermüdlich weiter!

Glücklicherweise sah die JavaScript-Community vor etwa fünf Jahren eine unglaubliche Veränderung zum Besseren, als Bibliotheken wie jQuery der Öffentlichkeit vorgestellt wurden. Diese Bibliotheken enthielten nicht nur eine ausdrucksstarke Syntax, die Webdesigner besonders ansprach, sondern es gelang ihnen auch, das Spielgefühl zu verbessern, indem die Problemumgehungen für die verschiedenen Browser-Eigenarten in die API integriert wurden. Auslösen $ .ajax und lassen Sie jQuery den harten Teil erledigen. Schneller Vorlauf bis heute, und die JavaScript-Community ist lebendiger als je zuvor - hauptsächlich aufgrund der Revolution von jQuery.

Da das Aufkommen von jQuery das Interesse an der JavaScript-Sprache weckte, sind viele Informationen im Web etwas unklar. Dies liegt weniger an der Ignoranz der Autoren, als vielmehr an der Tatsache, dass wir alle gelernt haben. Es braucht Zeit, bis bewährte Verfahren entstehen.

Zum Glück ist die Community seitdem enorm gewachsen. Bevor wir uns mit einigen dieser Best Practices beschäftigen, wollen wir zuerst einige schlechte Ratschläge aufzeigen, die im Internet verbreitet wurden.

Verwenden Sie nicht jQuery

Das Problem mit solchen Tipps ist, dass sie die Idee der Voroptimierung auf die Spitze treiben.

Ähnlich wie bei Ruby on Rails erfolgte die erste Einführung von JavaScript durch jQuery. Dies führte zu einem gemeinsamen Zyklus: JQuery lernen, sich verlieben, in Vanille-JavaScript eintauchen und aufsteigen.

Zwar gibt es an diesem Zyklus sicherlich nichts auszusetzen, aber er hat den Weg für unzählige Artikel geebnet, die den Benutzern empfohlen haben nicht Verwenden Sie jQuery in verschiedenen Situationen aufgrund von "Leistungsproblemen". Es wäre nicht ungewöhnlich zu lesen, dass es besser ist, Vanille zu verwenden zum Schleifen, vorbei $ .each. Oder Sie haben vielleicht zu einem bestimmten Zeitpunkt gelesen, dass sie am besten zu verwenden sind document.getElementsByClassName über die Sizzle-Engine von jQuery, weil sie schneller ist.

Das Problem bei solchen Tipps ist, dass sie die Idee der Voroptimierung auf die Spitze treiben und verschiedene Browserinkonsistenzen nicht berücksichtigen - die Dinge, die jQuery für uns behoben hat! Das Durchführen eines Tests und das Erzielen von Einsparungen von wenigen Millisekunden bei Tausenden von Wiederholungen ist kein Grund, jQuery und seine elegante Syntax aufzugeben. Ihre Zeit ist viel besser investiert, um Teile Ihrer Anwendung zu optimieren, die tatsächlich einen Unterschied machen, wie zum Beispiel die Größe Ihrer Bilder.

Mehrere jQuery-Objekte

Dieses zweite Anti-Pattern war wiederum das Ergebnis, dass die Community (einschließlich Ihrer eigenen wirklich an einem bestimmten Punkt) nicht vollständig wusste, was unter der jQuery-Szene vor sich ging. Wahrscheinlich sind Sie auf Code gestoßen (oder haben sich selbst geschrieben), der ein Element im jQuery-Objekt unzählige Male in eine Funktion einwickelte.

$ ('button.confirm'). on ('click', function () // Tun Sie es einmal $ ('. modal'). modal (); // Und noch einmal $ ('. modal'). addClass ('active'); // Und wieder für ein gutes Maß $ ('modal'). css (…););

Obwohl dieser Code auf den ersten Blick harmlos erscheint (und im Großen und Ganzen wahrheitsgemäß), befolgen wir die schlechte Praxis, mehrere Instanzen des jQuery-Objekts zu erstellen. Jedes Mal, auf das wir uns beziehen $ ('. modal'), Ein neues jQuery-Objekt wird generiert. Ist das klug??

Stellen Sie sich das DOM als einen Pool vor: jedes Mal, wenn Sie anrufen $ ('. modal'), jQuery taucht in den Pool ein und jagt die zugehörigen Münzen (oder Elemente). Wenn Sie das DOM wiederholt nach demselben Selektor abfragen, werfen Sie diese Münzen im Wesentlichen zurück ins Wasser, nur um hineinzuspringen und sie wieder zu finden!

Verketten Sie Selektoren immer dann, wenn Sie sie mehr als einmal verwenden möchten. Das vorherige Code-Snippet kann wie folgt umgestaltet werden:

$ ('button.confirm'). on ('click', function () $ ('. modal') .modal () .addClass ('active') .css (…););

Alternativ können Sie "Caching" verwenden.

$ ('button.confirm'). on ('click', function () // Tun Sie das NUR einmal var modal = $ ('. modal'); modal.modal (); modal.addClass ('active') ; modal.css (…););

Mit dieser Technik springt jQuery insgesamt drei Mal in den DOM-Pool.

Auswahlleistung

Der Auswahlleistung wird zu viel Aufmerksamkeit gewidmet.

Heutzutage noch nicht allgegenwärtig, vor nicht allzu langer Zeit, wurde das Internet von unzähligen Artikeln zur Optimierung der Leistung von Selektoren in jQuery bombardiert. Zum Beispiel ist es besser zu verwenden $ ('div p') oder $ ('div'). find ('p')?

Bereit für die Wahrheit? Es ist nicht wirklich wichtig. Es ist sicherlich eine gute Idee, ein grundlegendes Verständnis dafür zu haben, wie die Sizzle-Engine von jQuery Ihre Selector-Abfragen von rechts nach links analysiert (was bedeutet, dass es besser ist, am Ende des Selektors genauer zu sein als am Anfang). Und je spezifischer Sie sein können, desto besser. Deutlich, $ ('a.button') ist besser für die Leistung als $ ('. button'), Aufgrund der Tatsache, dass jQuery in der Lage ist, die Suche auf die Ankerelemente auf der Seite und nicht auf alle Elemente zu beschränken.

Darüber hinaus wird der Auswahlleistung jedoch zu viel Aufmerksamkeit gewidmet. Vertrauen Sie im Zweifel darauf, dass das jQuery-Team aus den besten JavaScript-Entwicklern der Branche besteht. Wenn in der Bibliothek ein Leistungsschub erzielt werden soll, haben sie ihn entdeckt. Wenn nicht, wird eines der Community-Mitglieder eine Pull-Anfrage einreichen.

Beachten Sie in diesem Zusammenhang Ihre Selektoren, aber beschäftigen Sie sich nicht zu sehr mit den Auswirkungen auf die Leistung, es sei denn, Sie können verbalisieren, warum dies notwendig ist.

Rückruf Hölle

jQuery hat zu einer weit verbreiteten Verwendung von Rückruffunktionen geführt, die sicherlich einen guten Komfort bieten können. Anstatt eine Funktion zu deklarieren, verwenden Sie einfach eine Rückruffunktion. Zum Beispiel:

$ ('a.external'). on ('click', function () // Diese Callback-Funktion wird ausgelöst, // wenn auf .external geklickt wird);

Sie haben sicherlich eine Menge Code geschrieben, der so aussieht. Ich weiß ich habe! Bei sparsamer Verwendung dienen anonyme Rückruffunktionen als hilfreiche Vorteile. Die Reibung tritt auf der ganzen Linie ein, wenn wir eintreten ... Callback-Hölle (Auslöser Donnerkeil)!

Callback Hölle ist, wenn Ihr Code sich mehrmals einrückt, wenn Sie Callback-Funktionen verschachteln.

Betrachten Sie den folgenden recht allgemeinen Code unten:

$ ('a.data'). on ('click', function () var anker = $ (this); $ (this) .fadeOut (400, function () $ .ajax (// ... success: function (data) anchor.fadeIn (400, function () // Sie haben gerade den Rückruf eingegeben);;);;

Als Faustregel gilt: Je mehr Code eingerückt ist, desto wahrscheinlicher ist ein Codegeruch. Oder, besser noch, fragen Sie sich, sieht mein Code aus wie die Mighty Ducks Flying V?

Wenn Sie Code wie diesen umgestalten, müssen Sie sich fragen: "Wie kann das getestet werden?" In diesem scheinbar einfachen Code-Code ist ein Ereignis-Listener an eine Verknüpfung gebunden, das Element wird ausgeblendet, ein AJAX-Aufruf wird ausgeführt. Bei Erfolg wird das Element wieder eingeblendet, vermutlich werden die resultierenden Daten irgendwo angehängt. Das ist sicher viel zu testen!

Wäre es nicht besser, diesen Code in überschaubarere und überprüfbare Teile aufzuteilen? Bestimmt. Obwohl Folgendes weiter optimiert werden kann, könnte ein erster Schritt zur Verbesserung dieses Codes sein:

var updatePage = function (el, data) // abgerufene Daten an DOM anhängen; var fetch = Funktion (ajaxOptions) ajaxOptions = ajaxOptions || // url:… // dataType:… success: updatePage; return $ .ajax (ajaxOptions); ; $ ('a.data'). on ('click', function () $ (this) .fadeOut (400, fetch););

Besser noch, wenn Sie verschiedene Aktionen auslösen möchten, enthalten Sie die relevanten Methoden in einem Objekt.

Überlegen Sie, wie jeder Arbeiter in einem Fast-Food-Restaurant wie McDonalds für eine Aufgabe verantwortlich ist. Joe macht die Pommes, Karen registriert Kunden und Mike Burger. Wenn alle drei Mitarbeiter alles tun, führt dies zu einer Vielzahl von Wartbarkeitsproblemen. Wenn Änderungen umgesetzt werden müssen, müssen wir uns mit jeder Person treffen, um sie zu besprechen. Wenn wir zum Beispiel Joe ausschließlich auf die Pommes konzentrieren, sollten wir die Anweisungen für die Zubereitung der Pommes anpassen, müssen wir nur mit Joe und keinem anderen sprechen. Sie sollten einen ähnlichen Ansatz für Ihren Code verwenden. Jede Funktion ist für eine Aufgabe verantwortlich.

Im obigen Code steht der holen Die Funktion löst lediglich einen AJAX-Aufruf an die angegebene URL aus. Das updatePage Die Funktion akzeptiert einige Daten und hängt sie an das DOM an. Wenn wir nun eine dieser Funktionen testen möchten, um sicherzustellen, dass sie wie erwartet funktioniert, beispielsweise die updatePage Methode können wir das Datenobjekt verspotten und an die Funktion senden. Einfach!

Das Rad neu erfinden

Es ist wichtig zu wissen, dass das jQuery-Ökosystem in den letzten Jahren stark gereift ist. Wenn Sie eine bestimmte Komponente benötigen, besteht die Chance, dass sie bereits von einer anderen Person gebaut wird. Stellen Sie sicher, dass Sie weiterhin Plugins erstellen, um Ihr Verständnis der jQuery-Bibliothek zu verbessern (in diesem Artikel werden wir eines schreiben). Beziehen Sie sich für die Verwendung in der Praxis jedoch auf eventuell vorhandene Plugins, bevor Sie das Rad neu erfinden.

Brauchen Sie zum Beispiel einen Datumsauswahl für ein Formular? Sparen Sie sich die Beinarbeit, und nutzen Sie stattdessen die Community-basierte und bewährte jQuery UI-Bibliothek.

Wenn Sie die erforderliche jQuery-UI-Bibliothek und das zugehörige Stylesheet referenziert haben, ist das Hinzufügen einer Datumsauswahl zu einer Eingabe so einfach wie folgt:

Oder was ist mit einem Akkordeon? Sicher, Sie können diese Funktionalität selbst schreiben oder stattdessen erneut die jQuery-Benutzeroberfläche nutzen.

Erstellen Sie einfach die für Ihr Projekt erforderliche Markierung.

 
Kapitel 1
 
Etwas Text.
 
Kapitel 2
 
Etwas Text.
 
Kapitel 3
 
Etwas Text.
 
Sektion 4
 
Etwas Text.
 

Dann, automagisch verwandle es in ein Akkordeon.

$ (function () $ ("# Akkordeon"). Akkordeon (););

Was wäre, wenn Sie in dreißig Sekunden Registerkarten erstellen könnten?

Erstellen Sie das Markup:

 
 
Über uns
 
Unsere Aufgabe
 
In Kontakt kommen
 
 
 
Über uns Text.
 
 
 
Unser Missionstext.
 
 
 
Holen Sie sich in Kontakt Text.
 
 

Und aktiviere das Plugin.

$ (function () $ ("# tabs"). tabs (););

Erledigt! Es erfordert nicht einmal ein nennenswertes Verständnis von JavaScript.

Plugin-Entwicklung

Lassen Sie uns nun einige Best Practices für das Erstellen von jQuery-Plugins kennenlernen, die Sie zu einem bestimmten Zeitpunkt in Ihrer Entwicklungskarriere tun werden.

Wir werden ein relativ einfaches verwenden Nachrichtenbox Plugin als Demo für unser Lernen. Fühlen Sie sich frei, mitzuarbeiten; Tatsächlich bitte!

Die Zuordnung: Implementieren Sie die erforderliche Funktionalität zum Anzeigen von Dialogfeldern mithilfe der Syntax, $ .message ('SAY TO US USER'). Auf diese Weise können wir beispielsweise vor dem endgültigen Löschen eines Datensatzes den Benutzer bitten, die Aktion zu bestätigen, anstatt auf unflexibel und hässlich zurückzugreifen warnen Boxen.

Schritt 1

Der erste Schritt ist herauszufinden, wie man "aktiviert" $ .message. Anstatt den Prototyp von jQuery zu erweitern, müssen Sie für die Anforderungen dieses Plugins nur eine Methode an den jQuery-Namespace anhängen.

(Funktion ($) $ .message = Funktion (Text) Konsole.log (Text);;) (jQuery);

So einfach ist das; Probieren Sie es aus! Wenn du anrufst $ .message ('Hier ist meine Nachricht'), Diese Zeichenfolge sollte in der Browserkonsole protokolliert werden (Umschalt + Befehlstaste + i in Google Chrome)..

Schritt 2

Es gibt zwar nicht genügend Platz, um den Testprozess des Plugins abzudecken, dies ist jedoch ein wichtiger Schritt, den Sie erforschen sollten. Es gibt ein erstaunliches Gefühl der Sicherheit, das beim Refactoring von getestetem Code auftritt.

Wenn Sie beispielsweise die Testsuite QUnit von jQuery verwenden, können Sie den Code aus Schritt 1 testen, indem Sie Folgendes schreiben:

 module ('jQuery.message', test ('ist im jQuery-Namespace verfügbar'), 1, function () ok ($. message, 'message method soll existieren');););

Das OK Funktion, die über QUnit verfügbar ist, behauptet lediglich, dass das erste Argument ein wahrer Wert ist. Wenn die Botschaft Die Methode existiert dann nicht im jQuery-Namespace falsch wird zurückgegeben. In diesem Fall schlägt der Test fehl.

Nach dem testgetriebenen Entwicklungsmuster wäre dieser Code der erste Schritt. Sobald Sie festgestellt haben, dass der Test fehlgeschlagen ist, müssen Sie als Nächstes den Test hinzufügen Botschaft Methode entsprechend.

Dieser Artikel wird der Kürze halber nicht näher auf den Prozess der testgetriebenen Entwicklung in JavaScript eingehen. Es wird jedoch empfohlen, das GitHub-Repo für dieses Projekt zu lesen, um alle Tests für das Plugin zu überprüfen: https: // github .com / JeffreyWay / MessageBox / blob / master / test / MessageBox_test.js

Schritt 3

EIN Botschaft Methode, die nichts tut, hilft niemandem! Nehmen wir die bereitgestellte Nachricht und zeigen sie dem Benutzer an. Anstatt jedoch einen riesigen Code-Globus in die $ .message Methode verwenden wir stattdessen einfach die Funktion, um ein zu instanziieren und zu initialisieren Botschaft Objekt.

(Funktion ($) "use strict"; var Nachricht = initialize: Funktion (Text) this.text = Text; dies zurückgeben;; $ .message = Funktion (Text) // benötigt Polyfill für IE8 - return Object.create (Message) .initialize (text);;) (jQuery);

Dieser Ansatz macht nicht nur wieder das Botschaft Objekt mehr überprüfbar, aber es ist auch eine sauberere Technik, die unter anderem wieder Callback Hölle schützt. Denke darüber nach Botschaft Objekt als Darstellung eines einzelnen Meldungsfelds.

Schritt 4

Ob Botschaft stellt ein einzelnes Meldungsfeld dar. Wie lautet der HTML-Code für eine Nachricht? Lass uns einen erstellen div mit einer Klasse von Nachrichtenbox, und machen es zur Verfügung Botschaft B. über eine el Eigentum.

var Message = initialize: Funktion (Text) this.el = $ ('
', ' class ':' message-box ',' style ':' display: none '); this.text = Text; kehre das zurück; ;

Jetzt hat das Objekt einen direkten Bezug zur Umhüllung div für das Meldungsfeld. Um Zugriff darauf zu erhalten, könnten wir Folgendes tun:

var msg = Object.create (Message) .initialize (); // [
â € ‹
â € ‹] console.log (msg.el);

Denken Sie daran, wir haben jetzt ein HTML-Fragment, das jedoch noch nicht in das DOM eingefügt wurde. Dies bedeutet, dass wir uns keine Sorgen um unnötige Rückflüsse machen müssen, wenn Sie Inhalte an den Server anhängen div.

Schritt 5

Der nächste Schritt besteht darin, die bereitgestellte Nachrichtenzeichenfolge zu übernehmen und in die Zeichenfolge einzufügen div. Das ist einfach!

initialize: function (text) //… this.el.html (this.text);  // [
Hier ist eine wichtige Botschaft
[]]

Es ist jedoch unwahrscheinlich, dass wir den Text direkt in die einfügen möchten div. Realistischer wird das Meldungsfeld eine Vorlage haben. Während wir dem Benutzer des Plugins erlauben konnten, eine Vorlage zu erstellen und darauf zu verweisen, lasst uns die Dinge einfach halten und die Vorlage auf die Botschaft Objekt.

 var Message = template: Funktion (Text, Schaltflächen) return ['
'+ text +'
','
', Tasten, '
' ].Beitreten("); //… ;

In Situationen, in denen Sie keine andere Wahl haben, als HTML in Ihr JavaScript zu schachteln, werden die HTML-Fragmente häufig als Elemente in einem Array gespeichert und dann zu einem HTML-String zusammengefügt.

In diesem obigen Ausschnitt wird der Text der Nachricht jetzt in einen Absatz mit der Klasse. Eingefügt Message-Box-Text. Wir haben auch einen Platz für die Schaltflächen festgelegt, den wir in Kürze implementieren werden.

Jetzt die initialisieren Methode kann aktualisiert werden zu:

initialize: function (text) //… this.el.html (this.template (Text, Schaltflächen)); 

Beim Auslösen bauen wir die Struktur für das Meldungsfeld auf:

 
Hier ist eine wichtige Nachricht.
    
 
Schritt 6
 
Damit das Meldungsfeld so flexibel wie möglich ist, muss der Benutzer des Plugins die Möglichkeit haben, unter anderem optional anzugeben, welche Schaltflächen dem Benutzer angezeigt werden sollen, z. B. "Okay", "Abbrechen", "Ja" usw. "Wir sollten in der Lage sein, den folgenden Code hinzuzufügen:
 
$ .message ('Sind Sie sicher?', Schaltflächen: ['Ja', 'Abbrechen']);
 
… Und ein Meldungsfeld mit zwei Tasten erzeugen.
 
Aktualisieren Sie zunächst die $ .message Definition.
 
$ .message = Funktion (Text, Einstellungen) var msg = Object.create (Message); msg.initialize (Text, Einstellungen); Rückkehr msg; ;
 
Jetzt die die Einstellungen Objekt wird an die weitergegeben initialisieren Methode. Lass es uns aktualisieren.
 
initialize: Funktion (Text, Einstellungen) this.el = $ ('
', ' class ':' message-box ',' style ':' display: none '); this.text = Text; this.settings = Einstellungen this.el.html (this.template (Text, Schaltflächen)); 
 
Nicht schlecht, aber was ist, wenn der Plugin-Benutzer keine Einstellungen angibt? Berücksichtigen Sie immer die verschiedenen Möglichkeiten, mit denen Ihr Plugin verwendet werden kann.
 
 
Schritt 7
 
Wir gehen davon aus, dass der Benutzer des Plugins beschreibt, welche Schaltflächen angezeigt werden sollen. Um sicherzugehen, ist es jedoch wichtig, eine Reihe von Standardwerten anzugeben. Dies ist eine bewährte Vorgehensweise beim Erstellen von Plugins.
 
$ .message = Funktion (Text, Einstellungen) var msg = Object.create (Message); msg.initialize (Text, Einstellungen); Rückkehr msg; ; $ .message.defaults = icon: 'info', Schaltflächen: ['Okay'], Rückruf: null;
 
Wenn der Plugin-Benutzer die Standardeinstellungen ändern muss, muss er nur aktualisieren $ .message.defaults, wie benötigt. Denken Sie daran: Verbergen Sie niemals die Standardeinstellungen vor dem Benutzer. Stellen Sie sie "nach außen" zur Verfügung.
 
Hier haben wir einige Standardeinstellungen festgelegt: das Symbol, die Schaltflächen und eine Rückruffunktion, die ausgelöst werden soll, sobald der Benutzer eine der Schaltflächen im Meldungsfeld angeklickt hat.
 
jQuery bietet eine hilfreiche Methode zum Überschreiben der Standardoptionen für ein Plugin (oder ein beliebiges Objekt) über dessen erweitern Methode. 
 
initialize: function (Text, Schaltflächen) //… this.settings = $ .extend (, $ .message.defaults, Einstellungen); 
 
Mit dieser Modifikation, diese Einstellungen ist jetzt gleich einem neuen Objekt. Wenn der Plugin-Benutzer Einstellungen festlegt, überschreibt er das Plugin Standardeinstellungen Objekt.
 
 
Schritt 8
 
Wenn Sie dem Meldungsfeld je nach Aktion ein benutzerdefiniertes Symbol hinzufügen möchten, müssen Sie dem Element eine CSS-Klasse hinzufügen und dem Benutzer die Möglichkeit geben, entsprechend ein Hintergrundbild anzuwenden.
 
Innerhalb des initialisieren Methode hinzufügen:
 
this.el.addClass ('message-box-' + this.settings.icon);
 
Wenn im Symbol kein Symbol angegeben ist die Einstellungen Objekt, der Standard, Info, wird eingesetzt: .Message-Box-Info. Jetzt können wir (über den Umfang dieses Tutorials hinaus) eine Vielzahl von CSS-Klassen anbieten, die verschiedene Symbole für das Meldungsfeld enthalten. Hier sind ein paar Beispiele, um den Einstieg zu erleichtern.
 
.message-box-info Hintergrund: URL (Pfad / zu / info / icon.png) no-repeat;  .message-box-warning Hintergrund: URL (Pfad / zu / warning / icon.png) no-repeat; 
 
 
Im Idealfall möchten Sie als Teil Ihres MessageBox-Plugins ein externes Stylesheet einschließen, das die grundlegende Gestaltung für das Meldungsfeld, diese Klassen und eine Handvoll Symbole enthält.
 
 
 
Schritt 9
 
Das Plugin akzeptiert jetzt eine Reihe von Schaltflächen, die auf die Vorlage angewendet werden können. Wir haben jedoch noch nicht die Funktionalität geschrieben, um diese Informationen nutzbar zu machen. Der erste Schritt besteht darin, ein Array von Schaltflächenwerten zu verwenden und dies in die erforderlichen HTML-Eingaben zu übersetzen. Erstellen Sie eine neue Methode im Botschaft Objekt, um diese Aufgabe zu erledigen.
 
createButtons: Funktion (Schaltflächen) 
 
jQuery.map ist eine hilfreiche Methode, die auf jedes Element innerhalb eines Arrays eine Funktion anwendet und ein neues Array mit den vorgenommenen Änderungen zurückgibt. Das ist perfekt für unsere Bedürfnisse. Für jedes Element in der Tastengruppe, z. B. ['Ja Nein'], Wir möchten den Text durch eine HTML-Eingabe ersetzen und den Wert entsprechend festlegen.
 
createButtons: Funktion (Schaltflächen) return $ .map (Schaltflächen, Funktion (Schaltfläche) Return ''; ).Beitreten("); 
 
Als nächstes aktualisieren Sie die initialisieren Methode, um diese neue Methode aufzurufen.
 
initialize: Funktion (Text, Einstellungen) this.el = $ ('
', ' class ':' message-box ',' style ':' display: none '); this.text = Text; this.settings = $ .extend (, $ .message.defaults, Einstellungen); var buttons = this.createButtons (this.settings.buttons); this.el.html (this.template (Text, Schaltflächen)); kehre das zurück; 
 
 
Schritt 10
 
Was nützt eine Schaltfläche, wenn nichts passiert, wenn der Benutzer darauf klickt? Ein guter Ort, um alle Ereignis-Listener für eine Ansicht zu speichern, liegt in einem besonderen Bereich Veranstaltungen Methode für das zugeordnete Objekt wie folgt:
 
initialize: function () //… this.el.html (this.template (Text, Schaltflächen)); this.events (); , Ereignisse: function () var self = this; this.el.find ('input'). on ('click', function () self.close (); if (typeof self.settings.callback === 'function') self.settings.callback.call (self, $ (this) .val ());); 
 
Dieser Code ist etwas komplexer, da der Benutzer des Plugins die Möglichkeit haben muss, seine eigene Rückruffunktion auszulösen, wenn eine Schaltfläche in das Meldungsfeld geklickt wird. Der Code bestimmt einfach, ob a Ruf zurück Funktion wurde registriert, löst sie aus und sendet den Wert der ausgewählten Schaltfläche durch. Stellen Sie sich vor, ein Meldungsfeld enthält zwei Schaltflächen: "Annehmen" und "Abbrechen". Der Benutzer des Plugins muss eine Möglichkeit haben, den Wert der angeklickten Schaltfläche zu erfassen und entsprechend zu reagieren.
 
Beachten Sie, wo wir anrufen self.close ()? Diese Methode, die noch erstellt werden muss, ist für eine Sache verantwortlich: Schließen und Entfernen des Meldungsfelds aus dem DOM.
 
close: function () this.el.animate (top: 0, Deckkraft: 'hide'), 150, function () $ (this) .remove ();); 
 
Um ein wenig Flair hinzuzufügen, blenden wir beim Ausblenden des Meldungsfelds im Verlauf von 150 Millisekunden das Feld aus und wechseln es nach oben.
 
 
Schritt 11
 
Die Funktionalität wurde implementiert! Der letzte Schritt besteht darin, dem Benutzer das Meldungsfeld anzuzeigen. Wir werden noch einen hinzufügen Show Methode auf der Botschaft Objekt, das das Meldungsfeld in das DOM einfügt und es positioniert.
 
show: function () this.el.appendTo ('body'). animieren (top: $ (window) .height () / 2 - this.el.outerHeight () / 2, Deckkraft: 'show', 300); 
 
Es ist nur eine einfache Berechnung erforderlich, um die Box vertikal in der Mitte des Browserfensters zu positionieren. Damit ist das Plugin fertig!
 
$ .message = Funktion (Text, Einstellungen) var msg = Object.create (Message) .initialize (Text, Einstellungen); msg.show (); Rückkehr msg; ;
 
 
Schritt 12
 
Um Ihr neues Plugin zu verwenden, rufen Sie einfach an $ .message (), und durch eine Nachricht und alle zutreffenden Einstellungen wie folgt weiterleiten:
 
$ .message ('Die Zeile wurde aktualisiert.');
     
Oder um eine Bestätigung für eine zerstörerische Aktion anzufordern:
 
$ .message ('Möchten Sie diesen Datensatz wirklich löschen?', Schaltflächen: ['Ja', 'Abbrechen'], Symbol: 'Alarm', Callback: Funktion (buttonText) if (buttonText === 'Ja ') // fortfahren und Datensatz löschen);
     
 
Schlussgedanken
 
 
Um mehr über die Entwicklung von jQuery zu erfahren, empfehlen wir Ihnen, auf meiner Website "30 Tage zum Lernen von jQuery" Bezug zu nehmen.
 
 
Im Laufe des Baus dieser Probe Nachrichtenbox Plug-In hat sich eine Vielzahl von Best Practices herausgebildet, z. B. Vermeiden von Callback-Höllen, Schreiben von testfähigem Code, Bereitstellen der Standardoptionen für den Plug-In-Benutzer und Sicherstellen, dass jede Methode für genau eine Aufgabe verantwortlich ist.
 
Zwar könnte man sicherlich den gleichen Effekt erzielen, indem unzählige Callback-Funktionen in eingebettet werden $ .message, Dies ist selten eine gute Idee und wird sogar als Anti-Muster betrachtet. 
 
Denken Sie an die drei Schlüssel für wartbaren Code und flexible jQuery-Plugins und -Skripts:
 
 
Könnte ich das testen? Wenn nicht, ändern Sie den Code und teilen Sie ihn in Brocken auf.
 
Habe ich die Möglichkeit angeboten, meine Standardeinstellungen zu überschreiben??
 
Verfolge ich schlechte Praktiken oder mache ich Annahmen??
 
 
Um mehr über die Entwicklung von jQuery zu erfahren, empfehlen wir Ihnen, meinen Screencast-Kurs auf dieser Website "30 Tage zum Lernen von jQuery" zu lesen.
  



		
			
	   
	




Code