YUI学习总结（1 ）

  

版权声明 ：未作特别说明的内容可以转载，转载时请务必以超链接形式标明文章 原始出处 和作者信息及本声明。本文地址 ： http://blog.csdn.net/xujiaxuliang/archive/2009/10/21/4708353.aspx    

 

看了 YUI2 有一段时间了，在这纪录一下自己的一些总结 。欢迎大家有不同的见解，可以给我留言。 

再看英文文档及原代码之前， 我试着 搜了下网络中写的比较好的一些 YUI 总结：

在这里列出（在些也感谢你们的分享）：

• 有关于 yahoo.js 文件的总结： http://www.xujiwei.com/blog/?id=892  

• 已翻译的部分文档http://lab.gracecode.com/yui-doc-zh/docs/

• ..( 不断的寻找中 )

先讨论下YAHOO Global Object中的一些全局功能函数 ：

1. YAHOO.lang 中判断类型的各种函数：

背景知识：

1，typeof是检测能力最弱的一种检测方式：typeof对类型的检测只返回这几种结果：number、string、boolean、object、function及undefined。对于基本数据类型的检测还是可以满足的，但对于对象类型检测就有问题了，如果你测试typeof null、typeof {}、typeof window、typeof []、typeof new Date()发现他们都返回object

2，instanceof 存在iframe或其他不同页面对象类型判断时就会失效。

3，null 与 undefined 区别： null 是js的保留字（独一无二的值），可以理解为无对象（因为typeof null =='object'），当null在布尔环境下时，转为false， 当在数字环境时转为0，当在字符串环境时转为‘null’；undefined是js实现的全局变量，是指未声明的变量，或者是使用已经声明但未赋值的变量，或者是使用了一个并不存在的对象属性；当undefined 在布尔环境下时，转为false， 当在数字环境时转为NaN，当在字符串环境时转为‘undefined ’；

 联系：null= = undefined 为true；

 

 

而YUI 对 null, undefined, boolean, number, array, string, function,  object 八种类型进行了判断。 内部代码实现是通过使用了 typeof 运算符 ,  Object.prototype.toString.call(), 及相互函数之间的调用来进行类型判断。

分别总结如下：

(1) typeof: 为了从对象中区分出基本类型的。但数组是 Object ， 函数是 function ， undefined 是 undefined ， null 是 object。 相应知识链接： 这里
(2) Object.prototype.toString.call ：是指使用最原始的 Object 的原型对象 prototype 的 toString 方法来判断输出的字符串。 因为最原始的 Object 的原型对象 prototype 的 toString 方法返回的字符串总为： [object ** ]  ，（其中 ** 可代表： Array  或 Function 或 Object 等 ) 。
其他相关知识可以参考：http://www.ajaxbbs.net/post/webFront/JS-Array-type-check.html

各函数主要代码：

isNull:  {  return o === null ;}

isUndefined : {  return typeof o === "undefined"   }

isBoolean: { return typeof o == "boolean" }

isNumber: {return typeof == "number" } //isFinite 来检测数字是否为有限的，即不是 NaN、负无穷或正无穷

isArray: { return ( Object.prototype.toString.call(o) =="[object Array]" ) }

isString: {return typeof o == "string"; }

isFunction: {return typeof o === "function" || ( Object.prototype.toString.call(o) =="[object function]" ) }

isObject:{return o&&( typeof o =="object"||isFunction(o) ) }  //认为Object 与 Function 都是 Object。

2, YAHOO.lang.extend ():

实现一个函数类的prototype(这里把function称为函数类)对另一个函数类的prototype的继承，且有可选的用来重写的属性/方法。 函数签名为：extend(subc, superc, overrides) ，

其中参数：subc为需要扩展的函数(function)，superc为被继承的函数 (function) ， overrides为要重写的属性/方法

在 extend 方法中，首先构造了一个空函数，并使空函数的prototype指向superc的prototype，再new 该空函数对象并赋值给subc.prototype。（为什么不直接new superc()，这样就运行了superc的函数构造体，可能父类的构造函数需要参数时创建父类实例时会出错，如父类的构造函数运行了this.name="xujia"）。接着修改subc.prototype.constructor指向自己，即subc函数，以免创建子类实例时会丢失 constructor 属性。 然后还特别给subc.prototype增加属性superclass，并指向为superc.prototype。这样就能得到了整条的父子关系继承链。

代码如下： var Fun = function(){}; Fun.prototype = superc.prototype; subc.prototype = new Fun(); subc.prototype.constructor = subc; subc.superclass=superc.prototype;

接着进行多个属性/方法的重写：主要利用for in 枚举overrides对象的属性或方法p，再利用hasOwnProperty()判断，如果p是overrides对象自己本地属性/方法（不是从prototype原型中得到的），就重写subc.prototype中的属性/方法。最后考虑IE不能for in 枚举出overrides中可能已被重写的Object.prototype中的原生native函数。

代码如下：

var pro; if(overrides) { for(pro in overrides) { if(YAHOO.Lang.hasOwnProperty(overrides, pro)) { subc.prototype[pro] = overrides[pro]; } } L_IEEnumFix( subc.prototype, overrides ); }

 

从代码中可以看出，我们定义子函数类就可以：

function superc(name) { this.name = name; } function subc() { //利用之后继承得到的原型链来调用父函数类的构造器函数 this.constructor.superclass.constructor.call(this,name); } YAHOO.lang.extend(subc, superc);

3，YAHOO.lang.augmentObject():

实现了用一个对象source的属性/方法对另一个对象result的扩展，使obj1也能拥有自己没有但在obj2中有的属性/方法。而且可以通过多个可选的参数来处理重写。通常用于合并配置对象与默认配置对象。

函数的声明为：augmentObject(r, s, oneProperty,two, ...)

可以看出augmentObject 有三种调用方法，分别是：

augmentObject(result, source)，一般情况下用些方法，从 source 引入 result 中没有的属性；

augmentObject(result, source, override)，override 设置是否覆盖，如果是 true 的话，那么 source 中所有属性会覆盖 result 中已有的属性；

augmentObject(result, source, ovrride_name, ...)，指定要覆盖属性的列表，source 参数后为要覆盖属性名称的列表(且即使result中没有而source中有的属性或方法也不扩展)，例如覆盖 result 中的 toString 和 valueOf，那么可以调用 augmentObject(result, source, "toString", "valueOf"）来实现。

源代码中造成这三种不同分支的原因如下：

 

var p; if(arguments[2]&&arguments[2]!=true) { //only absorb the specified properties //只对指定要重写的属性/方法，进行从source中对result的扩展。 } else { for(p in source) { if(arguments[2]||!(p in result)) { //take everything, overwriting only if the third parameter is true } } L._IEEnumFix(result, source); }

当然合并对象的最后同样调用了 _IEEnumFix 方法来修正 IE 中不枚举与内部属性同名属性的 bug。

这里例子就不取了，可以看YUI的examples。

4，YAHOO.lang.augmentProto():

 

 相应源代码如下：

function augmentProto(r, s) { var i, a = [r.protorype, s.prototype] for(i=2; i<arguments.length; i++) { a.push(arguments[i]); } YAHOO.lang.augmentObject.apply(this,a); }

因此从这里看出，我们可以用extend或augmentProto函数来给一个函数类扩展方法/属性。但它们两者还是有区别的，主要体现在instanceof运算上，测试如下：

function Foo() {} function Bar1() {} YAHOO.lang.augmentProto(Bar1, Foo); function Bar2() {} YAHOO.lang.extend(Bar2, Foo); var b1 = new Bar1(); var b2 = new Bar2(); alert(b1 instanceof Foo) // FALSE alert(b2 instanceof Foo) // true

PS：有关javascript中instanceof运算符的执行原理，及它与prototype的关系的了解，可以看我的曾写过的一篇总结。

 

augmentProto 与 augmentObject 调用方式和实现原理基本相同，只不过后者是处理对象，而前者是处理函数的 prototype，它是通过使用两个参数的 prototype 来构造一个参数列表，传递给 augmentObject 对象来实现 augmentProto 的功能。