Yahoo! User Interface Blog (YUIBlog)

In der YUI 3 Gallery: Caridy Patiño Mayea die Event-Binder Modul bietet Unterstützung für frühes Ereignis Binding und Ereignis-gesteuerte Laden von Modulen

Dieser Artikel stellt meine Event-Binder-Modul , die vor kurzem in der YUI 3 Gallery veröffentlicht.

YUI 3 wird immer eine gute Traktion in der Entwickler-Community, mit deutlichen Annahme der neusten Version 3.1.1 und eine riesige Infusion von neuen, innovativen Projekten in der YUI 3 Gallery . Viele Entwickler werden immer ihre Köpfe rund um die On-Demand-Charakter der YUI 3 und Ausgangspunkt zu nutzen, diese Fähigkeiten in ihren Entwürfen. Dieser Ansatz hat große Vorteile, es kann aber auch einige Herausforderungen mit sich bringen.

Eine dieser Herausforderungen ist die Benutzer-Interaktionen früh fangen. Selbst als die Browser startet die Seite dargestellt wird, möchten wir dem Anwender in der Lage, starten die Interaktion mit Seitenelemente. In vielen Fällen könnte diese Interaktionen geschehen, bevor die JavaScript-Initialisierung (einschließlich der Anbringung von Ereignis-Listener) abgeschlossen hat.

In vielen Fällen können Sie Ihren Initialisierungscode, indem Sie nur Ihre Event-Listener und dann die Zugabe, die Logik für das Laden der Stücke, die Sie brauchen für jede Interaktion mit dem Benutzer zu optimieren. Vor kurzem sprach Ingenieure bei Facebook zu einem ähnlichen Ansatz, um den Ladevorgang zu verbessern - siehe auch das Interview von Rey Bango am JSConf. Hier ist ein Beispiel dafür, wie diese Technik könnte in YUI 3 zu arbeiten:

  <Script src = "http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js &
 
	 3.1.1/build/oop/oop-min.js & 3.1.1/build/event-custom/event-custom-base-min.js &
	 3.1.1/build/event/event-base-min.js & 3.1.1/build/dom/dom-base-min.js &
	 3.1.1/build/dom/selector-native-min.js & 3.1.1/build/dom/selector-css2-min.js &
	 3.1.1/build/node/node-base-min.js "> </ script>
 
 YUI (). Verwenden ("Event-base ', function (y) {
     / / Warten, bis der Anwender konzentriert sich auf ein input-Element zum Laden Vermögenswerte starten
     Y.on ("click", function (e) {
 
       Y.use ('anim', 'io', function () {
           / / Laden einer Remote-Inhalte und zeigt es mit einer Animation hier
       });
 
       e.halt (); / / stoppen die Ausbreitung
     }, "# Demo");
 }); 

Dies bringt eine gewisse Komplexität in Ihrem Code, weil Zuhörer nicht nur mit der Interaktion des Benutzers, sondern auch mit einer gewissen Belastung Logik beschäftigen. Ein weiterer Nachteil dieses Ansatzes ist, dass Sie immer noch etwas JavaScript-Code am Anfang (in diesem Fall YUI Samen, die Event-Dienstprogramm, und einige Abhängigkeiten) zu laden, um wenigstens den Hörer und das Laden Logik definieren, um frühzeitig Maßnahmen zu fangen. Also, laßt uns überlegen, diese als zwei separate Use-Cases:

• Capturing frühen Benutzerinteraktionen
• Erleichterung der On-Demand-Natur einiger Benutzer-Interaktionen

Um diesen Anforderungen gerecht Ich habe ein neues Modul erstellt für YUI 3 . Mein Schwerpunkt war es, eine Komponente, die ohne Auswirkungen auf Ihre Anwendungslogik Werke zu schaffen. Dieses neue Modul wird als " Galerie-event-Bindemittel "und ist jetzt durch den YUI Loader zur Verfügung.

Capturing frühen Benutzerinteraktionen

Das Hauptziel dieser Funktion ist zu gewährleisten, dass Benutzer-Interaktionen Warteschlangen sind bis Ereignis-Listener initialisiert werden.

Lassen Sie uns sehen, eine Veranstaltung Bindemittel Beispiel :

 YUI ({/ / Letzte Galerie dieses Moduls Galerie Car: "Galerie-2010.06.07-17-52 '}) Verwendung (' Galerie-event-Bindemittel ',' Ereignis ', function (Y) {Y.on (. 'click', function (e) {/ / mach deine Sachen hier e.halt (); / / stoppt die Ausbreitung Ereignis, wenn Sie wollen ...}, '# demo'); / / Flush frühen Benutzerinteraktionen Y.EventBinder . Flush ("Klick");}); 

In diesem Beispiel YUI Loader wird versuchen, die Last gallery-event-binder und event -Module on-Demand, und sobald sie sind beide bereit zusammen mit ihren Abhängigkeiten, wird der Code innerhalb der Callback-Funktion (drittes Argument) ausgeführt werden. Während der Ausführung wird ein Listener für ein Element mit eingestellt id=demo . Der Trick hier ist, dass, sobald Y.EventBinder.flush('click') aufgerufen wird, wird das System spülen einige der Ereignisse, die passiert Klick, bevor diese Initialisierung Code wird sie ausgeführt haben könnte.

Die Konfiguration

Diese Technik erfordert einige zusätzliche Konfiguration, insbesondere die Definition der YUI_config als globale Variable, um die Ausführung YUI zu zwicken. Mach dir keine Sorgen, es ist sehr einfach. Mal sehen, ein Beispiel im Detail:

 
 YUI_config = {
     / / Standard-Konfiguration YUI_config
     kombinieren: true,
     Filter: "min",
 
     / / Event-Bindemittel-Konfiguration beginnt hier
     eventbinder: {
         / / Event-Handler zu speichern Ereignisse, die Sie zurückgesandt wird.
         FN: function (e) {
             var Bindemittel = YUI_config.eventbinder,
                 filter = / YUI3-event-Binder /,
                 Container = (e.target | | e.srcElement),
                 info = {
                     Ziel: Behälter,
                     Typ: e.type
                 };
 
             / / Aussehen für ein Element mit der Klasse YUI3-event-Bindemittel
             while (Container &&! filter.test (container.className)) {
                 Container = container.parentNode;
             }
 
             if (Container) {
                 (Binder.q = binder.q | | []) drücken (info).;
 
                 / / Verhindern, dass der Standard-Browser Aktion für diese Veranstaltung
                 wenn (e.preventDefault) {
                     e.preventDefault ();
                 }
                 return (e.returnValue = false);
             }
         },
         / / Schnittstelle für bestimmte Ereignisse zu hören
         listenFor: function (type) {
             var d = document;
             / / Bevor die Bibliothek geladen wird, müssen wir uns mit Widersprüchen umzugehen Browser
             wenn (d.addEventListener) {
                 d.addEventListener (Typ, this.fn, false);
             } Else {
                 d.attachEvent ('on' + Art, this.fn);
             }
 
             return this;
         }
     }
 };
 / / Fügen Sie Ereignisse an den Monitoring-Prozess
 YUI_config.eventbinder.listenFor ("Klick");

Dieser Code sollte ganz am Anfang der Seite enthalten sein. Es wird nur ein paar Bissen, nachdem Sie minify diesem Configuration-Objekt. Ich empfehle, einen cacheable (extern)-Datei für die Produktion und die Aufnahme in den Head-Abschnitt in Ihre Seiten. Sie können mehr über YUI_config und die verschiedenen Konfigurationen, die Sie über dieses Objekts in der zwicken können offizielle API-Dokumentation .

Sie können diese Konfiguration zu Ihnen am besten entspricht, und definieren Sie Ereignisse, die Ihnen wichtig sind, sowie. Im obigen Beispiel haben wir "Klick" auf das Monitoring-Liste (letzte Zeile). Sie können mehrere Ereignisse auf die Überwachung Liste mit Verkettung hinzufügen:

  YUI_config.eventbinder.listenFor ("Klick") listenFor ('keyup') listenFor ('mouseover')..; 

Wie funktioniert diese Funktion?

Sobald die Konfiguration (dh YUI_config ) Logik ausgeführt wird, zusammen mit dem Aufruf an YUI_config.eventbinder.listenFor wird ein Listener für einen bestimmten Ereignistyp definiert werden. Nur Ereignisse, die sprudeln wie dem Zuhörer überwacht werden wird für das definiert werden, document -Element. Wenn eine Interaktion mit dem Benutzer auf dieser Ebene gefangen wird, wird es analysiert, speziell die Überprüfung, ob das Ziel-Element oder einer seiner Vorfahren hat classname yui3-event-binder . Wenn ja, wird das Ereignis in eine Warteschlange eingefügt werden und das Standardverhalten für dieses Ereignis verhindert werden. Diese Technik bietet eine einfache Möglichkeit, bestimmte Arten von Interaktion in bestimmten Bereichen der Seite zu überwachen.

Wenn dieser Code ausgeführt wird, Listener für Ereignisse der angegebenen Art oder Arten auf die hinzugefügt document , also, wenn diese Ereignisse auftreten und Blasen steigen (was nur überwacht Ereignisse, die Blase), wird sie gestoppt und ihre gespeicherten Informationen in einer Verarbeitungs-Warteschlange . Später, in Ihrer use() Callback, wenn Ihr die Initialisierung abgeschlossen ist, rufen Sie einfach Y.EventBinder.flush , um alle gespeicherten Click-Ereignisse der Rückbeförderung, als ob sie gerade dann-mit freundlicher Genehmigung von der Event-Modul simulieren passiert.

Erleichterung der On-Demand-Natur einiger Benutzer-Interaktionen

Das Hauptziel dieser Funktion ist es, Entwicklern helfen, Be-Logik auf Basis von Benutzer-Interaktionen zu definieren.

Hier ist ein anderes Ereignis Bindemittel Beispiel :

 
 YUI ({
   Module: {
     «My-Custom-Modul ': {
       fullpath: '. / my-custom-module.js'
     }
   }
 }). Verwenden ('Galerie-event-Bindemittel', 'Knoten', function (y) {
 
   / / Setze einen Listener für '# demo a' und setzen auf «my-Custom-Modul ' 
   / / Auf diese besondere Ereignis zu behandeln.
   Y.EventBinder.on ('click', 'mein-custom-Modul', '# demo ein');
 
   / / Setzen eines Delegaten für alle Hörer der Anker in einer Liste und verlassen  
   / / Auf 'my-custom-Modul "und" mein-another-Modul' zu handhaben diese besonderen Ereignisse
   Y.EventBinder.delegate ('click', ['mein-another-Modul'], '# mylist', 'li a');
 
 });

Hier verwenden wir Y.EventBinder.on und Y.EventBinder.delegate einige Zuhörer zu definieren. Diese beiden Methoden Wrap Y.on und Y.delegate zu Ladelogik durch eine Interaktion mit dem Benutzer zu fahren. Dies ermöglicht es uns verschieben Belastung der spezifischen Funktionalitäten auf einer Seite, bis der Benutzer versucht, eine bestimmte Funktion zu nutzen.

In diesem Fall, wenn ein Benutzer auf eines der Elemente, Klicks, laden wir eine oder mehrere benutzerdefinierte Module YUI, die alle Funktionen mit diesem speziellen Klick assoziiert zu implementieren. Sobald diese Module zur Verfügung stehen (und neue Hörer sind gesetzt), wird das Bindemittel spülen Sie das Ereignis, das auf Eis während des Ladevorgangs auf den Stand der Aktion zu erhalten war.

Diese Funktion erfordert keine anfängliche Konfiguration. Sowohl der Event-Binder-Funktionen können gleichzeitig verwendet werden, um früh-und On-Demand-Anwender-Interaktionen abdecken. In diesem Fall wird Sie die Konfiguration definieren müssen, legen Sie dann die On-Demand-Hörer, und schließlich spülen die frühen Ereignisse.

Hier ist eine End-to-End-Veranstaltung Bindemittel Beispiel :

 
 / / Konfiguration
 YUI_config = {/ * das benutzerdefinierte Ereignis-Bindemittel-Konfiguration hier * /};
 YUI_config.eventbinder.listenFor ("Klick")
 
 / / Initialisierung
 YUI ({
   Module: {
     «My-Custom-Modul ': {
       fullpath: '. / my-custom-module.js'
     }
   }
 }). Einsatz ('Galerie-event-Bindemittel', function (y) {
  
   Y.EventBinder.delegate ('click', ['my-custom-Modul'], '# doc', 'YUI3-event-Bindemittel ein.');
   Y.EventBinder.flush ("Klick");
 
 });

Eine erweiterte Konfiguration

Sie können das ändern fn -Funktion in Ihrer Konfiguration zu selektiver sein über die Ereignisse in die Warteschlange und Sie können mehr Informationen über die Ereignisse zu speichern. Darüber hinaus fügt eine yui3-waiting -Klasse an die Ziel-Klick, die wir Stil in CSS eine Beladung Spinner anzuzeigen:

 
 YUI_config = {
     / / Standard-Konfiguration YUI_config
     kombinieren: true,
     Filter: "min",
 
     / / Event-Bindemittel-Konfiguration beginnt hier
     eventbinder: {
         / / Von Optionen, die für jede Veranstaltung erhalten bleiben soll eingestellt (alle optional)
         eventProperties: [
             "CtrlKey", "altKey",
             "ShiftKey", "metaKey",
             "Keycode", "charCode",
             "ScreenX", "screenY",
             "ClientX", "clientY",
             "Taste",
             "RelatedTarget"
         ],
 
         / / Listener-Callback-Funktion
         FN: function (e) {
             var Bindemittel = YUI_config.eventbinder,
                 props = binder.eventProperties,
                 filter = / YUI3-event-Binder /,
                 target = (e.target | | e.srcElement),
                 Container = Ziel,
                 info = {
                     Ziel: Ziel,
                     Typ: e.type
                 },
                 i;
 
             wenn (target.nodeType === 3) {
                 / / Ziel um einen Textknoten handelt, so verwenden seinem übergeordneten Element
                 target = target.parentNode;
             }
 
             / / Aussehen für ein Element mit der Klasse YUI3-event-Bindemittel
             while (Container &&! filter.test (container.className)) {
                 Container = container.parentNode;
             }
 
             if (Container) {
                 target.className + = 'YUI3-warten';
 
                 / / Backup der Veranstaltung Eigenschaften, um das Ereignis später simulieren
                 for (i = props.length - 1; i> = 0; - i) {
                     info [Requisiten [i]] = E [Requisiten [i]];
                 }
 
                 (Binder.q = binder.q | | []) drücken (info).;
 
                 / / Verhindern, dass der Standard-Browser Aktion für diese Veranstaltung
                 wenn (e.preventDefault) {
                     e.preventDefault ();
                 }
                 return (e.returnValue = false);
             }
         },
 
         listenFor: function (type) {
             var d = document;
 
             wenn (d.addEventListener) {
                 d.addEventListener (Typ, this.fn, false);
             } Else {
                 d.attachEvent ('on' + Art, this.fn);
             }
 
             return this;
         }
     }
 };
 / / Fügen Sie Ereignisse an den Monitoring-Prozess
 YUI_config.eventbinder.listenFor ("Klick");

Schauen Sie sich dieses Ereignis Bindemittel Beispiel , um diese erweiterte Konfiguration in Aktion zu sehen.

Fazit:

Für Hochleistungs-Web-Anwendungen, ist es wichtig für die Seiten zu laden und wieder reagieren schnell. Um dies zu erreichen, müssen wir auf On-Demand-Loading Techniken beruhen. Wenn Sie einmal mit ihnen zu beginnen, ist es ebenso wichtig, Benutzer-Interaktionen, die vor dem entsprechenden Code für eine Aktion zur Verfügung stehen kann passieren, zu kontrollieren.

Event-Binder (Galerie-event-Binder) bietet freundliche APIs, mit beiden Use-Cases, ohne dass Sie die Logik Ihrer Anwendung ändern umzugehen. Es kann auf jeden angewendet werden YUI 3 Anwendung, ohne dabei zusätzliche Komplexität, um Ihren Code.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!