【YUI源码分析】YUI源码初步简单分析

一般一个框架的设计要包含很多个方面，像：支持标准和跨浏览器、事件模型等功能。从框架的设计层面上来分析这个框架。

先列举设计应用框架的 n 点（摘自《 javascript 王者归来》）： 1, 框架的自描述 2 ，基础接口和语义型代码 3 ，核心对象的原型扩展 4 ，简单方法？可以理解为通用方法 5 ，名字空间 6 ，支持标准和跨浏览器 7 ，事件模型 8 ，应用模式 9 ，提供 Ajax 组件 10 ，内存管理和其他（比如调试工具） YUI 有提供 YUILogger 来得到调试时信息，以及 YUIProfileView 监控性能问题。 YUI 不仅提供了 js 框架，也提供了 css 框架。

 

框架的自描述 ，描述框架本身，在 YUI 的模块管理上有使用到，在 YUI 2.8 的每个模块源码结尾有代码： YAHOO.register("element", YAHOO.util.Element, {version: "2.8.0r4", build: "2449"}); 呃，个人浅见。 YUI 的核心模块 YAHOO Global Core 有一个 static class YAHOO_config 通过这个类可以对 YUI 框架进行定制，比如说 YAHOO_Config 的 injecting 属性，若设置为 true ，则类库会在 window.onload 以后动态的加载。

 

基础接口和语义型代码 ，在 YUI 的核心模块 YAHOO Global Core ，提供了名字空间定义函数、注册模块函数、类型检测函数等等。

 

核心对象的原型扩展 ：先仔细定义下 JavaScript 实现，一个完整的 JavaScript 实现是由以下 3 个不同部分组成：核心 ECMAScript— 描述 Java Script 语言的语法和基本对象，文档对象模型 DOM ——描述了处理网页内容的方法和接口，浏览器对象模型 BOM ——描述了与浏览器进行交互的方法和接口。

详细内容： http://www.w3school.com.cn/js/pro_js_implement.asp

关于 ECMA Script 各个浏览器都遵循着规范；各个浏览器对于 Dom 也有不同的 level 支持程度，不过也总算是有一个标准，从这个开始有差异；可是对于 BOM( 浏览器对象模型 ) 而言，没有相关的 BOM 标准，每种浏览器都有自己的 BOM 实现。

同样关于核心对象也分类：

1，JavaScript 的核心有丰富的内置对象，除了 Object 基本对象之外，最常见的有 Math 对象、 Date 对象、 Error 对象、 Array 对象、 String 对象和 RegEx 对象

2，Dom 对象；

3，Bom 浏览器对象模型： Window 、 Document( 一般引用到 document) 、 Navigator( 浏览器总体信息 ) 、 Screen 对象 ( 显示器分辨率有关 ) 、 History 、 Dialog 、 Form 、 Frame 、 Status 、 Location( 以上对象针对 ie 浏览器 )

 

接下来看看 YUI 对这些核心对象的扩展：

Dom 对象：提供 YAHOO.util.Dom 对 document 对象进行封装，并提供其他的对象对 dom 对象提供样式修改方法，比如增加 color ；事件模型 EventProvider ；对 javascript 的 date 对象进行封装，有 YAHOO.widget.DateMath 对象 ;YAHOO.util.History 对 history 对象的封装等等

在这些封装中 YUI 框架同样也在致力支持标准和跨浏览器。

 

通用方法： YAHOO.lang 提供了很多通用的简单方法，比如 extend(),hasOwnProperty() 等等。 YAHOO 对象也很多。比如 namespace. 比如 register 。

 

名字空间 : 支持标准和跨浏览器： 略。

 

事件模型： YAHOO 的核心库中有 Event.js 等几个 js 文件对 event 事件进行封装。提供了以下几个 class ：

    * CustomEvent    * Event    * EventProvider    * KeyListener    * Subscriber

 

AJAX 组件： YUI 有一个模块是 connection 在此处对 AJAX 进行封装。

 

 

根据 YUI 文档中的说明，以上框架的设计基本已在核心模块，外加一些是在 Utility 模块中实现且达到效果。

而YUI的其他特性和web ui 组件则是基于这些基础上面发展而来。

 

以上个人浅见，有错误欢迎指正。

评论

3 楼 every_best 2010-11-29  

tyc1920 写道

YUI有哪些优点啊，跟JQuery相比有哪些区别。

  没使用过jquery 不敢做这样的对比比较。
  在淘宝ued里面有一篇文章翻译国外的人 对比jquery和yui3 很是不错，建议去看看。
  个人浅见：觉得YUI更加的优雅，如果是学习js深入的话，研究YUI更加好一点。而jquery 更加的通用，插件多，方便使用。

2 楼 tyc1920 2010-11-26  

YUI有哪些优点啊，跟JQuery相比有哪些区别。

1 楼 onlylau 2010-08-08  

发觉最近JavaEye上做广告的越来越多呀,这可不行呀，得好好管管