javascript - 将以下 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。基本事件绑定(bind):每当点击 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...
})();