閱讀Ext 學習Javascript（一）Core/Ext.js

從Library的角度去看，Ext（喜歡中文的朋友可以到它的中文站看看）和Prototype JQuery YUI沒有太大區別，但它有它的優點，完整的OO支援、成熟的通用widgets並支援主題、良好的擴充性、快速的更新發布新的widgates、社區也很熱鬧。最重要的是我個人比較喜歡它。

首先開啟原始碼看一下它的結構： 從core開始看吧

Ext = {version: '2.0-beta1'};
這一行代碼是定義一個變數Ext，沒有使用var表明作者的意思是要將它定義為全域的。等號右邊是Json（Javascript object Notation）格式，等效於以下代碼：
Ext = new Object();
Ext.version = '2.0-beta1';

window["undefined"] = window["undefined"];
這行代碼需要說明的是window和Ext不同，它是內建的Borwser對象，無需代碼聲明。和C#等編譯類語言不同，在js中當一個對象存在以後，我們可以在任何時候對它的成員進行修改。對像成員的訪問有兩種方式：一是點記法（如Ext.version），二是索引法Ext["version"]。索引法看上去麻煩，但實際上卻很靈活，而且在有些場合（如下面將要提到的namespace override等函數）是不可替代的。如遍曆對象的成員（屬性集合中的每一項）。undefined在IE(js)5.5之後的版本中才有，這裡的這種寫法就巧妙的相容了舊版本的瀏覽器。理解了索引法對成員的訪問後，來看一下Ext.apply方法。

Ext.apply = function(o, c, defaults){
    if(defaults){
        // no "this" reference for friendly out of scope calls
        Ext.apply(o, defaults);
    }
    if(o && c && typeof c == 'object'){
        for(var p in c){
            o[p] = c[p];
        }
    }
    return o;
};

這是一個相當關鍵的方法，它和Prototype中的Object.Extend是一樣的（這裡沒有用extend是因為它被用到繼承Ext.extend上面了），實現了對象擴充的功能，即從對象c拷貝成員的功能（如果有預設配置，則先從預設配置擴充）。Ext有了這個方法後，緊接著用這個方法對自己進行了豐富的擴充。擴充的時候用了下面這種寫法：
(function(){var i=100;alert(i)})()
這種寫法就是傳說中的匿名函數，它的好處是函數內部定義的對象在函數外面永遠無法訪問，除此之外這個匿名函數也是不可被其它代碼訪問的，即使得對象之間不容易被命名汙染（在js中很多錯誤是由於對象命名衝突引起的）。按照通常的寫法我們會這樣寫function a(){var i = 100;alert(i)};a();這樣寫就留下了一個對象a（在不要再用的時候就成了記憶體垃圾）。回到Ext對象，它給自己添加了幾個很重要的成員：

1. namespace   命名空間，js的命名空間其實就是對項鏈。如傳入"a.b.c"，則產生三個對象，並連結起來。需要說明的是Ext.namespace("a.b.c")會出錯，因為它內部把a指向了arguments，這樣產生的對象在namespace的外邊是不存在的。 在以後的文章裡，會以Ext擴充的命名空間來逐一閱讀理解。
2. applyIf(o, c)  將對象c中非未定義成員擴充到o上
3. addBehaviors(o) 
4. id() 產生唯一對象ID，
5. extend  對函數擴充，即類型繼承。這是一個至關重要的成員，整個架構中類型的派生都離不開它的支援。
6. getDom 與Prototype的$一樣
7. type
8. removeNode
9. destroy
10. num
11. callback
12. combine
13. each
14. urlDecode
15. urlEncode

 

Js內建的類型有object string function number boolean array date

下面是Ext對內建對象和其原型的擴充

1. Function.prototype
   1. createCallback 將當前函數應用到指定的對象上，並返回新的函數供調用執行
   2. createDelegate 也是返回一個新函數，差異在以後的章節詳細闡述
   3. defer
   4. createSequence
   5. createInterceptor
2. String
   1. escape  轉義'和\符號
   2. leftPad 很像C#的PadLeft PadRight，自己寫的時候往往忘記考慮傳入Null 字元串，會造成死迴圈
   3. format  格式化字串，類似C#的String.Format
3. String.prototype
   1. toggle 交換兩個，用於代替三值運算式
   2. trim 去掉空格
4. Number.prototype.constrain
   1. indexOf
   2. remove
5. Array
   1. indexOf
   2. remove
6. Date.prototype.getElapsed 擷取目前時間與該對象之間的毫秒數

繼續 閱讀Ext學習Javascript（二）Core/Ext.extend 從繼承說起