Ext4.0源碼解讀(分享一)

第一部分 核心/核心


源碼:   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 。

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 實現繼承。

另外,這個函數已被棄用, 因爲 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 小時。如果你看文本的時間更大,我表示佩服。
如果看了幾眼就關掉(當然不是說你),那我不表示遺憾。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章