zoukankan      html  css  js  c++  java
  • Ext 4 源码解读 (1) Ext.js

    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 小时。如果你看文本的时间更大,我表示佩服。
    如果看了几眼就关掉(当然不是说你),那我不表示遗憾。

  • 相关阅读:
    Redis主从同步分析
    团队形成的四个阶段
    Firefox 按一下Alt键 出现菜单!
    Android系统手机端抓包方法
    你必须知道的EF知识和经验
    .NET异步编程之回调
    正确设置电脑虚拟内存
    Cache and Virtual Memory
    性能测试指标
    HTTP协议
  • 原文地址:https://www.cnblogs.com/xuld/p/2096032.html
Copyright © 2011-2022 走看看