来自陈漫凯的分享
更轻量
- 出色的颗粒化模块,子模块划分;
- 延迟加载;
- 强调代码重用(公共基类、插件、扩展);
更易用
- 统一的API;
- 便利(each, bind, queue, 支持链式);
更快捷
- 重构node, event, selector等,解决很多核心痛点;
- 依赖性处理;
Hello YUI
初识YUI3.x,最先发现的一个变化就是,原先YAHOO的命名空间被改为YUI,这样命名的修改,就不用在为了使用这个开源的框架而非要搞得代码里到处都是YAHOO公司的名字,但更好的一点是,可以借助不同的变量名让YUI3和旧版的YUI共存而不至于冲突。
沙箱(Sandboxing)
这是YUI3.x的一个显著特点,它可以在页面中创建一个多重开发环境。每一个YUI实例会自包含的,保护和限制。
YUI().use('node', 'event', function(Y) {
// ready
});
在这里,YUI()执行并返回一个use方法执行后的库的实例。use方法至少有两个参数是必须,库组件名称和加载完毕后执行的回调函数。 上面的例子中,会加载名字为’node’和’event’的库组件,最后一个参数是回调函数,YUI()执行后的包含所加载的库组件的实例会以参数Y传给这个回调函数。
相对于YUI2.x的只有YAHOO一个全局变量,沙箱的这种多重开发环境的好处还是很明显的。
YAHOO.widget.HelloWorld = doSomething; // 开发者A的代码
...
YAHOO.widget.HelloWorld = doOtherthing; // 开发者B的代码
如上,在YUI2.x中,YAHOO作为全局变量,多人开发的时候,将会出现B的代码覆盖A代码的情况,而且这种情况不是使用闭包所能解决的。而YUI3.x的沙箱,提供每个实例可独立开发:
YUI().use('node', function(Y) {
Y.HelloWorld = doSomething; // 开发者A的代码
});
YUI().use('anim', function(Y) {
Y.HelloWorld = doOtherthing; // 开发者B的代码
});
沙箱使得代码更安全,而且,每一个实例的YUI3.x版本不同也没有关系。
YUI().use()的另外一个特点是每个实例的依赖,可以按需加载。这样不但可以节省带宽,而且也使得更加力度的颗粒化模块变得更有意义。而且,加载的所依赖的js文件是延迟加载的,加快了页面渲染的速度。

测试显示,延迟加载使得页面在更短的时间内渲染完成。
但同时,因为依赖进来的包,都是独立的文件,每引入一个文件,就创建一个<script>标签去请求js文件,这样大大的增加了HTTP请求的数量。
颗粒化模块
YUI2.x每个模块庞大的体积让不少人望而兴叹。比如有时候要使用日历里面的基础功能,你不得不把整个日历组件导人,整整75K的代码,你实际用到的仅仅是基础功能,这也是很多公司没有使用YUI的原因之一。YUI3.x做了大调整,对每个模块都进行了更细颗粒度的划分。比如,DOM模块,划分为了base, screen, style, selector-css2, selector-css3, selector-native等几个小模块,这样,我们可以根据需要选择所需的模块,对于我们控制页面的载入的数据量有很大帮助。
但更细的划分模块,带来的弊端就是,代码文件增多,维护成本变大。
选择器(Selector)
YUI2.9就已经引入了选择器引擎,但由于它在整个YUI2.x中出现得比较晚,所以,在很多基于旧版本的YUI项目中,还是用传统的元素匹配技术。
而在YUI3.x中,选择器已经成为了一种标准支持。
Y.one('#demo');
Y.all('.demo');
Y.all('.demo').filter([filter]);
Y.all('#demo li');
如果需要用到css选择器,需要把selector-css2.js和selector-css3.js引入。但从性能的角度上讲,我还是觉得没有必要去用那么复杂的选择器。
链式调用
跟jQuery一样,YUI3.x也开始支持链式调用,对于一些没有逻辑返回值的方法,YUI3.x都支持链式调用。
Y.one('#demo').set('innerHTML', 'Hello World!').addClass('hight-light');
链式调用并非YUI3.x的主打亮点,但的确带来了书写的便利性,但同时,对于向来严谨的YUI,链式一定程度上会带坏现有代码风格。使用YUI开发的人,至少要在链式调用使用程度上达到一定的共识。
Nodes
由于各个浏览器对DOM标准的支持不同,YUI Node对底层的DOM节点进行封装,并强化其功能,为创建、操作和获取DOM节点对象(集合)提供了丰富的方法。封装后的YUI Node和浏览器HTMLElement对象对比:

封装后,获取到的不在是一个浏览器DOM对象,所以对YUI Node对象的熟悉的访问和修改,必须通过getter和setter来操作。
var el = Y.one('#demo');
alert(el.id); // undefined
alert(el.get('id')); // 'demo'
小结
正如我们所看到的,YUI3.x相对于早前版本,完全是一个新的产物。通过新的语法,我们使用到的是,更轻量,更易用,更快捷的库。YUI2.x是一种工具集,而YUI3.x更像是一种架构,框架或者说解决方案。