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

Ext源码解析:1, Ext.js

阅读更多
来自http://www.beyondrails.com/blogs/17

Ext版本: 2.1

Ext.js位于Ext源代码的core目录下,它定义了Ext的核心工具和方法集

Ext是一个singleton,不能直接使用new来创建,因为Ext源码中没有声明Ext的constructor
Ext = {version: '2.1'};

声明了Ext对象,其中version属性为'2.1'

然后定义了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;
};

Ext.apply方法将c对象中的属性全部copy到o对象中,并且最后返回o对象

然后紧接着是一个"Module Pattern"的使用:
(function(){
    // ...
    Ext.apply(Ext, {
        // ...
    });
    // ...
})();

Module Pattern实际上是一个Singleton模式,最后的()表示该匿名方法会立即执行

其中在Ext.apply那一大段代码里,声明了很多public的属性和方法,如:
Ext.isIE
Ext.isGecko
Ext.isSafari
Ext.isWindows
Ext.isLinux
Ext.isMac
------------------------
Ext.namespace()
Ext.applyIf()
Ext.extend()
Ext.override()
Ext.getDom()
Ext.isArray()

接下来对一些类进行扩展,添加了一些方法:
对Function类全局添加了几个方法,这样所有的Function对象(也即所有的JavaScript方法)都具有如下方法: createCallback/createDelegate/createInterceptor/createSequence/defer
对String类添加了escape/format/leftPad/toggle/trim方法
对Number类添加了constrain方法
对Array类添加了indexOf/remove方法
对Date类添加了getElapsed方法

我们重点分析一下Ext.namespace/Ext.extend/Ext.override方法
首先分析一下Ext.namespace方法
namespace : function(){
    var a=arguments, o=null, i, j, d, rt;
    for (i=0; i<a.length; ++i) {
        d=a[i].split(".");
        rt = d[0];
        eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');
        for (j=1; j<d.length; ++j) {
            o[d[j]]=o[d[j]] || {};
            o=o[d[j]];
        }
    }
}

该方法实现的非常灵活,可以给namespace传递多个String参数,每个String又可以带'.'来描述命名空间的父子关系,调用方式:
Ext.namespace('com.beyondrails.hideto');
// com = { beyondrails : { hideto : {} } }
Ext.namespace('foo', 'bar')
// foo = {}
// bar = {}

然后我们看看Ext.override方法:
override : function(origclass, overrides){
    if(overrides){
        var p = origclass.prototype;
        for(var method in overrides){
            p[method] = overrides[method];
        }
    }
}

很简单,将overrides中所有方法覆盖到origclass中

最后我们来看看Ext.extend方法:
extend : function(){
    // inline overrides
    var io = function(o){
        for(var m in o){
            this[m] = o[m];
        }
    };
    var oc = Object.prototype.constructor;
    
    return function(sb, sp, overrides){
        if(typeof sp == 'object'){
            overrides = sp;
            sp = sb;
            sb = overrides.constructor != oc ? overrides.constructor : 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 == oc){
            spp.constructor=sp;
        }
        sb.override = function(o){
            Ext.override(sb, o);
        };
        sbp.override = io;
        Ext.override(sb, overrides);
        sb.extend = function(o){Ext.extend(sb, o);};
        return sb;
    };
}()

这段代码比较诡异,一般来说继承的JavaScript实现就将subclass.prototype = new superclass(),这里也是这样实现的
不过Ext在这里还给subclass加上了一个superclass属性和一个override方法
而且这里支持两种方式的调用:
Ext.extend(Class1, {a:1, b:2})
Ext.extend(Class1, Class2, {a:1, b:2})

其中需要注意的是直接写成Object Literal方式的对象会override而不是extend
分享到:
评论

相关推荐

    Ext.Ajax.request2.x实现同步请求

    本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,它是Asynchronous JavaScript and XML的缩写,虽然现在XML已不再是主要的数据交换格式,但...

    Ext_JS源码分析与实例宝典.pdf

    ### Ext_JS源码分析与实例宝典 #### 1.1 ExtJS简介 随着Web2.0时代的到来,JavaScript库如雨后春笋般涌现,极大地丰富了前端开发的工具箱。在这之中,ExtJS凭借其强大的功能和易用性脱颖而出,成为了构建Web富...

    ext源码分析

    通过以上分析,我们可以看出EXT源码的深度和广度,它是JavaScript UI开发的一个强大工具。深入学习EXT源码,不仅有助于提升我们的编程技能,也有利于我们更好地利用EXT来构建高效、美观的Web应用。

    webdriver4ext:具有Node.JS的Selenium Web Driver应用程序

    “webdriver4ext:具有Node.JS的Selenium Web Driver应用程序”这个标题表明我们正在讨论一个基于Node.js的项目,该项目利用Selenium WebDriver进行Web自动化测试。WebDriver是一个跨平台的API,允许程序员控制Web...

    Ext.data.Store 读取XML属性值

    在JavaScript的世界里,Ext.js是一个强大的富客户端框架,它提供了丰富的UI组件和数据管理功能。在处理数据时,`Ext.data.Store`是一个至关重要的组件,它用于存储和管理数据,可以与各种数据源进行交互。当我们需要...

    ext-3.0框架源码

    二、EXT 3.0源码解析: EXT 3.0的源码分为多个部分,包括核心类库、组件库、布局、数据管理、AJAX通信、事件系统等。深入研究源码,可以了解到以下关键点: 1. **ExtJS核心**:这是EXT框架的基础,包括基础类、...

    Ext中文帮助文档(Ext常见界面源码,及类库方法详解)

    这个“Ext中文帮助文档”涵盖了ExtJS 2.1版本的核心类库和常见界面元素,为开发者提供了详尽的源码解析和方法解释。 一、ExtJS 2.1核心组件 在ExtJS 2.1中,主要的组件包括: 1. 表格(Grid):用于展示数据,支持...

    Ext.ux.Upload.Dialog使用

    在IT行业中,`Ext.ux.Upload.Dialog`是一个用于Ext JS框架的第三方组件,它扩展了标准的对话框(Dialog)功能,提供了文件上传的能力。这个组件通常被用于Web应用程序,以便用户可以方便地向服务器上传文件。下面...

    Ext江湖(完整+书签).part1

    本书以幽默诙谐的语言由浅入深地解析了Ext框架的方方面面,包括JS基础、Ext的DOM和CSS封装、内置对象的扩展、事件系统、Ajax和Direct、数据和缓存架构、面向对象和继承、UI组件、布局管理、模板、特效、图表和报表、...

    Ext+JSP实现数据提交

    `Ext`是一个强大的JavaScript库,主要用于构建富客户端应用。它提供了丰富的组件库,包括表格、表单、菜单等,以及一套完整的MVC(Model-View-Controller)架构,使得前端开发更加便捷高效。在`Ext`中,用户可以通过...

    ext 多文件上传控件 Ext.ux.UploadDialog 使用中的问题

    1. **配置设置**:在创建UploadDialog实例时,我们需要配置一些关键参数,如上传URL(action)、文件类型限制(fileTypes)、最大文件大小(maxFileSize)等。这些参数可以根据实际需求进行定制,以确保文件上传符合...

    读Ext之十(解析JSON)

    1. **Ext.data.Store**:这是Ext JS中的核心组件之一,用于存储和管理数据。它可以配置为从JSON数据源加载数据,使用`proxy`配置项来指定数据源类型,如`Ext.data.proxy.JsonP`或`Ext.data.proxy.Ajax`,这两者都...

    ext 3.0源码+帮助文档chm

    EXT 3.0是EXT JS框架的一个重要版本,它是一个基于JavaScript的富因特网应用程序(RIA)开发库。EXT JS允许开发者构建功能强大的、交互性强的Web应用,无需深入理解底层浏览器差异和技术细节。EXT 3.0源码与帮助文档...

    Extjs upload(ext官网例子)

    ExtJS 是一个强大的JavaScript应用程序框架,它提供了丰富的用户界面组件和强大的数据管理功能。在"Extjs upload(ext官网例子)"中,我们主要探讨的是如何在ExtJS中实现文件上传的功能,这是一个常见的需求,特别是...

    Ext Js jar包

    1. **预编译的JavaScript文件**:这些是Ext JS库的已压缩和优化版本,用于提高页面加载速度。 2. **Java接口或适配器**:这些接口允许Java代码与JavaScript库进行交互,通常是通过Java的ScriptEngine API或者第三方...

    java-ext.zip_ext_ext java_ext 标签_ext java_java ext

    而`java-ext`可能是源码文件夹,包含Java后端的服务代码和相关的配置文件。 综上所述,这个压缩包提供了一个完整的示例,演示了如何在ExtJS前端应用中利用Ajax调用Java后端的JSON服务,实现了前后端的数据交互。...

    深入浅出Ext JS(第2版) 随书光盘提供的书中实例

    《深入浅出Ext JS(第2版)》是一本详细解析Ext JS框架的权威书籍,其随书光盘包含了书中所有实例的源代码,这些代码对应于Ext JS的3.2.0版本。通过深入研究这些实例,读者可以更直观、更深入地理解Ext JS的强大功能和...

    EXT 2.2 的HELLO WORD 创建详程

    1. Ext JS简介: Ext JS是一个使用JavaScript语言编写的开源的、前端框架,它是专门为创建跨浏览器的交互式Web应用程序而设计。它使用并扩展了标准的HTML和CSS,因此创建的Web应用程序能够与不同的浏览器兼容。Ext ...

    ExtJS 3.2的中文参考手册

    **EXT源码概述** - **源代码结构**: ExtJS的源代码组织清晰,易于理解和扩展。 - **发布细节**: 在发布源码时,会包含必要的文档和示例代码,方便开发者快速上手。 #### 9. **EXT程序规划入门** - **准备工作**:...

Global site tag (gtag.js) - Google Analytics