位置：首页>> 网络编程>> JavaScript>> YUI3新特性学习（2）

YUI3新特性学习（2）

　来源：陈漫凯的分享　发布时间：2012-04-26 16:25:20　

标签：YUI3,Javascript库

颗粒化模块

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更像是一种架构，框架或者说解决方案。

第一页上一页 1

投稿

YUI3新特性学习（2）

猜你喜欢