Question

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

从头开始学习什么是明智的？我不打算在我未来的任何项目中使用YUI 2我将只使用YUI 3.在YUI 2和YUI 3的引用代码中是否存在任何范式转换？或者只是关于一些化妆品变化？

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加载所有其余文件。在上面的示例中，我们使用YUI3中的node模块。 YUI2确实有一个可以进行自动加载的模块，但它本身是一个独立的模块，并不是内置于YAHOO全局对象的。
YUI2是传统的命令式编程：foo(bar())而YUI3使用链接。
YUI3强制您在函数内编写所有与YUI相关的代码，因此在其自己的作用域中运行，并且只将YUI对象公开给全局作用域。这基本上是其他图书馆的忍者模式。