Traduisez le code jQuery suivant en code YUI 2.x

Question

Avertissement: je n'ai aucune expérience de l'utilisation de YUI.

Je me demandais à quoi ressembleraient les lignes de code jQuery suivantes lorsqu'elles sont écrites en YUI. De plus, étant donné que YUI utilise un système de dépendance hiérarchique, quels fichiers .js doivent être inclus pour que le code fonctionne?

1. Etant donné le ID d'un élément HTML, appliquez plusieurs règles de style à l'élément.

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

2. Chaînage: en fonction de l'identifiant d'un élément HTML, appliquez une règle de style dessus, ajoutez-lui une classe de bar et définissez son contenu sur "!".

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

3. Ajoutez un élément LI à #menu .

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

4. Liaison d'événements de base: affiche une alerte à chaque clic sur un élément LI .

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

Answer 1

Avertissement: je ne suis pas un expert de YUI, il existe peut-être de meilleures façons de faire ces choses.

De plus, jQuery fait bien ce que vous avez mis en place. YUI est construit davantage pour ses widgets, vous pouvez donc trouver sa fonctionnalité principale un peu moins complète que celle de jQuery (c'est-à-dire, elle ne remplace pas TOUT ce que vous voudriez jamais faire du DOM avec des appels de fonction). J'ai l'impression qu'on utilise YUI 2.x parce qu'ils veulent des widgets (j'utilise assez souvent leurs menus).

# 1: Vous devez inclure ceci:

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

Le code serait:

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

Alternativement ...

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

# 2: Il n'y a pas de chaînage dans YUI 2.x, votre solution ne sera donc pas pratiquement la même:

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

Je me fiche de toute façon de chaîner, je pense que ce code est beaucoup plus lisible. (Désolé pour la rédaction.)

# 3: Encore une fois, je ne sais pas comment définir le code HTML directement à part l'utilisation de innerHTML ... Je penserais que ce serait juste:

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

# 4: vous devrez inclure différentes classes pour cette solution:

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

Et voici le code:

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

Encore une fois, désolé que ce ne soit peut-être pas l’avant-dernière des solutions YUI. De même, si l'utilisation constante de "YAHOO.util.longname.method" vous inquiète, vous pouvez facilement créer votre propre variable locale. YUI le fait tout le temps dans leurs bibliothèques:

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

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

Answer 2

Comme vous pouvez le constater grâce à la réponse de Daniel, il est assez détaillé d’écrire votre code dans YUI 2. Beaucoup de travail dans ce domaine a été effectué dans YUI 3 à venir . Voici comment votre code serait écrit dans 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!');
    });
}