阅读Ext

    从Library的角度去看,Ext和Prototype JQuery YUI没有太大区别,但它有它的优点,完整的OO支持、成熟的通用widgets并支持主题、良好的扩展性、快速的更新发布新的widgates、社区也很热闹。最重要的是我个人比较喜欢它。
  
  首先打开源代码看一下它的结构: 从core开始看吧
  
  Ext = {version: '2.0-beta1'};
  这一行代码是定义一个变量Ext,没有使用var表明作者的意思是要将它定义为全局的。等号右边是Json(Javascript object Notation)格式,等效于以下代码:
  Ext = new Object();
  Ext.version = '2.0-beta1';
  
  window["undefined"] = window["undefined"];
  这行代码需要说明的是window和Ext不同,它是内置的Borwser对象,无需代码声明。和C#等编译类语言不同,在js中当一个对象存在以后,我们可以在任何时候对它的成员进行修改。对像成员的访问有两种方式:一是点记法(如Ext.version),二是索引法Ext["version"]。索引法看上去麻烦,但实际上却很灵活,而且在有些场合(如下面将要提到的namespace override等函数)是不可替代的。如遍历对象的成员(属性集合中的每一项)。undefined在IE(js)5.5之后的版本中才有,这里的这种写法就巧妙的兼容了旧版本的浏览器。理解了索引法对成员的访问后,来看一下Ext.apply方法。
  
  Ext.apply = function(o, c, defaults){
   if(defaults){
   // no "this" reference for friendly out of scope calls
   Ext.apply(o, defaults);
   }
   if(o && c && typeof c == 'object'){
   for(var p in c){
   o[p] = c[p];
   }
   }
   return o;
  };
  
  这是一个相当关键的方法,它和Prototype中的Object.Extend是一样的(这里没有用extend是因为它被用到继承Ext.extend上面了),实现了对象扩展的功能,即从对象c拷贝成员的功能(如果有默认配置,则先从默认配置扩展)。Ext有了这个方法后,紧接着用这个方法对自己进行了丰富的扩展。扩展的时候用了下面这种写法:
  (function(){var i=100;alert(i)})()
  这种写法就是传说中的匿名函数,它的好处是函数内部定义的对象在函数外面永远无法访问,除此之外这个匿名函数也是不可被其它代码访问的,即使得对象之间不容易被命名污染(在js中很多错误是由于对象命名冲突引起的)。按照通常的写法我们会这样写function a(){var i = 100;alert(i)};a();这样写就留下了一个对象a(在不要再用的时候就成了内存垃圾)。回到Ext对象,它给自己添加了几个很重要的成员:
  
  namespace 命名空间,js的命名空间其实就是对项链。如传入"a.b.c",则生成三个对象,并链接起来。需要说明的是Ext.namespace("a.b.c")会出错,因为它内部把a指向了arguments,这样生成的对象在namespace的外边是不存在的。 在以后的文章里,会以Ext扩展的命名空间来逐一阅读理解。
  applyIf(o, c) 将对象c中非未定义成员扩展到o上
  addBehaviors(o)
  id() 生成唯一对象ID,
  extend 对函数扩展,即类型继承。这是一个至关重要的成员,整个框架中类型的派生都离不开它的支持。
  getDom 与Prototype的$一样
  type
  removeNode
  destroy
  num
  callback
  combine
  each
  urlDecode
  urlEncode
  
  
  Js内置的类型有object string function number boolean array date
  
  下面是Ext对内置对象和其原型的扩展
  
  Function.prototype
  createCallback 将当前函数应用到指定的对象上,并返回新的函数供调用执行
  createDelegate 也是返回一个新函数,差异在以后的章节详细阐述
  defer
  createSequence
  createInterceptor
  String
  escape 转义'和\符号
  leftPad 很想C#的PadLeft PadRight,自己写的时候往往忘记考虑传入空字符串,会造成死循环
  format 格式化字符串,类似C#的String.Format
  String.prototype
  toggle 交换两个,用于代替三值表达式
  trim 去掉空格
  Number.prototype.constrain
  indexOf
  remove
  Array
  indexOf
  remove
  Date.prototype.getElapsed 获取当前时间与该对象之间的毫秒数 
    

--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------

 

 一般的,如果我们定义一个类,会定义一个function对象,然后将公用方法写到其原型上,例如:
  var Tiger = function(){}
  Tiger.prototype.Hunting = function(){}
  
  但是要建立一个完善的框架或者类库,没有继承帮忙,组织代码将是一件非常辛苦且难以管理的工作。Js中的类是function对象,实现继承,主要要将子类的原型设置为父类的一个实例(这样子类就用有了父类原型的所有成员),并重新将子类原型的构造器设置为子类自己。如以下代码所示:
  function Animal(){}
  function Tiger(){}
  Tiger.prototype = new Animal()
  Tiger.prototype.constructor = Tiger
  
  实现继承并不难,将上面的Animal和Tiger参数化封装为一个方法就可以实现(当然实际应用中就要复制一些了),代码如下:
  function Extend(subFn, superFn){
   subFn.prototype = new superFn()
   subFn.prototype.constructor = subFn
  }
  Ext作为一个优秀的框架,当然也少不了继承的实现。如前一篇文章所谈到的,现在让我们一行行代码理解Ext.extend
   extend : function(){
   // inline overrides
   var io = function(o){
   for(var m in o){
   this[m] = o[m];
   }
   };
   return function(sb, sp, overrides){
   if(typeof sp == 'object'){
   overrides = sp;
   sp = sb;
   sb = function(){sp.apply(this, arguments);};
   }
   var F = function(){}, sbp, spp = sp.prototype;
   F.prototype = spp;
   sbp = sb.prototype = new F();
   sbp.constructor=sb;
   sb.superclass=spp;
   if(spp.constructor == Object.prototype.constructor){
   spp.constructor=sp;
   }
   sb.override = function(o){
   Ext.override(sb, o);
   };
   sbp.override = io;
   Ext.override(sb, overrides);
   return sb;
   };
   }()
  
  本来只有两行代码就可以实现的继承变成了近30行,Ext都做了什么呢?通常情况下只传入两个类型的话(subFn和superFn),上面的代码将简化为
   extend : function(){
   // inline overrides
   var io = function(o){
   for(var m in o){
   this[m] = o[m];
   }
   };
   return function(sb, sp, overrides){
   var F = function(){}, sbp, spp = sp.prototype;
   F.prototype = spp;
   sbp = sb.prototype = new F();
   sbp.constructor=sb;
   sb.superclass=spp;
   sb.override = function(o){
   Ext.override(sb, o);
   };
   sbp.override = io;
   Ext.override(sb, overrides);
   return sb;
   };
   }()
  
  定义一个空函数,将其原型设置为sp的原型spp,其实F就是sp的一个替身,理解的时候可以认为就是sp。将子类sb的原型设置为F的一个实例,然后再将其原型的构造器设置为自己sb,为了方便找到父类sp,在子类sb上添加了一个superclass属性为父类sp的原型spp。为了方便扩展属性,在子类sb上添加了属性重写的override方法,也在其原型上添加了override方法(这样其所有实例对象就可以从一个对象重写现有属性了)。
  
  到这里算是对继承有了一些了解(不到位的地方在以后的阅读中继续加强)。好了,有了继承的支持,我们就可以加速类型的扩展了。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值