`

Ext源码概述

阅读更多
入门导向

Ext的新手用户可以通过下列不同的途径获取学习资源:API文档、维基百科全书、日益丰富的教程、论坛、IRC频道等等(参阅Learn ),关于这些各个方面在EXT官网上都有。但最重要的可用资源,可以说是Ext源代码本身。可以这样方便地学习源代码(Ext的项目毕竟是开源的),不仅能助你体验Ext,而且还能让你接触到大量的Javascript高级技巧和最佳实践,进一步提升自身的编码水平。

揭示源代码

Javascript是一门解释型的语言,意味着在运行之前代码是没有经过编译的。按照这种理论,在你网站上所发播的Ext代码是我们看得懂的(human-readible)。我这里说“理论上”,是因为实际情况中,很多源代码是经过某些自动化步骤的处理,生成很小几行的文件最终发布的,通过剔除空白符号和注释,或混淆等的方法,以减小文件大小。

仔细看看EXT标准源码ext-core.js,你会发现这是一段超长的源码。这是刚才提及的自动化步骤生成的结果--对浏览器来说不错!可是对于我们是难以阅读的。

ext-core.js
/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://www.extjs.com/license
 */
 
Ext.DomHelper=function(){var _1=null;var _2=/^(?:br|frame...
 
Ext.Template=function(_1){if(_1 instanceof Array){_1...
...


接着看下去的是ext-core-debug.js (注意在文件名后面加上-debug的JS文件), 我会发现是全部已格式化好的源代码。这个文件是配合调时器所使用的,像Firebug的工具能够可以让你一步一步地、一行一行地调试代码。你也会发现文件的体积将近大了一倍之多,这便是没有压缩或混淆的缘故。

ext-core-debug.js
/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://www.extjs.com/license
 */
 
Ext.DomHelper = function(){
    var tempTableEl = null;
    var emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
    var tableRe = /^table|tbody|tr|td$/i;
...


该调试版本可以在调试阶段方便地检查EXT库运行到哪一步,但是你还是会错过一个有价值的...代码注释!要完整地看到代码,就要阅读真正的原始代码!

发布Ext源码时的一些细节

你在download得到的压缩文档,包含在这些文件夹之中的,有一source的子目录。在这个文件夹里面,正如所料,是全部的EXT的源文件,遵从Lesser GNU (LGPL) 开源的协议。对于EXT开发者来说应该非常适合。

用你日常使用文本编辑器打开源代码的任意一个文件(推荐有高亮显示的编辑器,或是在这里full-featured IDE看看),便可以开始我们的探险!

我应该从哪里开始?

Ext代码库里面包含了许多各种各样的文件,甚至令人觉得有点望而生畏。好在,Ext是一个通过充分考虑后而设计的JavaScript库,--在底层的代码为各项应用提供稳健的基础如跨浏览器的各种DOM操控,使得在上层的类classes运行于一个较高级的抽象层面(class 一术语与我们已习惯的Java和C++语言稍微有所不同,但一些概念如继承则可是如此类推去理解的--有关面向对象的JavaScript的更多资料,请参见Introduction to object-oriented (OO) JavaScript)。

这意味着,当浏览源码的时候,采取“自顶向下(bottom-up)”还是“自下向顶(top-down)”的方式,都是无关紧要的。你所熟悉API里面的代码已经是属于最高的抽象层面的范畴,你可以根据你的兴趣,顺着这些你熟悉的API逐步深入。但是你若赞同我的看法,并打算深入了解其个中原理,最理想的地方是从底层代码开始。

适配器Adapters

浏览器读取第一个源文件,当中的一个任务就是创建Ext对象本身。 Ext.js
Ext = {};


Ext成型于YahooUI的Javascript库的扩展。在当时,Ext须依赖YUI的底层代码来处理跨浏览器的问题。现在ExtJS已经是独立、免依赖的库了(standalone ),你可将YUI替换为另外你所选择javascript库,如prototype、jQuery、或者是这些之中的最佳选择,-Ext自带的底层库。 负责将这些库(包括Ext自带的底层库)映射为Ext底层库的这部分代码,我们称之为适配器(Adapters)。这部分源码位于source/adapter的子目录。当项目引入Ext的时候便需要选择好你准备使用的适配器。

核心Core

source/core中的文件是构建于适配器API之上的“相对”最底层的源码。有些的源码甚至“底层”到直接为独立库的代码直接使用。这意味着应先了解和学习这整个库,再学习剩余的部分也不迟。要了解Ext的各种“Magic”和核心层面,就应该把重点放在source/core 目录下的各个源代码。
分享到:
评论

相关推荐

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

    Ext源码概述 Ext与RESTful Web Services 程序设计: 如何合理地规划一个应用程序 如何本地化ext的教程 xtype的含义 扩展Ext中的组件 扩展与插件之间的区别 扩展Ext的新手教程 Ext的类继承 从源码生成Ext 基础用法...

    EXT中文教程

    - **EXT源码概述** EXT的源码结构清晰,分为多个模块,如Adapters、Core等,每个模块负责特定的功能,便于理解和维护。 - **核心Core** Core包含了框架的基础功能,如DOM操作、事件处理等,是整个框架的基石。 ...

    EXT中文手册,ext开发帮手

    EXT源码概述: 这部分将介绍EXT的源码结构和组织方式,帮助开发者深入理解EXT的工作原理,以便进行定制化开发。 揭示源代码: 深入EXT源码有助于开发者更高效地调试和优化代码,了解EXT内部是如何处理各种任务的。 ...

    ext学习文档

    - **EXT源码概述**: 对EXT的源代码进行了初步解析。 - **EXT程序规划入门**: 提供了关于如何规划和构建EXT应用程序的基本指导。 #### 3. Element:Ext的核心 Element是EXT框架的核心组成部分之一,它封装了DOM操作...

    EXT中文教程121212

    EXT源码概述: EXT的源码结构清晰,分为多个模块,每个模块负责特定的功能。学习EXT源码有助于深入理解其工作原理,这对于优化性能和定制组件非常有帮助。EXT采用面向对象的编程风格,大量使用了类(Class)和继承。...

    Ext 教程详解 适

    - EXT源码概述:深入理解EXT的源码可以帮助你更好地定制和优化组件,EXT的源码结构清晰,模块化程度高。 - 揭示源代码:通过阅读EXT的源码,你可以学习到如何扩展已有组件,或者创建自定义组件。 - 发布EXT源码时的...

    EXT 中文手册

    9. EXT 源码概述:为开发者提供EXT源码结构和主要类的概览,帮助理解EXT的工作原理。 10. 揭示源代码:深入EXT的源码,帮助开发者学习EXT的实现细节和最佳实践。 11. 发布 Ext 源码时的一些细节:介绍如何打包和发布...

    EXT官方网站的中文教程

    9. **EXT 源码概述**: 阅读和理解 EXTJS 的源码可以帮助深入学习其工作原理。EXTJS 的源码组织清晰,遵循 MVC(模型-视图-控制器)架构,易于扩展和维护。 10. **揭示源代码**: 了解 EXTJS 的源码结构和设计...

    EXT简体中文参考手册(PDF&CHM电子档)

    EXT源码概述 11 揭示源代码 11 发布Ext源码时的一些细节 12 我应该从哪里开始? 13 适配器Adapters 13 核心Core 13 Javascript中的作用域(scope) 13 事前准备 13 定义 13 正式开始 14 window对象 14 理解作用域 15...

    EXT-In-FirstStep

    ### EXT源码概述 #### 5.1 揭示源代码 - 了解EXT的源码结构对于深入学习框架原理和自定义组件至关重要。 #### 5.2 发布Ext源码时的一些细节 - 探讨EXT源码发布时的注意事项,包括命名空间、模块化等,有助于理解和...

    Ext2.2 中文手册

    EXT 源码概述 - **源码结构**:Ext 框架的源码分为多个模块,每个模块负责特定的功能,例如 Core 模块包含了基础的 JavaScript 功能。 - **作用域管理**:JavaScript 中的作用域决定了变量的可见性。在 Ext 中,...

    EXT中文手册.pdf

    EXT源码概述章节,旨在帮助开发者理解EXT的内部结构,揭示源代码的组织方式和主要类库,这对于进行深度定制和性能优化非常有帮助。发布EXT源码时的一些细节可能包括如何进行代码压缩、合并以及优化,以提高应用的...

    Ext中文手册

    EXT源码概述: 深入EXT源码有助于理解其工作原理和优化应用性能。EXT的源码组织清晰,模块化良好,开发者可以通过阅读源码学习EXT的内部机制。 适配器Adapters: 适配器是EXT与不同浏览器或JavaScript库交互的关键...

    ext js中文开发手册

    **八、EXT源码概述** 深入理解EXT JS源码可以帮助开发者更好地掌握框架的工作原理,优化应用性能。源码分析涉及组件架构、事件处理流程、数据绑定机制等方面,对于定制高级功能和调试问题尤为重要。 **九、程序...

    EXT学习资料1

    8. **EXT 源码概述** EXT 的源码组织清晰,便于理解和扩展。深入研究源码可以帮助开发者更深入地了解其工作原理,从而更好地定制和优化应用。 9. **揭示源代码** EXT 使用了模块化设计,每个功能模块都有对应的...

    EXT 中文帮助手册

    4 Element:Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext源码时的一些细节 12 我应该从哪里开始? 13 适配器...

Global site tag (gtag.js) - Google Analytics