yui - YUI 3 与 YUI 2 开始学习有何不同？

Question

在过去的两年里，我一直在广泛使用 jQuery 和 ExtJs 进行编程。我认为现在是时候花一些时间来学习令人印象深刻的 YUI 库了。

在从头开始学习方面什么是可取的？
我不打算在我 future 的任何项目中使用 YUI 2，我将只使用 YUI 3。YUI 2 和 YUI 3 的 riting 代码是否有任何范式转变？还是只是一些外观变化？

Answer 1

YUI2 和 YUI3 真的很不一样。就像普通的 javascript 和 jQuery 一样不同。

这是一个将给定类的所有元素的背景颜色设置为红色的示例，以说明差异。

首先在 YUI2 中:

<script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo/yahoo-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/dom/dom-min.js"></script>
<script>
  var YDom = YAHOO.util.Dom;

  YDom.setStyle(YDom.getElementsByClassName('test'),'background-color','red');

</script>

现在在 YUI3 中:

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
<script>
  YUI().use('node',function(Y){

    Y.all('.test').setStyle('background-color','red');

  });
</script>

注意主要区别:

在 YUI2 中，您可以使用 <script> 自己包含所需的模块。标签。在 YUI3 中，您只包含一个带有 <script> 的脚本文件。使用 YUI().use 标记并加载所有其余部分.在上面的示例中，我们使用 node YUI3 中的模块。 YUI2 确实有一个可以自动加载的模块，但它本身是一个单独的模块，而不是内置到 YAHOO 全局对象中。

YUI2 是传统的命令式编程:foo(bar())而 YUI3 使用链接。

YUI3 强制你在一个函数中编写所有与 YUI 相关的代码，因此在它自己的范围内运行并且只公开 YUI对全局范围的对象。这基本上是其他库中的忍者模式。