閱讀Ext 學習Javascript(一)Core/Ext.js

轉自JS堂
從Library的角度去看,Ext和Prototype JQuery YUI沒有太大區別,但它有它的優點,完整的OO支持、成熟的通用widgets並支持主題、良好的擴展性、快速的更新發布新的widgates、社區也很熱鬧。最重要的是我個人比較喜歡它。

首先打開源代碼看一下它的結構: ext從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,自己寫的時候往往忘記考慮傳入空字符串,會造成死循環
         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 獲取當前時間與該對象之間的毫秒數 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章