`
sailorlee
  • 浏览: 42730 次
  • 性别: Icon_minigender_1
  • 来自: 河北唐山
最近访客 更多访客>>
社区版块
存档分类
最新评论

阅读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方法(这样其所有实例对象就可以从一个对象重写现有属性了)。
  
  到这里算是对继承有了一些了解(不到位的地方在以后的阅读中继续加强)。好了,有了继承的支持,我们就可以加速类型的扩展了。 

分享到:
评论

相关推荐

    Ext框架开发文档及ext-core.js

    EXT框架是Web应用程序开发中的一个强大工具,尤其在构建用户界面方面表现卓越。EXT的核心库,ext-core.js,是一个轻量级的JavaScript库...对于初次接触EXT的开发者,阅读EXT2.0_API.chm中的文档是快速上手的关键步骤。

    EXT3.3学习文档

    通过阅读EXT3.3的学习文档,你可以深入理解这个文件系统的工作原理,从而更好地在Linux环境下进行系统维护和性能调优。同时,对于系统管理员来说,了解EXT3的特性有助于解决实际工作中遇到的问题,提高工作效率。...

    ext3.3API中文

    EXT3,全称为“Third Extended File ...通过阅读EXT3.3 API中文版的CHM文档,开发者可以深入理解EXT3的内部结构,从而更有效地利用这个强大的文件系统。对于那些希望提高Linux技能的人来说,这是一个非常有价值的资源。

    Ext Jsp 聊天室 jschat

    对于初学者,可以通过阅读Ext JS官方文档,学习其API和最佳实践。同时,了解JSP的基本语法和生命周期,以及如何与Servlet协同工作,也是掌握该项目的关键。 通过研究和实践`jschat`项目,开发者不仅可以深化对Ext ...

    EXT3.0中文API文档

    在阅读EXT3.0中文API文档时,开发者应该重点了解各个类的构造函数、常用属性和方法,以及如何通过配置选项定制组件。此外,通过实例代码和示例,可以更好地理解和掌握EXT3.0的用法。 总的来说,EXT3.0中文API文档是...

    Ext 教程详解 适

    - 揭示源代码:通过阅读EXT的源码,你可以学习到如何扩展已有组件,或者创建自定义组件。 - 发布EXT源码时的一些细节:如果你打算对EXT进行修改并分享,了解源码发布规范和注意事项是非常必要的。 - 我应该从哪里...

    EXT2 chm手册

    通过阅读EXT2 chm手册,用户可以深入理解EXT2的工作原理,提高Linux系统管理技能,尤其对于需要处理大量文件操作和维护稳定性的应用场景,EXT2的知识显得尤为重要。尽管EXT2现在已经被更新的EXT3和EXT4所取代,但它...

    EXT-GWT(GXT)2.2.3 API DOC.zip

    通过阅读EXT-GWT(GXT) 2.2.3 API DOC.chm,开发者可以了解每个类和方法的详细说明,包括参数类型、返回值、异常和使用示例,从而更好地理解和使用EXT-GWT库。同时,文档中的搜索功能使得开发者能够迅速找到所需信息...

    Ext框架简介.ppt

    EXT框架是一种基于JavaScript的开源Ajax框架,主要用于构建具有丰富用户界面的...对于新手来说,从阅读EXT的API文档、研究示例程序和实践简单的HelloWorld开始,逐步深入理解EXT的组件和API,是掌握EXT框架的有效途径。

    ext说明文档和查阅手册

    通过阅读EXT 2.2 API中文文档,开发者不仅可以了解每个组件的用法,还能深入理解EXT的设计理念和工作原理,从而更好地利用EXT进行Web应用开发。无论是初学者还是经验丰富的EXT开发者,这份文档都是不可或缺的参考...

    ext-3.0框架源码

    EXT 3.0框架是Sencha公司开发的一...通过阅读EXT 3.0的源码,开发者不仅可以深入了解其内部工作原理,还能学习到优秀的JavaScript编程实践,提升自己的前端开发技能。同时,对于进行二次开发或定制EXT组件也大有裨益。

    EXT中文手册(PDF)

    通过阅读EXT中文手册,开发者不仅可以学习EXT的基本用法,还能深入理解其工作原理,从而在实际项目中更高效地利用EXT框架。无论你是前端新手还是经验丰富的开发者,这份手册都将是你开发EXT应用的重要参考资料。

    ext2.0中文API

    2. **Linux内核源码**:阅读EXT2相关的源代码,有助于理解其实现细节。 3. **在线教程和论坛**:如LinuxQuestions.org、Stack Overflow等,可以找到丰富的讨论和示例。 4. **书籍**:如《Linux文件系统原理与实现》...

    ext详解

    EXT是一个流行的JavaScript库,主要用于构建富互联网应用程序(RIA)。...开发者可以通过阅读EXT 3.0 中文.CHM的文档,深入理解EXT的API和使用方法,结合EXT-3.3.1中的示例和源码,进一步提升EXT的开发技能。

    EXT 中文手册 源代码

    通过阅读EXT中文手册的源代码,开发者可以学习到如何配置和使用`grid`组件,如何添加和管理`filter`,以及如何利用`template`高效地生成动态内容。这不仅有助于提高开发效率,也有利于提升应用的用户体验。 在实践...

    ext row 编辑器 源码

    阅读EXT Row Editor的源码时,首先理解其整体架构,然后逐个解析关键类和方法,最后通过实际运行示例代码来观察和调试,这样可以更好地理解和掌握其工作原理。 总之,EXT Row Editor的源码分析是一项深入学习EXT...

    Ext3.2中文API文档

    通过阅读Ext3.2中文API文档,开发者能够深入了解每个组件的用法,学习如何配置、操作和扩展这些组件,以满足特定项目的需求。同时,文档还可能包含示例代码和常见问题解答,帮助开发者快速上手并解决遇到的问题。...

    Ext2.0英文API文档

    在阅读EXT_API.chm文件时,你可以通过索引或搜索功能找到特定的类、方法或属性,了解其用法和参数。此外,文档通常会包含示例代码,帮助你更好地理解如何在实际项目中应用API。 总的来说,深入学习和掌握Ext2.0 API...

    静态ext树

    你可以通过阅读Ext JS的源代码或者官方文档来获取更多细节。例如,研究`Ext.data.TreeStore`如何加载和管理树的数据,`Ext.tree.View`如何渲染树的视图,以及`Ext.tree.NodeInterface`如何提供节点操作的方法。 ...

    ext教程、ext核心API 、ext中文教程

    通过阅读这些教程,你可以逐步掌握EXT的开发技巧,从而构建出专业级别的Web应用。 总的来说,EXT作为一个强大的前端框架,其教程和API的学习对于想要从事富客户端Web开发的程序员至关重要。通过深入学习EXT,不仅...

Global site tag (gtag.js) - Google Analytics