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

Question

免责声明：我根本没有使用 YUI 的经验。

---

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

1. 给定 HTML 元素的 ID，在该元素上应用多个样式规则。

$('#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!');
    });
}