YUI(Yahoo User Interface)介绍

现在的位置: 首页 > 综合 > 正文

YUI(Yahoo User Interface)介绍

2013年10月07日 ⁄ 综合 ⁄ 共 3446字 ⁄ 字号小中大 ⁄ 评论关闭

在Web 2.0中，SaaS前端不再是一个简单网页。它可以拥有非常Cool的界面，它也可以拥有非常复杂的逻辑。现在，构建一个复杂的SaaS前段界面主要有下面三种技术路线：

DHTML（HTML，CSS，Javascript）
Flash Platform
Silverlight Platform

在选择DHTML技术路线的时候，Javascript/CSS就扮演着非常关键的角色。YUI是由Yahoo提供一个功能非常丰富的Javascript函数库。它在DHTML开发中扮演的角色就类似于微软FCL在.NET平台中的角色。自从两年前开始使用YUI来开发我们项目，本人对YUI有了一定的了解。这篇博文将简单的介绍YUI的基本情况

基本情况

YUI Logo

YUI是由雅虎工程师们（现在已经成为雅虎开发者网络YDN中的一个关键组成部分，并得到了雅虎的合作创始人杨志远的鼎力支持）发起的旨在构建一个富交互的Web应用程序的函数库。它遵循BSD License来开发自己的软代码。基本上都可以做为个人和商业开发应用。由于其拥有非常丰富的组件和功能，它经常用于企业级网站的开发。其实雅虎现在的主页就是基于YUI进行开发。使用YUI来开发的成功案例有下面一些网站：

http://www.yahoo.com
http://www.igoogle.com (Google 用了YUI中的Grids CSS）
http://showroom.labs.autodesk.com (本人参与开发的一个网站，完全基于YUI进行开发的）

你还可以通过YUI的官方博客了解到更多的YUI成功案例。这个博客会每个月发布一篇文章列举这个月比较成功的YUI案例。

从2006年开始发布YUI开始，雅虎已经发布了多个主要版本。在2009年9月份，雅虎发布了最新的YUI版本－－YUI 3.x。在这个新的YUI版本中，雅虎对YUI库进行了一个非常彻底的重构，并且引入了很多新的功能，比如支持插件开发，提供小巧的基础库（现在大概6.2K）。相信这个也是雅虎通过学习很多其他JS函数库（如JQuery）的成功经验后吸收进入的YUI中的。毕竟YUI以前版本的体系结构是在5年前设计的。在这个5年时间里面，Javascript函数库设计领域已经出现了很多非常好的设计理念。在接下来的一节我将介绍一下YUI 3.x的整个体系结构。

组织结构

整个YUI 3.x函数库包含下面几个独立的层次（有低层向高层的顺序）：

YUI Seed层：这是一个使用YUI函数库必须要包含的层次。它包含基本的YUI名字空间定义、动态加载JS/CSS资源的机制以及进行模块依赖性判断的功能。任何一个网站要想使用YUI函数库的功能，都得包含这个层次。然后利用这个层次提供得功能动态加载其他需要得模块。这个层次定义在一个非常小(大概6.2K)JS文件（YUI-min.js）中。所以加载这个层次的速度非常快。这个层次包含下面三个模块
- YUI Base：定义基本的YUI名字空间和全局函数
- Get：提供动态加载JS和CSS资源的功能
- Loader：包含所有YUI模块的基本元信息和依赖关系计算器，并利用它们来动态加载其他所有的YUI模块。在这个加载过程中，Loader会尽可能的压缩Http请求的个数以提高动态加载的速度
YUI Core层：这个层次提供作为一个JS库必须要包含的基本功能，如对于DOM元素和DOM树进行操作的功能，面向对象编程的功能等。另外YUI在这个层次还提供一个非常重要的机制－－事件机制。YUI其他的很多模块都依赖于事件机制。用户和可以利用YUI提供的事件机制来编写事件驱动程序。我认为事件机制是YUI中非常独特的部分。利用它可以大大方便我们编写低耦合JS模块。当然事件机制也会引入一定的性能开销。下面列出这个层次包含的基本模块
- Node：定义了对基本DOM元素的包装类。它包含Node Base，Node List， Node Style和Node Screen类。
- DOM：定义了对DOM树进行操作的基本类。比如DomBase，DomStyle，DomScreen。另外它还包含了一个对DOM树进行查询、筛选的关键类－－Selector。
- OOP：提供面向对象的JS开发模型。
- Event：提供基本的事件机制。
YUI 组件框架（Component Framework）层：这层定义YUI组件的框架，为所有基于YUI的组件（包括雅虎自己开发和第三方开发）提供了一个统一的平台。程序员可以利用这个平台来开发低层辅助工具(Low-level Utilities) 或者高层UI(Hight-level UI)。这个平台提供下面一组接口和规范：
- Attribute：该模块提供统一的属性设置和查询的机制。对于YUI的任何组件，都可以利用这套机制来添加自己的属性。属性是YUI中的一个非常核心的概念。简单的说，它其实就是JS类中的以成员变量。但是YUI对这些成员变量提供了一组非常丰富和灵活的操作方式。比如你可以在设置这些成员变量的时候触发某些事件或者调用某些注册好的函数。
- Base：该模块提供所有YUI组件最基本的接口和规范。它是所有YUI组件的基类，提供如组件属性设置/查询和事件相关的接口。
- Widget：该模块定义了一个基本的UI组件接口和规范。它构建在Base模块之上，提供UI组件的生命周期管理和相关的属性。
- Plug-in：这个模块定义了插件开发的基本结构和规范。比如Plugin名字空间等等。任何YUI的插件都是基于这个模块开发的。
YUI Components层：这层包含所有YUI自己提供的UI组件和辅助类。它是YUI中内容最多的部分，包含下面部分：
- Amination：该模块包含各种雅虎自己定义的动画效果，它们被经常用于构建各种Cool的UI界面！该模块还包含一个Amination的Plug-in类用来给第三方进行自定义的动画效果开发。
- Drag and Drop：该模块包含各种雅虎自己定义的拖放效果，它也是很多UI界面的必需品。同样，该模块也包含一个给第三方开发拖放效果的Plugin基类。
- Cookie：该模块是用于对Cookie进行读写操作和管理的辅助类。
- JSON：该模块用于JSON格式处理的辅助库。由于JSON格式的简单、易用性。现在很多客户端和服务器端的通讯都基于JSON格式。所以对JSON格式的处理成为各个JS库的必备模块。它主要包含生成JSON字符串和解析JSON字符串两个类
- IO：用于网络通信的IO模块。对应Web程序而已，它的IO处理主要就是和后台服务期通信功能。这个模块包含AJAX、SWF-based 跨域请求和文件上传功能。
- 其他模块：随着YUI 3.x的发展，雅虎和第三方开发商会添加越来越多的YUI组件

实例解说

在解释完YUI 3.x体系结构后，我们可以用来自YUI官方博客中的一个例子来解释怎样快说使用YUI 3.x。

例子：如何让HTML页面上的一个元素拥有拖放效果

第一步：在HTML页面中包含最基本YUI Seed层代码

第二步：动态添加拖放效果模块到我们的HTML页面并应用到相应的元素上面

<div id="demo">I'm draggable.</div>

<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script>
YUI().use('dd-plugin', function(Y) {
    Y.one('#demo').plug(Y.Plugin.Drag);
});
</script>

完成上面两步就可以让这个HTML页面中ID为“Demo"的DIV元素拥有拖放效果了。从这个例子也可以看出YUI 3.x的易用性比以前的版本已经有很大提高了。前端开发者的学习曲线不会那么陡峭。

参考文档

最后，我列出一组链接。大家要是对YUI感兴趣，我相信大家能从这里得到更多细节