当前位置: 代码迷 >> Web前端 >> 【YUI源码分析】YUI源码初始简单分析
  详细解决方案

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

热度:189   发布时间:2012-10-26 10:30:59.0
【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 组件则是基于这些基础上面发展而来。

?

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

1 楼 onlylau 2010-08-08  
发觉最近JavaEye上做广告的越来越多呀,这可不行呀,得好好管管
2 楼 tyc1920 2010-11-26  
YUI有哪些优点啊,跟JQuery相比有哪些区别。
3 楼 every_best 2010-11-29  
tyc1920 写道
YUI有哪些优点啊,跟JQuery相比有哪些区别。

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