YUI3学习（一）---入门
?? ? 学习YUI3有一段时间，并且应用在了一些小项目的前端开发中，感觉还是蛮不错的，所以决定开始记录下YUI3的学习历程和个人经验。
?? ? YUI3在前身YUI2基础上进行了大量的重新设计，并不只是简单的版本升级。YUI3强调代码重用，将功能做了级别划分和颗粒化的设计。在概念上抽象出 核心、工具、和组件类，分别放在不同的目录结构中，需要的时候自行去引用。为动态加载的框架设计做铺垫。
YUI 3重点是代码的组织和结构。以下是结构图。
?
YUI3在结构上分为四大类：
种子：该模块是YUI3的单一核心，页面都必须包含该模块，该模块提供加载功能，所以可以堪称是YUI的一个种子。在YUI3中扮演引导层的作用，通过在页面引入种子相关文件，调用YUI().use()方法可以安全快速的加载YUI3核心类和组件类。
3，安全沙箱
?页面的每一个YUI实例能够被自包含、保护和限制(YUI().use())。这种和其他YUI实例的分离，能够配合你的特殊函数需求，并且能让不同的YUI 版本更好的运行在一起。在很大程度上方便了不同开发者对同一页面的并行开发。
这里YUI().use(”,function(Y){…})就是一个安全沙箱，可以确保这里面的Y是纯天然无污染的，Y实例里有什么功能完全取决于use里传进的模块名称，function(Y){}里面的程序跟外界是隔离的，在里面创建的变量（除了全局变量）以及对YUI的添加修改都不会影响到同个页面上其他人写的程序。
?
?
?
?
YUI3学习路线
目前关于YUI3的中文资料并不多，也未发现一本介绍YUI3的书籍。所以目前最全的文档就只有yahoo 的官方YUI3介绍、API和examples（http://developer.yahoo.com/yui/3/）。根据网友的学习经验，学习路线最好是依据官方说明的顺序学习(YUI3核心(YUI Global Object\Node\Event)->组件框架->组件)；循序渐进，逐步了解YUI组织结构及使用方法。
?
?
hello YUI3 demo
?
首先下载YUI3开发包（在http://developer.yahoo.com/yui/3/?选择Download ?full developer kit，包含YUI3代码、api和例子）。解压后拷贝build文件夹里的yui3文件夹到自己的工程中。然后在页面引入yui3-min.js。
?
<script type="text/javascript" src="build/yui3/yui/yui-min.js"></script>
?之后嵌入脚本，验证YUI3是否调用成功
?
YUI({filter:debug}).use('*',function(Y){alert('hello YUI3'); });??
?
下一篇 ?YUI3 Global Object
?
1 楼 hastune 2012-02-17 API docs好坑爹啊 2 楼 houfeng0923 2012-02-18 hastune 写道API docs好坑爹啊