time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > 其它JS框架 > YUI3 学习笔记之一:初探框架

YUI3 学习笔记之一:初探框架

时间:2010-04-27 14:46 点击:8628次 字体:[ ]




YUI框架想必大家并不陌生。由大名鼎鼎的yahoo前端开发团队开发并且维护。自己曾经基于YUI2上做过二次开发,在感叹其功能全面的同时,也在一个程度上理解了它未能像jquery,mootools等框架大范围被开发者所接受的原因。模块粒度过大,代码臃肿等问题一直饱受诟病。不过,随着yui3 的来临,一切都有所改观。

以下仅仅是自己在平时学习的过程中的一些小心得,并且是站在一个从设计师转型为开发者的角度上所述,如有表述不明敬请原谅。

如果说yui2只是yahoo前端开发团队对框架开发的一个试水,那么yui3便真正成为了一个成熟的产品。yahoo首页基于yui3的构建已经证明了它的易用性与可维护性。其基于yui2主要做了如下改进:

1. 按需加载。
yui2中也实现了按需加载,不过是在版本开发到一个时期才加上去的。与原有架构很不协调,并且冗余代码多,使用的人相当少。而现在,按需加载javascript已经成为框架中的新起之秀所必备的能力。yui3当然也不例外。并且,yui3将按需加载的函数放入了其核心库中,整个框架的开发和使用都基于其之上,其令其易用性大大增加。基础的使用方法如下:

 

1 YUI().use('node',function(Y){
2     Y.get(‘#demix’);
3 });

很方便吧,使用过程中,对use方法的第一个参数,我们可以指定接下来的所需要用到的模块。更方便的是,不需要指定所有需要的模块,只需指定一个最顶端的模块,支持它的其他模块将会自动也被加载进来。当然,yui提供了重复加载的检测机制,保证了所有的模块只会加载进也面一次。
那么这种依赖关系又是怎么确定的呢。这在我们开发过程中就通过某种手段来指定了。

 

1 YUI().add('demix-base',function(Y){
2     Y.demix=function(){};
3 } , version , {requires:['node','event']});
4 
5 YUI().add('demix'function(Y){} , version ,{use:['demix-base','demix-upgrade']})

通过add函数,我们可以方便的开发自己的函数模块。add方法接受四个参数。a.模块名称;b.模块内容;c.模块版本(yui3的后续版本可能会提供自定义加载指定版本的模块);d.控制变量。而且中控制变量有最关键的两个属性requires和use。当对我们开发的模块申明了requires的控制量时,表示该模块依赖于requires内指定模块运行,yui会先加载所依赖的模块,再执行我们的模块,保证其运行时的完整和安全。而use则定义了模块整合的小模块,由于yui3的粒度小(稍后讨论),一个大模块可以通过use申明来聚合小模块。这样,在保证了框架的粒度划分的同时也保证了整体性。

那么为什么要如此劳师动众的开发按需加载这样的方式呢。其一,方便调试:多元划分的模块能让问题定位更加快速。其二,随着现在RIA应用越来越广泛,很多应用动辄需要几十k甚至一百来k的js来处理,然而往往不是每个用户都能用到。这样无疑减慢了网页加载时间,降低了用户体验。按需加载,就能做到仅当用户触发应用时去请求所需脚本,页面初始加载速度快,能给用户更好的体验性。

2.sandbox
上面模块的使用方法还有另外一个优秀的特点——sandbox。在yui2的使用过程中,为了便于协同开发,使用了命名空间来解决问题。但是对于同一页面的并行开发,却没有良好的解决冲突的方法,往往只能靠闭包来实现。yui3中,函数使用过程中自动形成了安全沙箱,内部函数的运行对无法对外部产生影响(不使用window.xx的情况下),很大程度上方便了不同开发者对同一页面的并行开发。

3.粒度划分小
yui2每个模块庞大的体积让不少人望而兴叹。这也是很多公司没有使用yui的原因之一。yui3痛改前非,对每个模块都进行了更细粒度的划分。比如,dom模块,划分为了 base,screen,style,selector-css2,selector-css3,selector-native等几个小模块,对于我们控制页面的载入的数据量有很大帮助。

 



总的来说,yui3推到重建的底层让 yui3整个系统的架构更加轻盈和明朗,也对我们开发js框架起到了很好的指导性作用。相信它不会令我们失望。

附:

读码过程学到看到的小技巧:
1.  Array.prototype.slice(arguments,0)  将arguments对象转换成为数组对象



本文地址 : http://www.fengfly.com/plus/view-174145-1.html
标签: 框架 YUI3
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: