Переведите следующий код jQuery в код YUI 2.x - PullRequest
Новая
       13

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

1 голос
/ 02 мая 2009

Отказ от ответственности: У меня нет опыта использования 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!');
});

Ответы [ 2 ]

8 голосов
/ 02 мая 2009

Отказ от ответственности: я не эксперт по 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...
})();
5 голосов
/ 02 мая 2009

Как видно из ответа Даниэля, написать код в YUI 2 довольно многословно. В предстоящей 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!');
    });
}
...