Ext Source Overview (Chinese)

Manual:Ext Source Overview (Chinese)

From Learn About the Ext JavaScript Library

Jump to: navigation , search
Summary: Ext源码概览
Author: Patrick Donelan (译者Frank Cheung )
Published: 2007九月十七号
Ext Version: any
Languages: en.png English cn.png Chinese

Contents

[hide ]

<script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script>

入门导向

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值