Share
Da jQuery die JavaScript-Framework-Landschaft dominiert, sind viele Neulinge nicht mit anderen JavaScript-Frameworks vertraut. Die Wahrheit ist, dass es eine Fülle von ausgezeichneten JavaScript-Frameworks gibt, wie MooTools, Prototype, Ext JS und… YUI! YUI ist zwar nicht so bekannt wie andere Bibliotheken, bietet jedoch eine Fülle von Tools für den Webentwickler. Heute werden wir einen kurzen Überblick über einige Funktionen geben.
YUI (kurz für Yahoo User Interface und ausgesprochen Y-U-I) ist eine Open-Source-JavaScript- und CSS-Bibliothek, die hauptsächlich von Yahoo.com entwickelt wurde. YUI umfasst JavaScript-Hilfsprogramme, ein CSS-Framework (Reset, Raster und Schriftarten), JavaScript-Widgets und -Tools, mit deren Hilfe Sie Ihre Module integrieren und verwalten können.
Es gibt derzeit zwei unterstützte Versionen von YUI. YUI 2, das 2006 eingeführt wurde, enthält den Löwenanteil der YUI-Widgets. YUI 3 wurde 2009 veröffentlicht und verfügt über eine völlig neue Syntax, die die Benutzerfreundlichkeit erheblich verbessert (insbesondere bei der Ereignisbehandlung und beim DOM-Traversal)..
Sie fragen sich vielleicht, warum sollte ich überhaupt in Betracht ziehen, ein anderes JavaScript-Framework zu lernen? Jeder Rahmen hat seine Stärken, daher hängt der von Ihnen gewählte Rahmen von Ihren Bedürfnissen ab. Hier sind ein paar Dinge, die YUI wirklich vorhat:
Ok, jetzt, da Sie ein wenig von YUI gehört haben, wollen wir uns etwas Code ansehen!
YUI bietet eine große Flexibilität beim Laden der Bibliothek. Schauen wir uns ein paar Möglichkeiten an, wie Sie es schaffen können.
Die Seed-Datei ist der bevorzugte Weg, um YUI auf Ihrer Seite zu erhalten. Fügen Sie einfach die YUI-Seed-Datei ein (nur ~ 6 KB), und fügen Sie dann die gewünschten Module über JavaScript hinzu. Schauen wir uns ein Beispiel an:
YUI.use () fordert eine Anforderung zum Abrufen der erforderlichen Module an und übergibt eine YUI-Instanz im Callback, die alle erforderlichen Module enthält. YUI 2-Komponenten können auch eingebunden werden, indem der Modulname vorangestellt wird yui2-. Wenn Sie eine YUI 2-Komponente einschließen, können Sie über Y.YUI2 auf die YUI 2-Instanz zugreifen.
Mit diesem webbasierten Tool können Sie die gewünschten Module auswählen und eine minimierte Datei mit all diesen Abhängigkeiten herunterladen oder verknüpfen (ähnlich wie das jQuery-UI-Tool). Es bietet auch Statistiken darüber, wie die Dateien das Laden von Seiten beeinflussen.
SimpleYUI ist ein kürzlich veröffentlichtes Tool, das die Einbindung von YUI für diejenigen vereinfacht, die es gewohnt sind, lediglich eine JavaScript-Bibliothek hinzuzufügen und Zugriff auf alles zu haben. Fügen Sie einfach die SimpleYUI-Datei hinzu und Sie erhalten eine globale YUI-Instanz, die der Y-Variablen mit DOM-Manipulations-, AJAX- und UI-Effektmodulen zugeordnet ist.
Mit SimpleYUI können Sie alle anderen YUI-Module weiterhin dynamisch verwenden, indem Sie sie mit der YUI.use-Methode laden.
Accentsconagua
Y.use ('dd-drag', Funktion (Y) // Drag & Drop einrichten); SimpleYUI hat das Potenzial, die Einführung von YUI wirklich zu unterstützen, da es Programmierern, die aus Bibliotheken wie jQuery stammen, wesentlich zugänglicher und vertraut ist.
Die DOM-Manipulation ist in YUI 3 sehr einfach und die Syntax sollte recht vertraut sein, wenn Sie jQuery in der Vergangenheit verwendet haben.
YUI bietet zwei Methoden zum Abrufen von DOM-Knoten über das Knotenmodul.
Hier ist ein Beispiel.
// Y.one var node = Y.one ('# test-div'); // erhalte den Knoten mit der ID test-div var node2 = Y.one (document.body); // Y.one akzeptiert auch ein DOM-Element Y.one ('# my-list'). Get ('id'); // meine-Liste // Y.all var node = Y.all ('# my-list li'); // alle Listeneinträge von my-liste // ketten var varn2 = Y.one ('# my-list'). all ('li'); // Alle Listenelemente von my-list var parent = Y.one ('# my-list'). get ('parentNode'); // gibt übergeordnetes Element von my-list zurück (als YUI-Node-Objekt) YUI bietet auch eine 'Prüfung'Methode, um zu sehen, ob ein Element mit einem Selektor übereinstimmt
var node = Y.one ('# test-div'); // Wenn der Knoten die primäre Klasse hat if (node.test ('. primary')) doSomething (); YUI bietet auch erhalten und einstellen Methoden zum Bearbeiten von Knotenattributen und Komfortfunktionen wie addClass und removeClass.
// get und setze Y.one ('# test-div'). get ('id'); Y.one ('# test-div'). Set ('innerHTML', 'Test Content'); // addClass, removeClass Y.one ('# test-div'). addClass ('highlighted'); // fügt Klasse zu einem Div hinzu Y.all ('p'). removeClass ('highlighted'); // entfernt die Klasse aus allen p-Elementen Ereignisse werden mithilfe von YUIs angefügt auf Methode. Sie können diese Methode entweder auf einem Knoten oder in der YUI-Instanz aufrufen. Zum Beispiel:
// in YUI-Instanz aufgerufen // myevent | click Namespaces dieses Onclick-Handlers für myevent (wird später zum Entfernen verwendet) Y.on ("myevent | click", function () // etwas tun, "#test p"); // auf NodeList aufgerufen Y.all ("# test p"). on ("myevent | click", function () // etwas tun); Ein interessantes Merkmal von YUI ist, dass der Selektor nicht sofort eine Übereinstimmung finden muss, wenn Sie die Methode aus dem ersten Beispiel verwenden. Nach dem Laden der Seite wird von YUI bis zu 15 Sekunden lang nach einem Treffer gesucht. Das bedeutet, dass Sie nicht warten müssen, bis das Dokument geladen ist, um es zu verwenden (Sie müssen Ihre Event-Handler nicht umschließen.) in einer document.load-Funktion).
Beachten Sie auch, dass dem Ereignistyp eine optionale Zeichenfolge vorangestellt wurde, die das Ereignis als Namespaces bezeichnet. Sie können dies verwenden, um das Ereignis später zu trennen, wenn Sie dies wünschen.
Y.all ("# test p"). Detach ("myevent | click"); Sie können auch Ereignisse simulieren…
Y.one ("# test"). Simulate ("click"); … Und benutzerdefinierte Events abfeuern.
Y.one ("# test"). Fire ("myevents: custom_event_one"); YUI 3 unterstützt auch Berührungsereignisse, mit denen Sie Ihre JavaScript-Anwendung für mobile Geräte unterstützen können. Ein möglicher Grund dafür ist, dass Sie das "event-touch" -Modul mit YUI.on integrieren müssen, damit die Touch-Events funktionieren.
Y.one ("# test"). On ('touchstart', function () // ein berührungsereignis gestartet); AJAX-Anforderungen werden über das E / A-Modul von YUI 3 verarbeitet. Ein AJAX-Aufruf erfolgt mit der io Funktion, wie unten gezeigt.
Y.io ('/ url / to / call', // Dies ist eine Post-Methode: 'POST', // das Formularformular serialisiert: id: "my_form", useDisabled: true, // Ajax Lifecycle-Ereignis Handler für: complete: function (id, response) var data = response.responseText; // Antwortdaten.); Das IO Die Methode akzeptiert eine URL und ein Konfigurationsobjekt als Parameter. Das Konfigurationsobjekt ist hochgradig konfigurierbar, aber im obigen Beispiel wurden einige der häufigsten Optionen angegeben.
YUI's io Mit diesem Modul können Sie auch domänenübergreifende Anforderungen mithilfe einer von Yahoo bereitgestellten Flash-Datei senden. Es gibt jedoch einige Einschränkungen. Erstens müssen Sie eine Kopie der YUI-Flash-Datei auf Ihrem Server haben, um die Anforderung tatsächlich ausführen zu können. Zweitens muss die Domäne, auf die Sie zugreifen, über eine domänenübergreifende Richtliniendatei verfügen, die Ihnen Zugriff gewährt.
Y.io ('http: //www.somedomain/web/service/', Methode: 'POST', data: 'data = 123', // use flash xdr: use: 'flash', dataType: ' xml ' // ajax Lifecycle-Ereignishandler für: complete: function (id, response) var data = response.responseText; // Antwortdaten.); JSONP wird ebenfalls unterstützt, jedoch über die YUI JSONP Modul, nicht das IO Modul.
Y.jsonp (someurl, function (Antwort) // Handle jsonp response);
Ein weiteres Modul, das in Verbindung mit AJAX sehr nützlich ist, ist das JSON-Modul. Auf diese Weise können Sie AJAX-Anforderungen, die JSON zurückgeben, problemlos analysieren. JSON kann mit der JSON.parse-Methode analysiert werden
var obj = Y.JSON.parse (response.responseText);
YUI 3 enthält ein Animationsmodul, mit dem so ziemlich jede Art von Animation ausgeführt werden kann. Die Syntax unterscheidet sich etwas von jQuery, also werfen wir einen Blick darauf.
Animationen finden in mehreren Schritten in YUI statt. Zuerst richten Sie ein neues Animationsobjekt ein, das Ihre Animation beschreibt, und führen Sie es dann aus.
// Animiere ein div von einer Größe bis zu einer Höhe und Breite von 100 var animation = new Y.Anim (node: '# my-div', // Selektor für den Knoten, dessen Animationen Sie durchführen möchten. // Werte, aus denen animiert werden soll (optional) from: height: 0, width: 0, // zu animierende Werte zu: height: 100, width: 100, duration: 0.5, // Dauer der Beschleunigung einstellen: Y.Easing.easeOut // Lockerung einstellen); animation.run ();
Alle Eigenschaften können mit geändert werden .erhalten() und .einstellen() auf dem Animationsobjekt, sodass Sie die Animation oder die DOM-Elemente zum Animieren ändern können. Animationen lösen auch Ereignisse aus, die auch gehört werden können.
// Animation ist ein Y.Anim-Objekt animation.on ('end', function () // wird nach Beendigung der Animation ausgelöst); Mit dem YUI-Animationsobjekt können Sie alle Arten von Animationen in Ihrer Anwendung erstellen.
Eine der schönsten Funktionen von YUI sind die Widgets. YUI 3 verfügt derzeit über eine begrenzte Anzahl von Widgets (Registerkarten, einen Schieberegler und eine Überlagerung, um nur einige zu nennen), bietet jedoch ein leistungsfähiges Framework zum Erstellen eigener YUI 3-Widgets. Auf der anderen Seite verfügt YUI 2 über eine riesige Bibliothek von Widgets. Hier sind ein paar:
Es gibt viele weitere Widgets, die Sie verwenden können. Sie finden sie alle auf der YUI 2-Entwickler-Website
.
Die letzte Komponente, die wir uns kurz ansehen, sind die YUI-CSS-Bibliotheken. YUI 3 bietet vier CSS-Ressourcen.
Dies war nur ein kurzer Blick auf einige der von YUI angebotenen Komponenten und Module. Wenn dieser Artikel Ihr Interesse geweckt hat, empfehle ich Ihnen, sich die YUI-Entwicklerdokumentation anzusehen und herauszufinden, was YUI sonst noch bietet. Was sind deine Eindrücke? Wenn Sie YUI in der Vergangenheit verwendet haben, was halten Sie davon??
