Traduci il seguente codice jQuery in codice YUI 2.x.

Question

Dichiarazione di non responsabilità: non ho alcuna esperienza di utilizzo di YUI.

---

Mi chiedevo come sarebbero state le seguenti righe di codice jQuery se scritte in YUI. Inoltre, poiché YUI utilizza un sistema di dipendenze gerarchico, quali file .js devono essere inclusi affinché il codice funzioni?

1. Dato il ID di un elemento HTML, applica più regole di stile sull'elemento.

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

2. Concatenamento: dato un ID di un elemento HTML, applica una regola di stile su di esso, aggiungi una classe di bar e imposta il suo contenuto su '!'.

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

3. Aggiungi un elemento LI a #menu.

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

4. Associazione eventi di base: mostra un avviso ogni volta che si fa clic su un elemento LI .

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

Answer 1

Disclaimer: non sono un esperto YUI, potrebbero esserci modi migliori per fare queste cose.

Inoltre, jQuery è bravo a fare ciò che hai messo. YUI è costruito più per i suoi widget, quindi potresti trovare la sua funzionalità di base un po 'meno completa di quella di jQuery (ovvero, non sostituisce TUTTO ciò che vorresti mai fare al DOM con chiamate di funzione). Sento che uno usa YUI 2.x perché vogliono widget (uso abbastanza i loro menu).

# 1: dovresti includere questo:

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

Il codice sarebbe:

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

In alternativa ...

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

# 2: non vi è alcun concatenamento in YUI 2.x, quindi la tua soluzione non sarà più la stessa:

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

Non mi interessa comunque concatenare, penso che questo codice sia molto più leggibile. (Ci scusiamo per l'editorializzare.)

# 3: Ancora una volta, non sono sicuro di come impostare HTML direttamente oltre a usare innerHTML ... Penso che sarebbe solo:

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

# 4: dovrai includere diverse classi per questa soluzione:

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

Ed ecco il codice:

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

Ancora una volta, mi dispiace che queste potrebbero non essere le penultima soluzione YUI. Inoltre, se sei preoccupato per l'uso costante di " YAHOO.util.longname.method " ;, puoi facilmente creare la tua variabile locale. YUI lo fa sempre nelle loro librerie:

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

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

Answer 2

Come puoi vedere dalla risposta di Daniel, è abbastanza dettagliato scrivere il tuo codice in YUI 2. In prossima YUI 3 . Ecco come sarebbe scritto il tuo codice in 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!');
    });
}