YUI 3到YUI 2开始学习有何不同?

Eas*_*onk 6 yui

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

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

sle*_*man 11

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>
Run Code Online (Sandbox Code Playgroud)

现在在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>
Run Code Online (Sandbox Code Playgroud)

注意主要区别:

  • 在YUI2中,您可以使用<script>标记自己包含所需的模块.在YUI3中,您只包含一个带有<script>标记的脚本文件,并使用其他所有内容加载YUI().use.在上面的例子中,我们使用nodeYUI3中的模块.YUI2确实有一个可以进行自动加载的模块,但它本身是一个独立的模块,并不是YAHOO全局对象的内置模块.

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

  • YUI3强制您在函数内编写所有与YUI相关的代码,因此在其自己的作用域中运行,并且只将YUI对象公开给全局作用域.这基本上是其他图书馆的忍者模式.