搜索:
首页 >> JavaScript教程 >> Js高级编程 >> YUI3新特性学习

YUI3新特性学习

2012-4-26 来源:陈漫凯的分享 网友评论投递文章

更轻量

- 出色的颗粒化模块,子模块划分;

- 延迟加载;

- 强调代码重用(公共基类、插件、扩展);

更易用

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

Tags:YUI3  Javascript库 
站长工具
Google PR 查询:
相关文章
loading 请稍等,评论加载中...

学习Asp到Asp之家(Aspxhome.com)

闽ICP备09044667号-4