Traduzca el siguiente código jQuery al código YUI 2.x

Question

Descargo de responsabilidad: no tengo experiencia en el uso de YUI en absoluto.

---

Me preguntaba cómo se verían las siguientes líneas de código jQuery cuando se escriben en YUI. Además, como YUI está utilizando un sistema de dependencia jerárquico, ¿qué archivos .js deben incluirse para que el código funcione?

1. Dada la ID de un elemento HTML, aplique varias reglas de estilo en el elemento.

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

2. Encadenamiento: dado un ID de un elemento HTML, aplique una regla de estilo, agregue una clase de barra y configure su contenido en '!'.

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

3. Agregue un elemento LI a #menu.

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

4. Enlace de evento básico: muestra una alerta cada vez que se hace clic en un elemento LI .

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

Answer 1

Descargo de responsabilidad: no soy un experto en YUI, puede haber mejores formas de hacer estas cosas.

Además, jQuery es bueno haciendo lo que has puesto. YUI está construido más para sus widgets, por lo que es posible que su funcionalidad principal sea un poco menos completa que la de jQuery (es decir, no reemplaza TODO lo que quiera hacer el DOM con llamadas a funciones). Siento que uno usa YUI 2.x porque quieren widgets (uso bastante sus menús).

# 1: necesitarías incluir esto:

<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>

El código sería:

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

Alternativamente ...

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

# 2: No hay encadenamiento en YUI 2.x, por lo que su solución no será casi la misma:

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 = "!";

De todos modos, no me importa el encadenamiento, creo que este código es mucho más legible. (Perdón por la editorialización).

# 3: Una vez más, no estoy seguro de cómo configurar html directamente, además de simplemente usar innerHTML ... Pensaría que sería:

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

# 4: Tendrá que incluir diferentes clases para esta solución:

<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>

Y aquí está el código:

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

Nuevamente, lamento que estas no sean las penúltimas soluciones YUI. Además, si le preocupa el uso constante de "YAHOO.util.longname.method", puede crear fácilmente su propia variable local. YUI hace esto todo el tiempo en sus bibliotecas:

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

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

Answer 2

Como puede ver en la respuesta de Daniel, es bastante detallado escribir su código en YUI 2. Se ha realizado mucho trabajo en esta área en próximo YUI 3 . Así es como se escribiría su código en YUI 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!');
    });
}