Перевести следующий код jQuery на YUI 2.x код

Question

Отказ от ответственности: У меня нет опыта использования YUI вообще.

---

Мне было интересно, как выглядят следующие строки кода jQuery, написанные в YUI. Кроме того, поскольку YUI использует иерархическую систему зависимостей, которую необходимо включить в файл .js, чтобы код работал?

1. С учетом ID элемента HTML примените несколько правил стиля к элементу.

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

2. Сцепление: данный идентификатор из HTML-элемента, применить правило стиля на него, добавить класс bar к нему, и установить его содержимое «!».

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

3. присоединять LI элемент #menu.

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

4. связывании Основные события: показать предупреждение всякий раз, когда LI элемент щелкнули.

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

Answer 1

Отказ от ответственности: Я не эксперт YUI, может быть лучшие способы сделать эти вещи.

Кроме того, jQuery умеет делать то, что вы положили. YUI построен больше для своих виджетов, поэтому вы можете обнаружить, что его основная функциональность немного менее всеобъемлющая, чем jQuery (т. Е. Она не заменяет ВСЕ, что вы когда-либо хотели бы выполнять DOM с вызовами функций). Я чувствую, что использует YUI 2.x, потому что они хотят виджеты (я использую их меню совсем немного).

# 1: Вы должны включить это:

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

Код будет:

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

В качестве альтернативы ...

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

# 2: Там нет цепочки в YUI 2.x, поэтому ваше решение будет не таким:

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

Я не забочусь о цепях в любом случае, я думаю, что этот код гораздо читабельнее. (Извините за редактирование.)

# 3: Опять же, не уверен, как установить html прямо, кроме использования innerHTML ...Я думаю, это было бы просто:

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

# 4: Вы должны включать в себя различные классы для этого решения:

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

А вот код:

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

Опять же, жаль, что это не могут быть предпоследние решения YUI. Кроме того, если вас беспокоит постоянное использование «YAHOO.util.longname.method», вы можете легко просто создать свою собственную локальную переменную. YUI делает это все время в своих библиотеках:

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

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

Answer 2

Как видно из ответа Даниила это довольно громоздким, чтобы написать свой код в YUI 2. Много работы в этой области было сделано в upcoming YUI 3. Вот как ваш код будет написан в 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!'); 
    }); 
}