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

YUI3新特性学习

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

标签：YUI3,Javascript库

更轻量

－出色的颗粒化模块，子模块划分；

－延迟加载；

－强调代码重用（公共基类、插件、扩展）；

更易用

－统一的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请求的数量。

投稿

猜你喜欢