YUI3学习笔记之一：初探框架
YUI框架想必大家并不陌生。由大名鼎鼎的yahoo前端开发团队开发并且维护。自己曾经基于YUI2上做过二次开发，在感叹其功能全面的同时，也在一个程度上理解了它未能像jquery,mootools等框架大范围被开发者所接受的原因。模块粒度过大，代码臃肿等问题一直饱受诟病。不过，随着yui3的来临，一切都有所改观。
以下仅仅是自己在平时学习的过程中的一些小心得，并且是站在一个从设计师转型为开发者的角度上所述，如有表述不明敬请原谅。
如果说yui2只是yahoo前端开发团队对框架开发的一个试水，那么yui3便真正成为了一个成熟的产品。yahoo首页基于yui3的构建已经证明了它的易用性与可维护性。其基于yui2主要做了如下改进：
1. 按需加载。
yui2中也实现了按需加载，不过是在版本开发到一个时期才加上去的。与原有架构很不协调，并且冗余代码多，使用的人相当少。而现在，按需加载javascript已经成为框架中的新起之秀所必备的能力。yui3当然也不例外。并且，yui3将按需加载的函数放入了其核心库中，整个框架的开发和使用都基于其之上，其令其易用性大大增加。基础的使用方法如下：
那么这种依赖关系又是怎么确定的呢。这在我们开发过程中就通过某种手段来指定了。
那么为什么要如此劳师动众的开发按需加载这样的方式呢。其一，方便调试：多元划分的模块能让问题定位更加快速。其二，随着现在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对象转换成为数组对象
以下仅仅是自己在平时学习的过程中的一些小心得，并且是站在一个从设计师转型为开发者的角度上所述，如有表述不明敬请原谅。
如果说yui2只是yahoo前端开发团队对框架开发的一个试水，那么yui3便真正成为了一个成熟的产品。yahoo首页基于yui3的构建已经证明了它的易用性与可维护性。其基于yui2主要做了如下改进：
1. 按需加载。
yui2中也实现了按需加载，不过是在版本开发到一个时期才加上去的。与原有架构很不协调，并且冗余代码多，使用的人相当少。而现在，按需加载javascript已经成为框架中的新起之秀所必备的能力。yui3当然也不例外。并且，yui3将按需加载的函数放入了其核心库中，整个框架的开发和使用都基于其之上，其令其易用性大大增加。基础的使用方法如下：
1 YUI().use('node',function(Y){
2 Y.get(‘＃demix’);
3 });
很方便吧，使用过程中，对use方法的第一个参数，我们可以指定接下来的所需要用到的模块。更方便的是，不需要指定所有需要的模块，只需指定一个最顶端的模块，支持它的其他模块将会自动也被加载进来。当然，yui提供了重复加载的检测机制，保证了所有的模块只会加载进也面一次。2 Y.get(‘＃demix’);
3 });
那么这种依赖关系又是怎么确定的呢。这在我们开发过程中就通过某种手段来指定了。
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申明来聚合小模块。这样，在保证了框架的粒度划分的同时也保证了整体性。2 Y.demix=function(){};
3 } , version , {requires:['node','event']});
4
5 YUI().add('demix', function(Y){} , version ,{use:['demix-base','demix-upgrade']})
那么为什么要如此劳师动众的开发按需加载这样的方式呢。其一，方便调试：多元划分的模块能让问题定位更加快速。其二，随着现在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对象转换成为数组对象
