`
gkuiyj
  • 浏览: 90813 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

EXT 中 类的继承

阅读更多
深入剖析ExtJS 2.2实现及应用连载  版权所有,转载标明出处和作者及版权信息

作者:彭仁夔 QQ:546711211  Blog:http://www.cnblogs.com/jxnuprk或htttp://jljlpch.iteye.com

在javaScript中,面向对象的类是通过函数来模拟的。函数的prototype中的方法和属性可以看作是类的实例方法和属性。函数的的方法和属性可以看作是类的静态(类)方法或属性。对于函数的继承,当然也就是类的继承。

函数的继承和对象的继承差别其实也不是很大。对象的继承是复制到对象的内部,而函数的继承则是把数据复制到函数的原型中。Ext.override方法就是完成这项工作。它只是简单的复制,没有理会继承者与被继承者之间的关系。还有一些问题是值得考虑的,如果没有给定继承者,是不是要构建一个继承者,让其继承被继承者的所有功能呢?继承者是不是也应该有继承的能力呢(为其提供继承的方法)?Ext.extend解决了这样问题,该函数是Ext类库的基石。
Ext.extend函数分析

Ext.extend函数仅仅当作extend的功能来看待是有点以偏概全的,我们完全可以把看作能继承的构建器。它的功能有点像prototype1.6中类的构建器(Class.create)。在Ext中,我们可以把Ext.extend看作是组件的构建器。如果没有指定子类,它会在继承的同时生成子类并返回。Ext组件树的应用就是完全建立在extend函数的基础之上。而Ext.extend又可以在继承的过程中构建一个新组件并返回。当作组件的构建器一点也不过份。

通过Ext.extend来实现的组件,我们可以通过类的继承链来访问其父类的方法或构建函数,如Office.CompanyPanel.superclass.constructor.call(this, this.meta);在通过extend实现的组件,其在类的关系上已经形成了链条的关系。我们可以通过这个关系访问到其父类。

代码清单3.2                                                   Ext.extend的源码

extend : function(){

   //io,oc是采用了闭包函数的特点,减少了函数的变量的定义,只有内部能访问。

     var io = function(o){ for(var m in o){this[m] = o[m];} };①

     var oc = Object.prototype.constructor;

     //sb,sp是函数类型(即类),overrides是对象类型   

    return function(sb, sp, overrides){                           ②    

      //说明只传入了两个参数。省去sb,sb函数是通过本函数新生成的

        if(typeof sp == 'object'){                                  ③

           overrides = sp;

           sp = sb;

      //如果overrides中含有constructor方法时,它就是sb子类的构造函数。

      //否则就新建一个构造函数,传入参数调用其父类的构造函数。                

         sb = overrides.constructor != oc ?

overrides.constructor : function(){sp.apply(this, arguments);};

         }

        var F = function(){}, sbp, spp = sp.prototype;

         F.prototype = spp;              

        //采用new F()新建一个含有所有sp.prototype中的功能的对象。

        //这里做是为了改变sb.prototype中不会改为sp.prototype

         sbp = sb.prototype = new F();                            ④

         //标识sb的实例对象中的constructor为sb函数。

          sbp.constructor=sb;              

          //通过这里的实现,我们就可以类方法的形式去调用其superclass中的方法。

           sb.superclass=spp;                                       ⑤          

          //改变父类实例对象中的constructor标识,使其指向自身的构建函数

           if(spp.constructor == oc){ spp.constructor=sp; }   ⑥

            //给sb注册一个类方法override.

            sb.override = function(o){Ext.override(sb, o); };

             //sb实例对象中override方法

             sbp.override = io;                                     ⑦                   

             //把overrides中的方法拷到sb的prototype中,使实例拥有该方法

             Ext.override(sb, overrides);                         ⑧

             //为子类加上一个类方法:extend

              sb.extend = function(o){Ext.extend(sb, o);};     ⑨

              return sb;

            };

        }()                                                            ⑩



在上面代码中⑩,我们可以发现这个函数是立即运行的函数。也就是说Ext.extend实际上是②处的函数。那么它为什么要这样做呢?完全可以把①处的两个变量放在②处的函数内部。

因为①处相对每个继承的应用,它们都是不变的。放在函数内部的话,那次每次extend,都要生成这两个变量,用完之后销毁,影响性能。也可以把它们放在Ext的命名变量中,这样做的不好之处在于外部可以引用这两个变量,而我们想这两个变量只能在Ext.extend的内部函数中引用。这里的用法就是采用了函数的闭包特性。提高了效率,又保证其变量的私有性。

上面代码的③是对省略了子类参数的处理。在这种情况下,Ext.extend就要构建子类。如果在构建的对象参数指定了构建这个子类的函数就采用这个函数做为子类的构建器。如果没有的函数,就采用默认的处理,它的默认的处理是把参数传入其父类的构建函数中并运行它。

④处是实现子类原型继承父类原型中的数据。⑤实现了类链的形式。④处第二句和⑥处是指定子类和父类原型的constructor方法,让其指自身的构建函数。⑥处第二句及⑦和⑨处分别为子类或其原型增加override或extend的函数功能。⑧处就是把overrides中的函数或属性全都复制到子类的原型中。

使用Ext.extend是很简单的,对于不需要在构建方法中直接处理一些功能话,我们完全可能通过如下的方法来生成一个即有方法又有属性的继承的类:

var myclass=Ext.extend(spclass,{/ 一些增加方法和属性});// constructor

在Ext的组件中,子类的构建方法中实现的功能一般都在Compoent类中的模板方法initComponent中实现。也就是说一般都是采用上面方面来生成继承的子类。

对于采用子类的自实现的构建方法,相对来说是有点麻烦,如下:

var myclass=function(config){

.. .. ..

myclass.superclass.constructor.call(this, this.meta);//这里是把参数传到父类中构建方法中

… …

}

Ext.extend(myclass,supclass,{//一些增加的方法或属性});

    有的时候,还是要可能要采用这种方法来进行继承的,特别是那些不是组件的继承方式,又要构建方法中自定义实现自有的功能。Ext.extend这两种应用,我们在办公系统的扩展组件都会用到。在第二章的leftMenu组件中,我们就是通过它第二种应用的方法来实现其组件继承于Panel组件。
分享到:
评论

相关推荐

    EXT dojochina Ext类继承.rar

    EXT dojochina是一个关于JavaScript库EXTJS的讨论社区,EXTJS是一个强大的前端开发框架,...在EXT dojochina社区中,开发者们分享了大量关于EXTJS类继承的实践经验和技巧,帮助彼此提升技能,共同推进EXTJS技术的发展。

    Ext官方中文教程(可打包下载)

    Ext的类继承 从源码生成Ext 基础用法: DomQuery基础 Ext中的事件 简述模板 模板(Templates)的函数 教你创建Ext UI控件 事件的处理 Ext中的继承 Ext的类设计 Ajax通讯 JSON处理方法 函数的原型扩展 组件的...

    EXT dojochina Ext类静态方法.rar

    EXT dojochina Ext类...综上所述,EXT dojochina Ext类静态方法的主题涵盖了EXT框架中类和静态方法的核心概念,以及它们在实际开发中的应用。学习和熟练掌握这些知识点,将有助于提升你在EXT开发中的效率和代码质量。

    ext继承重写

    在EXT JS这个强大的JavaScript框架中,"继承"和"重写"是两个核心概念,它们在构建可复用和模块化的应用程序中起着至关重要的作用。EXT JS采用面向对象的编程方式,允许开发者通过继承机制来扩展类的功能,同时通过...

    Ext继承分析

    在ExtJS中,`Ext.extend()` 是一个核心的函数,用于实现类之间的继承机制。它允许你创建新的类(子类),这些类将继承另一个类(父类)的属性和方法。这个功能对于构建复杂的JavaScript应用程序至关重要,因为它提供...

    ext面向对象和继承

    在EXTJS中,类通常通过`Ext.extend()`方法来定义,它创建了一个新的类,并继承自指定的父类。例如: ```javascript Ext.extend(ChildClass, ParentClass, { // 子类的方法和属性 }); ``` 这里的`ChildClass`是新...

    Ext继承和扩展

    `Ext`是一个流行的JavaScript库,它提供了丰富的UI组件和强大的数据管理工具,同时也引入了一套完整的面向对象系统,其中包括类(Class)和继承(Inheritance)的概念。本文将深入探讨`Ext`中的继承和扩展机制。 在...

    EXT中文教程

    - **EXT中的继承** EXT框架鼓励使用面向对象的设计模式,通过继承机制,可以轻松地复用代码和扩展功能。 #### 6. 补充资料与EXT2概述 - **EXT2概述** EXT2是EXT框架的一个重要版本,引入了许多新的组件和特性...

    EXT dojochina Ext类实例属性.rar

    EXT dojochina Ext类实例属性是一个关于EXT框架在JavaScript中的使用的主题,主要涉及EXT库中的类和实例属性。EXT是一个强大的JavaScript库,用于构建富客户端应用程序,它提供了丰富的组件和布局管理,使得Web应用...

    Ext_类的详细介绍

    **Ext.lib.Event** 是一个工具类,封装于 **adapter** 层,旨在提供一个统一的接口来处理不同浏览器中的事件。这一工具类使得开发人员无需关注浏览器之间的差异,能够更加专注于业务逻辑的编写。 ##### 主要函数...

    EXT dojochina Ext类构造方法.rar

    Ext类的构造方法通常以`Ext.extend()`开头,这是Ext JS中实现继承的关键方法。它接受两个参数:子类(派生类)和父类(基类)。通过这个方法,我们可以轻松地创建自定义组件或扩展已存在的组件,继承其属性和方法。 ...

    Ext继承--Ext自定义组件的书写方式

    目的:该示例非常详细注释说明Ext的面向对象的编程方式,使用继承,然后重写父类的方法,以及注册自定义事件说明Ext框架是事件驱动的框架编程。 阅读对象:本中心学习Ext面向对象编程的人员 阅读条件:掌握OO的思路...

    Ext2.2 中文手册

    - **Element 类**:Ext 中的 Element 类提供了对 DOM 元素的封装,使得开发者可以更容易地操作 DOM。 - **获取 DOM 节点**:通过 `Ext.get` 或 `Ext.select` 方法可以轻松获取页面中的 DOM 元素。 - **响应事件**...

    Ext继承和扩展写的例子。

    在这个特定的例子中,我们关注的是"Ext继承和扩展",这是Ext JS中两个核心的概念,它们对于理解和创建自定义组件至关重要。 1. **Ext继承**: 在面向对象编程中,继承是类之间的一种关系,允许一个类(子类或派生...

    EXT3.0中文API文档

    1. **类与接口**:文档会列出所有可用的类和接口,包括它们的继承关系、属性、方法和事件。例如,Ext.Component是EXT3.0的基础组件类,它包含了创建任何可视元素的基本属性和方法,如渲染、大小调整等。 2. **组件...

    Ext框架结构 Ext目录结构

    描述"Ext 2.2 所有类结构继承关系和类说明图"强调了框架中的类层次结构。在面向对象编程中,类的继承是创建新类的一种方式,新类可以从现有类(父类)继承属性和方法。在Ext 2.2中,各个组件和类通常会形成一个复杂...

    ext中播放声音

    首先,定义一个类,继承自EXTJS的`Ext.container.Container`,并在`renderTpl`配置项中添加`<audio>`标签。然后,为`<audio>`元素添加`src`属性,用于指定音频文件路径。例如: ```javascript Ext.define('...

    在EXT中使用FCKEditor编辑器例子

    这涉及到创建一个新的EXT类,继承自EXT的基础组件,并实现与FCKEditor交互的方法。 集成步骤可能包括以下几点: 1. **引入FCKEditor资源**:下载并引入FCKEditor的JavaScript和CSS文件到你的EXT应用中。这通常是在...

    4.0Ext 类系统

    在 ExtJS 4.x 中,类的创建和继承得到了改进,不再局限于简单的 `Ext.extend`。现在,可以更灵活地处理配置、静态属性和混入(Mixins): 1. **旧式继承** 传统的 `Ext.extend` 方法用于创建新类,如 `var MyWindow...

Global site tag (gtag.js) - Google Analytics