将以下jQuery代码转换为YUI 2.x代码

Question

免责声明:我根本没有使用YUI的经验.

---

我想知道当用YUI编写时,以下jQuery代码行会是什么样子.此外,由于YUI使用的是分层依赖系统,.js需要包含哪些文件才能使代码正常工作？

1.给定IDHTML元素,在元素上应用多个样式规则.

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

2.链接:给定HTML元素的ID,对其应用样式规则,向其添加一个类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:再次,不知道除了使用innerHTML之外如何直接设置html ......我认为它只是:

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

从Daniel的回答中可以看出,在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!');
    });
}