YUI3学习(一)---入门
学习YUI3有一段时间,并且应用在了一些小项目的前端开发中,感觉还是蛮不错的,所以决定开始记录下YUI3的学习历程和个人经验。YUI3在前身YUI2基础上进行了大量的重新设计,并不只是简单的版本升级。YUI3强调代码重用,将功能做了级别划分和颗粒化的设计。在概念上抽象出 核心、工具、和组件类,分别放在不同的目录结构中,需要的时候自行去引用。为动态加载的框架设计做铺垫。
YUI 3重点是代码的组织和结构。以下是结构图。
http://dl.iteye.com/upload/attachment/509168/56652789-85a3-3d66-bf32-c95256633cb9.png
YUI3在结构上分为四大类:
种子:该模块是YUI3的单一核心,页面都必须包含该模块,该模块提供加载功能,所以可以堪称是YUI的一个种子。在YUI3中扮演引导层的作用,通过在页面引入种子相关文件,调用YUI().use()方法可以安全快速的加载YUI3核心类和组件类。
包含YUI Base、Get和Loader模块。
核心:核心模块为YUI3下游组件提供通用依赖。该模块包括OOP模块(提供对象继承机制,DOM等绝大多数模块直接或间接依赖OOP)、Dom模块(提供基础的DOM操作与选择类)、Node模块(基于Dom模块,提供文档节点的创建、选择和操作等方法,相比YUI2有了很大的精简)、Event模块(提供屏蔽浏览器差异的事件注册和响应机制,同时提供高级自定义事件的功能)
组件框架:组件框架基于YUI核心框架。从下到上依次基于Attribute、Base、Widget模块组成;同时提供Plugin模块实现灵活扩展。组件框架是建立和扩展组件的基础。
组件:YUI3提供的高度模块化可复用的组件,根据程序按需引入相关模块即可。YUI3目前提供了Animation、Drag and Drop、IO、Cookies、JSON 等基础组件模块。
页:
[1]