Übersetzen Sie die folgende jQuery-Code zu YUI 2.x Code

Question

Haftungsausschluss:. Ich habe keine Erfahrung überhaupt mit YUI

---

Ich habe mich gefragt, wie die folgenden Zeilen von jQuery-Code aussehen würden, wenn sie in YUI geschrieben. Da auch YUI ein hierarchisches Abhängigkeitssystem verwendet, welche .js Dateien, um aufgenommen werden müssen für den Code arbeiten?

1. In Anbetracht der ID eines HTML-Elements, mehrere Stilregeln auf das Element anzuwenden.

$('#foo').css({ color: 'yellow', background: 'black' });

2. Chaining: eine ID eines HTML-Element gegeben, eine Stilregel auf sie anwenden, eine Klasse von bar, um es hinzuzufügen, und legen Sie seinen Inhalt

‚!‘.

$('#foo').css('color', 'red').addClass('bar').html('!');

3. Fügen Sie ein LI Element #menu.

$('#menu').append('<li>An extra item</li>');

4. Grundereignisbindung: eine Warnung anzeigen, wenn ein LI Element geklickt wird auf

.

$('li').click(function() {
 alert('Clickety-click!');
});

Answer 1

Disclaimer:. Ich bin kein Experte YUI, kann es bessere Möglichkeiten, diese Dinge zu tun,

Auch jQuery ist gut zu tun, was Sie setzen haben. YUI ist bekannt für seine Widgets mehr gebaut, so dass man seine Kernfunktionalität etwas weniger umfangreich als jQuery finden kann (das heißt, es ersetzt nicht alles, was Sie wollen, würden das DOM mit Funktionsaufrufen zu tun). Ich fühle mich wie ein verwendet YUI 2.x, weil sie Widgets wollen (ich benutze ihre Menüs ziemlich viel).

# 1: Sie müssen diese enthalten:

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dom/dom-min.js"></script>

-Code wäre:

var el = YAHOO.util.Dom.get('foo');
YAHOO.util.Dom.setStyle(el, 'color', 'yellow');
YAHOO.util.Dom.setStyle(el, 'background', 'black');

Alternativ ...

YAHOO.util.Dom.setStyle('foo', 'color', 'yellow');
YAHOO.util.Dom.setStyle('foo', 'background', 'black');

# 2: Es gibt keine Verkettungs in YUI 2.x, so dass Ihre Lösung fast nicht die gleiche sein wird:

var el = YAHOO.util.Dom.get('foo');
YAHOO.util.Dom.setStyle(el, 'color', 'red');
YAHOO.util.Dom.addClass(el, 'bar');
// Not sure how to set contents with YUI...  would just use:
el.innerHTML = "!";

Ich interessiere mich nicht sowieso für die Verkettung, ich glaube, dieser Code viel besser lesbar ist. (Sorry für das editorializing.)

# 3: Wieder nicht sicher, wie html einstellt direkt neben nur innerHTML- mit ... Ich würde denken, es wäre nur sein:

var el = YAHOO.util.Dom.get('menu');
el.innerHTML += '<li>An extra item</li>';

# 4: Sie werden verschiedene Klassen für diese Lösung umfassen müssen:

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>

Und hier ist der Code:

var lis = document.getElementsByTagName("li");
YAHOO.util.Event.addListener(lis, 'click', function() {
        alert('Clickety-click!');
    });

Auch hier, sorry, dass diese nicht die vorletzte YUI-Lösungen sein. Auch, wenn Sie sich Sorgen über die ständige Verwendung von „YAHOO.util.longname.method“ sind, können Sie einfach nur Ihre eigene lokale Variable machen. YUI tut dies die ganze Zeit in ihren Bibliotheken:

(function() {
    var Event = YAHOO.util.Event;

    // Insert all your code here...
})();

Answer 2

Wie Sie von Daniel Antwort sehen, es ist ziemlich ausführliche Code in YUI 2. Eine Menge Arbeit in diesem Bereich zu schreiben, hat sich in der kommend YUI 3 . Hier ist, wie Ihr Code würde in YUI geschrieben werden 3:

YUI().use('node', function(Y) {
    // #1
    Y.get('#foo').setStyles({ color: 'yellow', background: 'black' });

    // #2
    Y.get('#foo').setStyle('color', 'red').addClass('bar').set('innerHTML', '!');

    // #3
    Y.get('#menu').appendChild(Y.Node.create('<li>An extra item</li>'));

    // #4
    Y.all('li').on('click', function() {
        alert('Clickety-click!');
    });
}