Ext源码概览(Manual:Ext Source Overview)

 

1 入门导向
2 揭示源代码
3 发布Ext源码时的一些细节
4 我应该从哪里开始？
5 适配器Adapters
6 核心Core

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

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

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

ext-core.js

view plain copy to clipboard print ?

1. /*  
2.  * Ext JS Library 1.1  
3.  * Copyright(c) 2006-2007, Ext JS, LLC.  
4.  * <script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%6c%69%63%65%6e%73%69%6e%67%40%65%78%74%6a%73%2e%63%6f%6d%22%3e%6c%69%63%65%6e%73%69%6e%67%40%65%78%74%6a%73%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><a href="mailto:licensing@extjs.com">licensing@extjs.com</a>  
5.  *   
6.  * extjs.com/license  
7.  */   
8.    
9. Ext.DomHelper=function (){ var  _1= null ; var  _2=/^(?:br|frame...  
10.    
11. Ext.Template=function (_1){ if (_1  instanceof  Array){_1...  
12. ...  

/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * <script type="text/javascript">
 
 </script>
licensing@extjs.com

 * 
 * 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

view plain copy to clipboard print ?

1. /*  
2.  * Ext JS Library 1.1  
3.  * Copyright(c) 2006-2007, Ext JS, LLC.  
4.  * <script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%6c%69%63%65%6e%73%69%6e%67%40%65%78%74%6a%73%2e%63%6f%6d%22%3e%6c%69%63%65%6e%73%69%6e%67%40%65%78%74%6a%73%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><a href="mailto:licensing@extjs.com">licensing@extjs.com</a>  
5.  *   
6.  * extjs.com/license  
7.  */   
8.    
9. Ext.DomHelper = function (){  
10.     var  tempTableEl =  null ;  
11.     var  emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;  
12.     var  tableRe = /^table|tbody|tr|td$/i;  
13. ...  

/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * <script type="text/javascript">
 
 </script>
licensing@extjs.com

 * 
 * 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目录下的各个源代码。

文章来自：http://extjs.com/learn/Manual:Ext_Source_Overview_%28Chinese%29