博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Ext 4 源码解读 (1) - Ext.js

Posted on 2011-07-02 01:03  xuld  阅读(1835)  评论(3编辑  收藏  举报

EXT4是什么就不解释了,能读这文章的你肯定知道。

下载EXT4的压缩包,天,几十兆。这根本不是人写的啊。

但我想说的是: 作者故意把它弄这么大,单源码是没有这么多的,大约3兆。


写EXT的源码解读不是很轻松。

但相信很多人需要它!


希望这份源码解读能让你受益匪浅。

当然,如果你连基本的js语法都不知道,那就放弃吧,

它不是 js教程。


不要觉得这篇文章标记一下,以后再读。

这意味着你不会去读。


有时候,学习是被逼的。

但你绝对可以边听音乐边读这篇文章。

学会在学习中找到快乐是一个本领。


EXT 4 源码解读

xuld/文

QQ 744257564

转载时请注明来源: http://www.cnblogs.com/xuld/

准备: 下载 EXT4压缩包。你可以找到几个文件夹和文件: examples (示例)、 src(源码)、ext-all-debug-w-comments.js (带注释的全部代码)

因为官网随时可以更新, 而这篇文章是按某个版本写的, 而且详细指明代码的行数,为了让读者可以同步阅读源码,特提供写此文时源码。

点这下载


本文所讲解的都是 src 里文件 ,而不是 ext-all-debug-w-comments.js , 主要是由于 ext-all-debug-w-comments.js 太大,我所使用的编辑器卡的无耐。


我写的不是语文教材,有几个错别字不要大惊小怪。

当然,如果你发现什么错误,包括错字,还请你指出。


诶。。

有人在抱怨了,写了这么多还没开始正文。


读文章的时候,你最好同时打开ext的源码,对照之后去读。

那现在就开始...


第一部分 核心/核心


源码:   core/src/Ext.js


首先L 1 - 14 ( 第 1 到 第 14 行) ,你可以发现:

EXT 基于 GPL 开源---- 除非你的东西也GPL开源, 否则必须出钱,才能使用 EXT 4。

作者把赚钱的目标用源码注释方式写清楚了。


接着  L 16 - 17

这2个是文档注释。 @class 表示 Ext 是类 @singleton 表示这是 单例模式的类, 也就是说,接下来的成员都是 Ext 直接有的, 而不是 Ext.prototype 。


L 20

var global = this 。 this 就是 window , 全局函数执行时, this 指向 window 。

[如果你对 this 不理解,可以读我的文章: http://www.cnblogs.com/xuld/archive/2011/06/23/2087971.html ]

L 21 - 23

没什么可说的,就是普通变量定义。

L 24

enumerablesTest  = { toString: 1 }

这个干什么用?

标准浏览器 对于 for(var i in enumerablesTest){  alert(i)  }   会输出  "toString" 因为 toString 已经为自定义成员了。所以 or in 会遍历这个成员, 而 IE6 却只认名字不认人。它不会 输出 自定义的 toString 成员,包括其它 系统的成员也 不会。因此,在 IE6 需要主动判断是否定义了 toString 。


L 27 - 30

为什么了 typeof Ext === 'undefined' 才创建 Ext ?

因为作者考虑万一之前有定义了Ext,或者说 Ext.js 引入了2次, 不能直接覆盖以前的数据。


L 31

Ext.global = global   这个干吗? 保存全局对象。

这样不会让程序太死,而扩展这个库的功能。


L 33 - 37

见 L 24


L 46

用户可以通过 Ext.enumerables 得到或修改 遍历的属性。

L 57 - 80

这是一个函数  Ext.apply(object, config, defaults) ,

可以理解为,如果 存在3个参数, 那么, 先把 defaults 的成员拷贝到 object 。

所以这个函数 就2个参数 :
Ext.apply(object, config)

功能就是把 config 成员拷贝到 object 。

拷贝的方法就是 for in 对象, 成员一个个赋值。

当然正如 L 24 说的, 如果是IE6, 需要人工检查自定义属性, 而不能仅仅用 for in 。

检查的方式是 hasOwnProperty  。

L 82 -85

Ext.buildSettings  用于存储配置。这里只是定义。

当然 这里使用 Ext.apply(... , Ext.buildSettings || {}) 以防止存在的配置被重写。

用户可以在载人 EXT 前, 使用 Ext = {buildSettings: {...}}   配置这个库。


L 86

接下来就是对Ext 自己扩展了。

L 91 - 92

空函数, 用处大了。

Ext.emptyFn 比如一个接口。在没实现前,定义成空的函数。

L 93

baseCSSPrefix CSS  前缀


L100 - 114

Ext.applyIf   相当于 Ext.apply, 但不会覆盖本来就已存在的成员。

另外,它只有2个参数。


L 127 - 143

Ext.iterate  遍历 对象 或 数组。

L 145

作者糊涂了,为什么分开写? 估计下个版本会合并。


L 155 - 214

Ext.extend 实现继承。 如果你对继承原理不懂,可读我的文章: http://www.cnblogs.com/xuld/archive/2011/06/10/2077791.html

另外,这个函数已被弃用, 因为 Ext 4 带了完整的 类机制

L 246 - 253

Ext.override 实现重载。 

它和 多态有关。

具体 以后分析。

L 268 - 270

Ext.valueFrom  这个函数是默认值的取法。

如果一个参数不空,返回这个参数,否则返回默认值。

一般我们需要这个效果的时候 || 足够。

L 293 - 342

Ext.typeOf 返回类型

对于普通对象, 使用 typeof 可以获取类型, 但 typeof 总会欺骗我们。

比如 typeof null == "object" 

typeof [] == "object"

我们真正需要的是可以 正常报出  object 内容的东西。

所以, 当然 typeof 返回 不是 object, 那就返回。

否则, 使用其它方法继续判断 object 具体指?

使用 Object.prototype.toString  来获取对象的描述。 根据这个描述 ,得到类型。

如 new Number(3) -> [object Number] ,  所以可以判定这是 number 。

如果存在 nodeType , 说明它是节点。 当然  假如你故意去定义这个属性 谁也没办法。


L 358 - 360

Ext.isEmpty 判断 null  undefined 空字符串 或 数组


L 369 - 492

Ext.isXXX 

大部分就不解释了, 只说明几个:

isPrimitive  primitive 不是常见的单词, isPrimitive 理解为变量是否引用传值。

比如:

var f = 1;

f.a = 2;

alert(f.a); // 输出 undefined

这样的 f 就是 普通值类型, 它不含其它属性, 这样的变量叫  isPrimitive 的变量。

isIterable   数组返回 false

L 504 - 552

Ext.clone 深拷贝对象。  除非你是作者,否则不要随便使用这个函数。

它是能源大户。


L 558 - 572

Ext.getUniqueGlobalNamespace 噢,不好意思, 这是 Ext 的私有函数,都被我说出来了,还咋个私有。

这个函数用来生成唯一的名字。 当然前缀 ExtBox 。 作者 还用了 沙盒 专业词汇,就是对象可以偷偷地藏在这个盒子里。


L 578 - 587

Ext.functionFactory 这是装逼用的好东西。

这代码估计能让一帮人吓到。

args 是参数数组 除去第一个参数。

为什么用 args[args.length - 1] 不用 args.push ?

都可以。我想作者是这样认为的。

 args 内存的是定义 Ext = XXX 的代码。

注意它创建的是一个闭包。

也就是这个函数返回的是一个函数,返回的那个函数内部创建了一个 Ext 变量。

这就是所谓的沙盒。

Function.prototype.constructor.apply(Function.prototype, args)

这句话相当于 Function.apply(Function.prototype, args)

相当于 new Function(args[0], args[1], args[2] ...)


L 596

Ext.type 同 Ext.typeOf

有历史包袱的库就是累啊。

第一部分 结束。

想回到上面重读?

请吧。

第一部分解释了 Ext 的创建和 基本函数的创建。

这些函数为以后准备。

当然 单单 Ext.js 是做不好事的。

写本文用了 2 小时。如果你看文本的时间更大,我表示佩服。
如果看了几眼就关掉(当然不是说你),那我不表示遗憾。