Yui 3: leichter, schneller, einfacher zu bedienen

Key Takeaways

• yui 3, eine vollständige Umschrift von Yui, zielt darauf ab, leichter, schneller und einfacher zu verwenden als sein Vorgänger Yui 2. Die Umschreibung befasst sich mit Inkonsistenzen in der internen Mechanik und der API, die als Yui 2 entstanden ist.
• Die Yui 3 -Bibliothek führt eine neue Plugin -Architektur vor, mit der Benutzer Knoten und Widgets ihre eigene Funktionalität hinzufügen können. Die Bibliothek führt auch einen neuen globalen Objektnamen, Yui, vor, der das alte Yahoo Global Objekt ersetzt. Dies ermöglicht ältere Versionen von Yui mit Yui 3.
• yui 3 verfügt über einen saubereren, prägnanteren Codierungsstil und eine neue Hierarchie von Klassen, die eine konsistente interne Mechanik und API für alle YUI -Komponenten ermöglichen. Die Bibliothek befasst sich auch mit Problemen des Ladens schwerer Teile der Bibliothek für nur ein oder zwei Funktionen, indem die Funktionalität in kleinere Submodule aufgeteilt wird.
• Die neue Version der Bibliothek führt eine neue Abstraktionsschicht für das DOM mit dem Knoten -Dienstprogramm ein, das die DOM -Interaktion vereinfacht. Yui 3 normalisiert das Ereignismanagement auch mithilfe der Idee einer Ereignisfassade, die die gesamte Browser -Normalisierung kümmert.
• yui 3 bietet eine flexiblere und effizientere Bibliothek für die Webentwicklung mit neuen Funktionen, darunter ein neues Ereignissystem, ein neues Modulsystem und ein neues Attributsystem. Es führt auch neue Dienstprogramme und Widgets wie Knoten und Nodelist für DOM -Manipulation, IO für AJAX -Anfragen und Widget zum Erstellen wiederverwendbarer UI -Komponenten ein.

Im August 2008 veröffentlichte das Yahoo User Interface -Team die erste Vorschau -Version von Yui 3, eine vollständige Umschrift von Yui von Grund auf (die erste Beta -Veröffentlichung, die nächste Woche einige Zeit erscheinen!).

Warum sollten sie eine bereits nützliche und reife Bibliothek umschreiben, könnten Sie fragen? Nun, wie yui 2 reifte, die Art und Weise, in der es gebaut wurde, entwickelte sich ebenfalls.

Infolgedessen wurden Teile von Yui, die von Anfang an vorhanden waren, in ganz unterschiedlicher Weise von Teilen codiert, die später hinzugefügt wurden. Das Ergebnis war, dass die Bibliothek Inkonsistenzen enthielt - sowohl in der internen Mechanik als auch in der API. Das Team entschied also, dass es die Bibliothek zurück zu den Grundlagen bringen und sie von Grund auf wieder aufbauen würde. Ihr Plan war es, die Erfahrungen aus den letzten drei Jahren der Arbeit an Yui anzuwenden und eine Bibliothek zu bauen, die leichter, schneller und einfacher zu bedienen war. Um die Bibliothek so flexibel wie möglich zu gestalten, führt Yui 3 eine alle neuen Plugin -Architektur vor, mit der Sie Knoten und Widgets Ihre eigene Funktionalität hinzufügen können. Wir werden ein solches Plugin etwas später sehen. Lassen Sie uns zunächst sehen, was neu in Yui 3.

ist

Auf Wiedersehen yahoo, hallo yui

Das erste Bit, das Sie bei der Betrachtung von Yui 3 -Code -Beispielen bemerken werden, ist der neue globale Objektname, den es verwendet. Das alte Yahoo Global Objekt wurde durch das neue Yui Global Object ersetzt. Es wurde aus ein paar Gründen umbenannt: Benutzerfeedback schlug vor, dass einige Unternehmen nicht mochten, den Yahoo -Namen in ihrem Code zu haben. Noch wichtiger ist jedoch, dass ältere Versionen von Yui mit Yui 3 koexistieren, weil sie einen anderen variablen Namen haben.

und das globale Objekt, das umbenannt wird, basiert auf einem grundlegend anderen Prinzip als in 2.x. Für den Anfang ist es kein statisches Objekt mehr, sondern eine Funktion, die bei der Ausführung eine Instanz von sich selbst zurückgibt. Jede Ausführung von Yui gibt nun eine in sich geschlossene Umgebung zurück, in der die Version der Bibliothek und die Version aller geladenen Komponenten ausgeführt werden können, ohne dass eine andere Instanz von YUI auf der Seite stört. Dies bedeutet auch, dass mehrere Versionen der Bibliothek auf derselben Seite koexistieren können, indem verschiedene Versionen des YUI -Objekts instanziiert werden. Das folgende Beispiel zeigt dieses Prinzip:

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

Hier wird yui () ausgeführt, was eine Instanz der Bibliothek zurückgibt, aus der die Verwendungsmethode ausgeführt wird. Es sind mindestens zwei Parameter erforderlich: die Bibliothekskomponenten, dann der Rückruf, sobald alles geladen ist. In unserem obigen Beispiel sind die ersten beiden zu verwendenden Parameter die Namen der Bibliothekskomponenten, die geladen werden sollen. Der endgültige Parameter ist unsere Rückruffunktion, die ein Objekt empfängt (im Beispiel mit y genannt) - dies ist eine Instanz der Bibliothek, die alle geladenen Komponenten enthält. Wie die Kommentare im obigen Beispiel finden Sie also die Drag & Drop -Komponente bei Y.DD und die Animationskomponente finden Sie in Y.Anim.

ein sauberer, prägnanterer Codierungsstil

Eines der Hauptprobleme, die das Team hatte, war es, eine konsistente interne Mechanik und eine konsistente API für alle YUI -Komponenten zu gewährleisten. Also hat Yui 3 jetzt eine neue Hierarchie von Klassen, die genau das zulassen. Die Attributklasse bietet beispielsweise GET & SET -Methoden, Erstkonfigurationsunterstützung und Attributänderungsereignisse an Klassen, die sie erben. Es gibt auch eine Basisklasse, die das Attribut erbt und einige objektorientierte Funktionen wie Initialisierer und Destruktor-Methoden für alle Klassen bietet, die daraus erben. Schließlich haben sie eine Widget-Klasse erstellt, die von der Basis erbt und gemeinsame Funktionen bietet, die normalerweise von Widgets verwendet werden, wie z. Es bietet auch Support für Plugin -Registrierung und Aktivierung.

Ein weiteres Problem, das Yui 3 übertrifft, ist, wenn Ihr Skript ein schweres Stück der Bibliothek für nur ein oder zwei darin enthaltene Funktionen laden muss. In Yui 2 müssten Sie beispielsweise das gesamte Verbindungsdienstprogramm (ein Gewicht von 38 KB, 12 KB, wenn Sie abgebrochen) einbeziehen, nur um einige XMLHTTPrequest -Anrufe durchzuführen. Yui 3 löst dieses Problem, indem sie die Funktionalität in kleinere Submodule aufteilt. Auf diese Weise müssen Sie nicht das gesamte Dienstprogramm herunterziehen, um XMLHTTPrequest -Anrufe zu tätigen. In Yui 3 können Sie einen XMLHTTPrequest-Anruf tätigen, indem Sie nur das IO-Base-Modul des IO-Dienstprogramms herunterziehen, wobei nur 19 KB (4 KB Minified) wiegt. Tatsächlich wiegt das gesamte IO-Dienstprogramm 29 KB (7 KB Minified) und ist viel merkenreicher als sein Vorgänger. Zum Beispiel ist es jetzt möglich, Cross-Domain- oder XdomainRequest-Anrufe mit dem IO-XDR-Submodul zu tätigen.

Auswählen und Verkettung

yui 2 stellte einen Selektormotor vor, aber es tat dies etwas spät im Leben der Bibliothek. Infolgedessen basiert die gesamte Bibliothek um Abruftechniken des alten Schulelements. Mit anderen Worten, Sie haben entweder die ID eines Elements oder das Element selbst übergeben, wenn eine Referenz benötigt wurde, und das war es auch. Mit Yui 3 wird der Selektormotor jedoch direkt in den Kern der Bibliothek gebaut. Es durchdringt jeden Teil davon, sodass Sie praktisch überall überall eine Elementreferenz benötigen können. Neben Konstruktoren umfasst auch die Einrichtung von Event -Handlern und die Arbeit mit Versorgungsunternehmen. Hier ist ein Beispiel, das das erste Element mit dem Klassenautor draggierbar macht:

var dd = new y.dd.drag ({
   Knoten: '.Author'
});

Wenn Yui 3 keinen logischen Wert zur Rückgabe hat, versucht es, die methodische Kette zu machen. Hier ist ein Beispiel dafür in Aktion:

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

Wir haben hier auf das erste Element mit dem Autor des Klassennamens verwiesen und einen Cursorstil darauf gesetzt.

Knoten und Ereignis faã§ades

yui 3 führt eine neue Abstraktionsschicht für das DOM mit dem Node -Dienstprogramm ein. Anstatt einen Verweis auf ein DOM -Element zurückzugeben, gibt Yui 3 Knoten und Nodelisten zurück, die die DOM -Interaktion stark vereinfachen. Dies liegt daran, dass Knoten alle Funktionen enthalten, die Sie benötigen, um mit ihnen zu interagieren, anstatt zu getrennten Funktionen zu gehen. Darüber hinaus kümmern sich die Methoden, die von einem Knoten ausgesetzt sind, die Browser -Normalisierung, wenn sie benötigt werden, sodass die Erfahrung der Arbeit mit ihnen so schmerzlos wie möglich ist. Folgendes müssten Sie in Yui 2 schreiben, um einem Element einen Klassennamen hinzuzufügen:

Y.get('.author').setStyle('cursor', 'move');

In Yui 3 wird dies:

YAHOO.util.Dom.addClass("navProducts", "selected");

Wenn der Knoten bereits in einer Variablen namens Navproducts in der Hand war, können Sie dies einfach tun:

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

yui 3 vereinfacht die Interaktion mit dem DOM und hat das Ereignismanagement auch mit der Idee einer Veranstaltung faã§ade normalisiert. Jeder Event -Hörer erhält eine Veranstaltung, die sich um die gesamte Browsernormalisierung kümmert. So benötigten Sie beispielsweise in Yui 2 den folgenden Code, um „Standard zu verhindern“:

Y.get('.author').setStyle('cursor', 'move');

Jetzt müssen Sie nur noch:

YAHOO.util.Dom.addClass("navProducts", "selected");

Darüber hinaus erstreckt sich dieses Verhalten auch auf rein individuelle Ereignisse, sodass selbst diese Ereignisse faken, die es ihnen ermöglichen, die Verantwortung zu verhindern und die Ausbreitung zu stoppen.

Weiter: Lassen Sie uns einige dieser neuen Methoden in die Praxis umsetzen.

zeig mir das Geld!

Ich habe eine einfache Beispiel -Seite erstellt, die zeigt, wie einfach und leistungsstarke Yui 3 verwendet werden kann. Um hier im Artikel Platz zu sparen, vermeiden ich es, Ihnen alle Markups und Code anzuzeigen. Sie können jedoch die vollständige Quelle auf der Beispiel -Seite anzeigen.

Die erste Aufgabe, die ich mache, ist, eine Instanz von Yui mit dem Animationsdienstprogramm, dem Slider -Widget, dem Menunav -Knoten -Plugin und dem Drag & Drop -Dienstprogramm zu laden. Yui geht und holt die erforderlichen Dateien und ihre Abhängigkeiten von den Yahoo -Servern. Anschließend wird eine Instanz von Yui mit den geladenen Komponenten in die Rückruffunktion zurückgegeben, die sie in der Variablen mit dem Namen Y:

empfängt

Y.get("#navProducts").addClass("selected");

Als nächstes erstelle ich eine einfache Animation, um den Inhalt der Seite in die Anzeige zu bringen. Um dies zu tun, habe ich ein neues Animationsobjekt instanziiert. Ich übergende es mit der ID -Haupt -ID einen Verweis auf das Element und sage es, dass der Top -Wert von wo immer es derzeit ist (derzeit bei -1000px, wie in der Marke der Beispielseite angegeben). Ich lege auch fest, dass die Animation drei Sekunden dauern sollte und dass sie die Methode zur Lockerung des Elastizierens anwenden sollte. Sobald das Objekt instanziiert ist, ist es nur ein einfacher Fall, es mit der Run -Methode auszuführen:

navProducts.addClass("selected");

Als nächstes richte ich ein Slider -Objekt ein, damit Benutzer die Basis -Schriftgröße der Seite anpassen können. Yuis Schriftarten CSS (in der Beispielseite enthalten) setzt die Basis -Schriftgröße der Seite auf 13 Pixel. Dies geschieht, indem der Wert der Schriftgröße auf das Körperelement festgelegt wird, aus dem alle anderen Schriftgrößen berechnet werden. Das werden wir manipulieren, um die Schriftgrößen der gesamten Seite zu ändern.

Ich greife eine Knotenreferenz für das Körperelement, die später in Verbindung mit dem Schieberegler verwendet wird. Dann erstelle ich ein Slider -Widget. Ich habe den Mindestwert auf 13 und das Maximum auf 28 gesetzt, da ich möchte, dass die Schriftgröße in diesen Werten bleibt. Ich stelle dann sicher, dass die Schaufelgröße des Schiebers 100 Pixel breit ist. Schließlich stelle ich das Daumenbild des Schiebereglers (das direkt von Yahoo's gehosteten Servern geladen wird):

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

Sobald der Schieberegler instanziiert ist, ist es nur eine einfache Angelegenheit, ihn zu rendern. Ich tue dies, indem ich die Render -Methode des Schiebereglers mit dem Klassennamen des Elements, in dem ich möchte, aufgerufene

Y.get('.author').setStyle('cursor', 'move');

Die einzige Aufgabe, die jetzt noch übrig ist, besteht darin, den Schieberegler so zu verdrahten, dass sie die Schriftgröße der Seite tatsächlich anpasst. Dies tue ich, indem ich mich in das After -Ereignis einbiede. Yui 3 hat Standard auf und nach Veranstaltungen können Sie sich an die Event -Handhabung so einfacher machen als in der vorherigen Version. Wenn das ValueChange -Ereignis abgefeuert wird, wird der Fontstyle -Wert unseres Körperelements geändert:

YAHOO.util.Dom.addClass("navProducts", "selected");

Ich habe auch ein Navigationsmenü eingerichtet. Sobald der Inhalt der Seite fertig ist, stecke ich das Menuav -Knoten -Plugin in den NAV -Knoten an. Anschließend wird automatisch ein Navigationsmenü basierend auf dem Markup eingerichtet, das es findet - so einfach so! Hier ist der Code:

Y.get("#navProducts").addClass("selected");

Schließlich mache ich das Bild von Ihnen wirklich draggierbar, indem ich einfach ein neues Drag & Drop -Objekt instanziiert und es einen Verweis auf den Unterrichtsnamen meines Bildes übergeben kann. Sobald das Objekt erstellt wird, ist das Bild draggierbar. Als zusätzliche Note ändere ich den Mauszeiger, wenn er über dem Bild schwebt, so dass es sichtbar ist, dass das Bild draggierbar ist:

navProducts.addClass("selected");

Zusammenfassung

Wie Sie sehen können, ist Yui 3 ein völlig anderes Tier als sein Vorgänger. Zusammen mit einer neuen Syntax erhalten Sie eine schnellere, leichtere, einfachere und flexiblere Bibliothek - bereit, Ihre ehrgeizigsten Webprojekte zu übernehmen.

Sehen, dass dies ein Primer war. Wir haben kaum die Oberfläche dessen mit Yui gekratzt. Für mehr Lesen finden Sie die Yui 3.x Preview Release 2 Seite, die Präsentation von Satyen Desai auf Yui 3 und das Yui 3 -Forum.

häufig gestellte Fragen zu Yui 3

Was sind die neuen Funktionen in Yui 3? Dazu gehören ein neues Ereignissystem, das eine flexiblere Ereignisbehandlung ermöglicht, ein neues Modulsystem, das den Prozess des Ladens und die Verwendung von Modulen vereinfacht, und ein neues Attributsystem, das eine konsistente API für die Arbeit mit Objekteigenschaften liefert. Darüber hinaus enthält Yui 3 eine Reihe neuer Dienstprogramme und Widgets wie Knoten und Nodelist für DOM -Manipulation, IO für AJAX -Anforderungen und Widget zum Erstellen wiederverwendbarer UI -Komponenten. Abhängigkeiten und dann die Funktionalität des Moduls. Die Abhängigkeiten des Moduls werden als Array von Modulnamen angegeben, und die Funktionalität des Moduls wird als eine Funktion implementiert, die die YUI -Instanz als Argument empfängt. In dieser Funktion definieren Sie die Methoden und Eigenschaften Ihres Moduls.

Wie funktioniert das neue Ereignissystem in Yui 3? Ein Ereignisziel ist ein Objekt, das Ereignisse abgeben kann, und ein Ereignishandler ist eine Funktion, die auf diese Ereignisse reagiert. Sie können ein Ereignisziel erstellen, indem Sie die EventTarget -Klasse erweitern und Ereignishandler mit der Methode on () an ein Ereignisziel anhängen. Dieses System ermöglicht ein hohes Maß an Flexibilität bei der Behandlung von Ereignissen.

Was ist der Zweck des Attributsystems in Yui 3? Sie können Attribute mit einer bestimmten Reihe von Eigenschaften definieren, z. Dieses System erleichtert das Erstellen von Objekten mit einer genau definierten Schnittstelle. Sie können die IO () -Methode verwenden, um eine Anforderung zu senden, die URL anzugeben, die Anforderungsmethode (GET oder Post) und alle Daten mit der Anforderung zu senden. Die IO () -Methode gibt ein Transaktionsobjekt zurück, mit dem Sie die Antwort verarbeiten können. Sie können die Methode y.one () verwenden, um einen Verweis auf ein einzelnes DOM -Element und die Y.All () -Methode zu erhalten, um einen Nodelist zu erhalten, der eine Sammlung von Elementen darstellt. Diese Methoden geben Knoten- und Nodelist -Instanzen zurück, die eine Vielzahl von Methoden zum Manipulieren der von ihnen darstellenden Elemente liefern. Ein Widget ist im Wesentlichen eine visuelle Komponente, die ein bestimmtes Stück Funktionalität zusammenfasst. Sie können ein Widget erstellen, indem Sie die Widget -Klasse erweitern und die Methoden und Eigenschaften implementieren, die das Verhalten und Erscheinungsbild Ihres Widgets definieren. Diese Methode nimmt die Namen der Module zum Laden und eine Rückruffunktion zum Ausführen, sobald die Module geladen werden. Die Rückruffunktion empfängt eine YUI -Instanz als Argument, die Zugriff auf die geladenen Module ermöglicht. Diese Methode bringt einen Fehler mit einer angegebenen Nachricht aus und protokolliert optional den Fehler und hält die Ausführung des aktuellen Codeblocks an. Sie können Fehler mit einem Versuch/Catch -Block fangen und umgehen.

Wie erweitere ich Klassen in Yui 3? Diese Methode nimmt den Konstruktor der Klasse, den Konstruktor der Klasse zu erweitern, und ein Objekt, das die Methoden und Eigenschaften enthält, um die neue Klasse hinzuzufügen. Die neue Klasse erbt alle Methoden und Eigenschaften der von ihr erweiterten Klasse und fügt sie mit den im dritten Argument angegebenen Methoden und Eigenschaften hinzu oder überschreibt sie.

Das obige ist der detaillierte Inhalt vonYui 3: leichter, schneller, einfacher zu bedienen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!