ExtJS 2.3版 源代码的解析(转)

原创地址：  http://www.iteye.com/topic/1120551

选择2.3版本来分析，是因为其代码量相对较少，而且不依赖其他js库，值得一读。

官方下载地址：http://dev.sencha.com/deploy/ext-2.3.0.zip

文件：ext-2.3.0/source/core/Ext.js

概述：Ext.js主要负责创建Ext全局对象，构建其命名空间，定义extend类继承方法，探测浏览器信息和对Javascript原生库进行扩展。

分析：

一、创建Ext全局对象

// 创建Ext全局对象，大多数JS库为了避免和其他JS库命名冲突，都会把自己创建的类或函数封装到一个全局变量中去，
// 这样就相当于创造了自己的命名空间，可以算是一个单例模式。例如，jQuery就是全部都封装到$变量中去。
Ext = {version: '2.3.0'};

二、设置全局undefined变量

// 兼容旧浏览器，早期的浏览器实现中，undefined并不是全局变量。就是说，你要判断一个变量是否是没定义，
// 你需要这样写if (typeof  a == 'undefined')，不可以写成if (a == undefined)。所以，上面的代码就可以理解了。
// 右面的window["undefined"]，因为window对象没有undefined属性，所以其值为undefined，
// 把undefined赋值给window的undefined属性上，就相当于把undefined设置成了全局变量，
// 这样以后你再判断一个变量是否是未定义的时候，就不需要使用typeof，直接判断就可以了。
window["undefined"] = window["undefined"];

三、定义apply方法属性复制函数

// apply方法，把对象c中的属性复制到对象o中，支持默认属性defaults设置。这个方法属于对象属性的一个浅拷贝函数。
Ext.apply = function(o, c, defaults){
    if(defaults){
        // 如果默认值defaults存在，那么先把defaults上得属性复制给对象o
        Ext.apply(o, defaults);
    }
    if(o && c && typeof c == 'object'){
        for(var p in c){
            o[p] = c[p];
        }
    }
    return o;
};

四、扩展Ext对象

(function(){
    // idSeed，用来生成自增长的id值。
    var idSeed = 0;

    // ua，浏览器的用户代理，主要用来识别浏览器的型号、版本、内核和操作系统等。
    var ua = navigator.userAgent.toLowerCase(),
        check = function(r){
            return r.test(ua);
        },

        // isStrict，表示当前浏览器是否是标准模式。
        // 如果正确的设置了网页的doctype，则compatMode为CSS1Compat，否则为BackCompat
        isStrict = document.compatMode == "CSS1Compat",

        // isOpera，表示是否是opera浏览器。
        isOpera = check(/opera/),

        // isChrome，表示是否是谷歌浏览器。
        isChrome = check(/chrome/),

        // isWebKit，表示当前浏览器是否使用WebKit引擎。
        // WebKit是浏览器内核，Safari和Chrome使用WebKit引擎。
        isWebKit = check(/webkit/),

        // isSafari，表示是否是苹果浏览器，下面代码是对其版本识别。
        isSafari = !isChrome && check(/safari/),
        isSafari2 = isSafari && check(/applewebkit\/4/), // unique to Safari 2
        isSafari3 = isSafari && check(/version\/3/),
        isSafari4 = isSafari && check(/version\/4/),

        // isIE，表示是否是IE浏览器，下面代码是对其版本识别。
        isIE = !isOpera && check(/msie/),
        isIE7 = isIE && check(/msie 7/),
        isIE8 = isIE && check(/msie 8/),
        isIE6 = isIE && !isIE7 && !isIE8,

        // isGecko，表示当前浏览器是否使用Gecko引擎。
        // Gecko是浏览器内核，Firefox使用Gecko引擎。
        isGecko = !isWebKit && check(/gecko/),
        isGecko2 = isGecko && check(/rv:1\.8/),
        isGecko3 = isGecko && check(/rv:1\.9/),

        // isBorderBox，表示浏览器是否是IE的盒模式。
        // 众所周知，IE的盒模式和W3C的盒模式不一致。当IE浏览器在怪异模式下，就会导致错误的盒模式。
        isBorderBox = isIE && !isStrict,

        // isWindows，表示是否是windows操作系统。
        isWindows = check(/windows|win32/),

        // isMac，表示是否是苹果操作系统。
        isMac = check(/macintosh|mac os x/),

        // isAir，AIR（Adobe Integrated Runtime），是adobe开发的一个平台吧，不太了解，没用过。
        isAir = check(/adobeair/),

        // isLinux，表示是否是Liunx操作系统。
        isLinux = check(/linux/),

        // isSecure，表示是否是https连接。
        isSecure = /^https/i.test(window.location.protocol);

    // 缓存一下CSS的背景图像，防止图像闪烁，应该是IE6的一个bug。
    if(isIE6){
        try{
            document.execCommand("BackgroundImageCache", false, true);
        }catch(e){}
    }

    // 扩展Ext对象，有一些属性，这个文件中没有使用，现在先不解释其作用，后面遇到了再讲。
    Ext.apply(Ext, {

        // isStrict，表示是否是标准模式。
        isStrict : isStrict,

        // isSecure，表示是否是https连接。
        isSecure : isSecure,

        // isReady，表示Dom文档树是否加载完成
        isReady : false,

        // enableGarbageCollector和enableListenerCollection这两个变量在Element中使用了，解析到Element时再解释其含义。
        enableGarbageCollector : true,

        enableListenerCollection:false,

        // SSL_SECURE_URL，这个值在构造隐藏的iframe时，用来设置src属性的，只是当是https连接的时候才用。
        SSL_SECURE_URL : "javascript:false",

        // BLANK_IMAGE_URL，1像素透明图片地址
        BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif",

        // emptyFn，空函数
        emptyFn : function(){},

        // applyIf，把对象c的属性复制到对象o上，只复制o没有的属性
        applyIf : function(o, c){
            if(o && c){
                for(var p in c){
                    if(typeof o[p] == "undefined"){ o[p] = c[p]; }
                }
            }
            return o;
        },

        // addBehaviors函数可以一次给多个Ext.Element添加不同的事件响应函数
        addBehaviors : function(o){

            // 判断Dom树是否已经加装成功
            if(!Ext.isReady){
                // 如果Dom树没有加载好，那么等到加载好了，再执行此函数
                Ext.onReady(function(){
                    Ext.addBehaviors(o);
                });
                return;
            }

            // cache，简单缓存一下选择过的CSS Selector。
            var cache = {};

            // 遍历对象o，b的格式应该是selector@eventName
            for(var b in o){

                // parts[0]=selector,parts[1]=eventName
                var parts = b.split('@');
                if(parts[1]){
                    // 如果事件名称存在，s为selector
                    var s = parts[0];

                    // 判断一下cache缓存中是否已经查询过该selector
                    if(!cache[s]){

                        // 如果没有查询过，那么用select方法查询一下
                        cache[s] = Ext.select(s);
                    }

                    // 调用Element的on方法来注册事件函数
                    cache[s].on(parts[1], o[b]);
                }
            }

            // 释放cache变量，防止内存泄露
            cache = null;
        },

        // 取得el的id属性。el可以是Ext.Element或者是Dom元素。
        // 如果el不存在，那么生成一个自增长的id，并返回这个id。
        // 如果el存在，但是没有id属性，那么生成一个自增长的id，并赋值给el的id属性，最后返回id值。
        // 如果el存在，并且也有id属性，那么直接返回el的id值。
        // prefix表示生成自增长的id的前缀，默认值为ext-gen
        id : function(el, prefix){
            prefix = prefix || "ext-gen";
            el = Ext.getDom(el);
            var id = prefix + (++idSeed);
            return el ? (el.id ? el.id : (el.id = id)) : id;
        },

        // 类继承函数，基于javascript的prototype，模仿面相对象的继承特性。
        // 整个ExtJS框架的继承机制就是这个函数实现的。
        extend : function(){
            // override函数，用来覆盖prototype上的属性的
            var io = function(o){
                for(var m in o){
                    this[m] = o[m];
                }
            };

            // Object的构造函数
            var oc = Object.prototype.constructor;

            return function(sb, sp, overrides){
                // sb表示subclass，sp表示superclass，overrides是默认值为对象型
                // 如果sp是对象，表示没有传sb变量进来，所以重新设置一下参数
                if(typeof sp == 'object'){
                    overrides = sp;
                    sp = sb;
                    // 如果overrides中提供了构造函数，那么就用提供的，
                    // 否则用下面这个匿名函数，匿名函数会调用父类的构造函数
                    sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);};
                }

                // F是一个临时的类，其prototype指向superclass的prototype，
                // 同时也把subclass的prototype指向了F对象，
                // 这样可以避免在类继承的时候，调用superclass的构造函数
                var F = function(){}, sbp, spp = sp.prototype;
                F.prototype = spp;
                sbp = sb.prototype = new F();
                sbp.constructor=sb;
                sb.superclass=spp;
                if(spp.constructor == oc){
                    spp.constructor=sp;
                }

                // 覆盖函数
                sb.override = function(o){
                    Ext.override(sb, o);
                };
                sbp.override = io;

                // 设置默认值
                Ext.override(sb, overrides);

                // 继承函数，这样写方便，可以直接从别的类继承新类
                sb.extend = function(o){Ext.extend(sb, o);};
                return sb;
            };
        }(),

        // 覆盖函数，直接把属性复制到origclass的prototype上
        override : function(origclass, overrides){
            if(overrides){
                var p = origclass.prototype;
                for(var method in overrides){
                    p[method] = overrides[method];
                }

                // 下面是处理IE浏览器在枚举对象的属性时，
                // 原生的方法toString枚举不出来，即使是自定义的toString也不行
                if(Ext.isIE && overrides.toString != origclass.toString){
                    p.toString = overrides.toString;
                }
            }
        },

        // 生成命名空间。javascript语言没有命名空间这么一说，所以只好用对象的属性来实现。
        namespace : function(){
            var a=arguments, o=null, i, j, d, rt;
            for (i=0; i<a.length; ++i) {
                d=a[i].split(".");
                rt = d[0];
                eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');
                for (j=1; j<d.length; ++j) {
                    o[d[j]]=o[d[j]] || {};
                    o=o[d[j]];
                }
            }
        },

        // URL编码函数
        urlEncode : function(o){
            if(!o){
                return "";
            }
            var buf = [];
            for(var key in o){
                var ov = o[key], k = encodeURIComponent(key);
                var type = typeof ov;
                if(type == 'undefined'){
                    buf.push(k, "=&");
                }else if(type != "function" && type != "object"){
                    buf.push(k, "=", encodeURIComponent(ov), "&");
                }else if(Ext.isDate(ov)){
                    var s = Ext.encode(ov).replace(/"/g, '');
                    buf.push(k, "=", s, "&");
                }else if(Ext.isArray(ov)){
                    if (ov.length) {
                        for(var i = 0, len = ov.length; i < len; i++) {
                            buf.push(k, "=", encodeURIComponent(ov[i] === undefined ? '' : ov[i]), "&");
                        }
                    } else {
                        buf.push(k, "=&");
                    }
                }
            }
            buf.pop();
            return buf.join("");
        },

        // URL解码函数
        urlDecode : function(string, overwrite){
            if(!string || !string.length){
                return {};
            }
            var obj = {};
            var pairs = string.split('&');
            var pair, name, value;
            for(var i = 0, len = pairs.length; i < len; i++){
                pair = pairs[i].split('=');
                name = decodeURIComponent(pair[0]);
                value = decodeURIComponent(pair[1]);
                if(overwrite !== true){
                    if(typeof obj[name] == "undefined"){
                        obj[name] = value;
                    }else if(typeof obj[name] == "string"){
                        obj[name] = [obj[name]];
                        obj[name].push(value);
                    }else{
                        obj[name].push(value);
                    }
                }else{
                    obj[name] = value;
                }
            }
            return obj;
        },

        // each函数，迭代数组时候用的，和jQuery的each方法差不多，不过Ext的each只能迭代数组或者类数组
        each : function(array, fn, scope){
            if(typeof array.length == "undefined" || typeof array == "string"){
                array = [array];
            }
            for(var i = 0, len = array.length; i < len; i++){
                if(fn.call(scope || array[i], array[i], i, array) === false){ return i; };
            }
        },

        // 组合函数，标识了过期不推荐，这里也就不看了
        combine : function(){
            var as = arguments, l = as.length, r = [];
            for(var i = 0; i < l; i++){
                var a = as[i];
                if(Ext.isArray(a)){
                    r = r.concat(a);
                }else if(a.length !== undefined && !a.substr){
                    r = r.concat(Array.prototype.slice.call(a, 0));
                }else{
                    r.push(a);
                }
            }
            return r;
        },

        // 处理需要转义的字符，在需要转义的字符前面多加一个反斜线
        escapeRe : function(s) {
            return s.replace(/([.*+?^${}()|[\]\/\\])/g, "\\$1");
        },

        // 回调函数，可以指定this值和参数，还可以延迟执行
        callback : function(cb, scope, args, delay){
            if(typeof cb == "function"){
                if(delay){
                    cb.defer(delay, scope, args || []);
                }else{
                    cb.apply(scope, args || []);
                }
            }
        },

        // 取得html元素，el可以是id，也可以是Ext的Element对象
        getDom : function(el){
            if(!el || !document){
                return null;
            }
            return el.dom ? el.dom : (typeof el == 'string' ? document.getElementById(el) : el);
        },

        // 取得document的Element对象
        getDoc : function(){
            return Ext.get(document);
        },

        // 取得文档对象。
        // document.body = document.getElementsByTagName('body')[0];
        // document.documentElement = document.getElementsByTagName('html')[0];
        getBody : function(){
            return Ext.get(document.body || document.documentElement);
        },

        // 取得组件对象
        getCmp : function(id){
            return Ext.ComponentMgr.get(id);
        },

        // 这个用来取得数字，可以设置默认值
        num : function(v, defaultValue){
            v = Number(v == null || typeof v == 'boolean'? NaN : v);
            return isNaN(v)? defaultValue : v;
        },

        // 销毁函数，销毁的对象可以是Element或者是Component
        destroy : function(){
            for(var i = 0, a = arguments, len = a.length; i < len; i++) {
                var as = a[i];
                if(as){
                    if(typeof as.destroy == 'function'){
                        as.destroy();
                    }
                    else if(as.dom){
                        as.removeAllListeners();
                        as.remove();
                    }
                }
            }
        },

        // 清除Dom节点n
        removeNode : isIE ? function(){
            var d;
            return function(n){
                if(n && n.tagName != 'BODY'){
                    d = d || document.createElement('div');
                    d.appendChild(n);
                    d.innerHTML = '';
                }
            }
        }() : function(n){
            if(n && n.parentNode && n.tagName != 'BODY'){
                n.parentNode.removeChild(n);
            }
        },

        // javascript是一个弱类型的语音，所以下面这个type函数可以正确返回测试变量的类型
        type : function(o){
            // 其实undefined和null也可以算两种类型，这里把他们俩全归类到false了
            if(o === undefined || o === null){
                return false;
            }
            if(o.htmlElement){
                return 'element';
            }
            var t = typeof o;
            if(t == 'object' && o.nodeName) {
                switch(o.nodeType) {
                    case 1: return 'element';
                    case 3: return (/\S/).test(o.nodeValue) ? 'textnode' : 'whitespace';
                }
            }
            if(t == 'object' || t == 'function') {
                switch(o.constructor) {
                    case Array: return 'array';
                    case RegExp: return 'regexp';
                    case Date: return 'date';
                }
                if(typeof o.length == 'number' && typeof o.item == 'function') {
                    return 'nodelist';
                }
            }
            return t;
        },

        // 判断v是否为空或者未定义，allowBlank表示是否允许空字符串，默认值是false。
        // 当allowBlank设置为true时，isEmpty('')返回false
        isEmpty : function(v, allowBlank){
            return v === null || v === undefined || (!allowBlank ? v === '' : false);
        },

        // 判断v是否为空，为空的话可以设置默认值，不为空的话返回v值
        value : function(v, defaultValue, allowBlank){
            return Ext.isEmpty(v, allowBlank) ? defaultValue : v;
        },

        // 判断v是否是数组对象
        isArray : function(v){
            return v && typeof v.length == 'number' && typeof v.splice == 'function';
        },

        // 判断v是否是日期对象
        isDate : function(v){
            return v && typeof v.getFullYear == 'function';
        },

        // isOpera，表示是否是opera浏览器。
        isOpera : isOpera,

        // isWebKit，表示当前浏览器是否使用WebKit引擎。
        isWebKit: isWebKit,

        // isChrome，表示是否是谷歌浏览器。
        isChrome : isChrome,

        // isSafari，表示是否是苹果浏览器，下面代码是对其版本识别。
        isSafari : isSafari,

        isSafari4 : isSafari4,

        isSafari3 : isSafari3,

        isSafari2 : isSafari2,

        // isIE，表示是否是IE浏览器，下面代码是对其版本识别。
        isIE : isIE,

        isIE6 : isIE6,

        isIE7 : isIE7,

        isIE8 : isIE8,

        // isGecko，表示当前浏览器是否使用Gecko引擎。
        isGecko : isGecko,

        isGecko2 : isGecko2,

        isGecko3 : isGecko3,

        // isBorderBox，表示浏览器是否是IE的盒模式。
        isBorderBox : isBorderBox,

        // isLinux，表示是否是Liunx操作系统。
        isLinux : isLinux,

        // isWindows，表示是否是windows操作系统。
        isWindows : isWindows,

        // isMac，表示是否是苹果操作系统。
        isMac : isMac,

        // isAir，AIR（Adobe Integrated Runtime）
        isAir : isAir,

        // useShims，表示是IE 6浏览器或者是苹果系统上的Firefox浏览器，并且gecko内核版本小于3。
        // 具体哪里使用到了，还不知道，读到后面代码发现了，再解释。
        useShims : ((isIE && !(isIE7 || isIE8)) || (isMac && isGecko && !isGecko3))
    });

    // namespace函数的简写方式
    Ext.ns = Ext.namespace;
})();

 

五、创建Ext所用的命名空间

Ext.ns("Ext", "Ext.util", "Ext.grid", "Ext.dd", "Ext.tree", "Ext.data",
                "Ext.form", "Ext.menu", "Ext.state", "Ext.lib", "Ext.layout", "Ext.app", "Ext.ux");

六、扩展原生Function

Ext.apply(Function.prototype, {

    // 创建回调函数，这个有点太简单了，并且this指向了window，不可以自定义。功能不是很强
    createCallback : function(/*args...*/){
        var args = arguments;
        var method = this;
        return function() {
            return method.apply(window, args);
        };
    },

    // 创建委托（注：Delegate在C#里是叫委托的，其实就是c语音里的函数指针，js中叫匿名函数）
    // createDelegate比createCallback高级了一点可以设置this指针，同时也可以设置传入的参数
    createDelegate : function(obj, args, appendArgs){
        var method = this;
        return function() {
            var callArgs = args || arguments;
            if(appendArgs === true){
                callArgs = Array.prototype.slice.call(arguments, 0);
                callArgs = callArgs.concat(args);
            }else if(typeof appendArgs == "number"){
                callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
                var applyArgs = [appendArgs, 0].concat(args); // create method call params
                Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
            }
            return method.apply(obj || window, callArgs);
        };
    },

    // defer是createDelegate的延迟版，可以延迟执行
    defer : function(millis, obj, args, appendArgs){
        var fn = this.createDelegate(obj, args, appendArgs);
        if(millis){
            return setTimeout(fn, millis);
        }
        fn();
        return 0;
    },

    // 这个函数可以在你执行完原函数以后，执行一下自定义的函数。
    createSequence : function(fcn, scope){
        if(typeof fcn != "function"){
            return this;
        }
        var method = this;
        return function() {
            var retval = method.apply(this || window, arguments);
            fcn.apply(scope || this || window, arguments);
            return retval;
        };
    },

    // 这个就是完全的函数代理了，和Spring的AOP是一个概念。
    createInterceptor : function(fcn, scope){
        if(typeof fcn != "function"){
            return this;
        }
        var method = this;
        return function() {
            fcn.target = this;
            fcn.method = method;
            if(fcn.apply(scope || this || window, arguments) === false){
                return;
            }
            return method.apply(this || window, arguments);
        };
    }
});

 

七、扩展原生String

Ext.applyIf(String, {

    // 转义单引号和反斜杠
    escape : function(string) {
        return string.replace(/('|\\)/g, "\\$1");
    },

    // 这个函数是对数组进行空格补位
    leftPad : function (val, size, ch) {
        var result = new String(val);
        if(!ch) {
            ch = " ";
        }
        while (result.length < size) {
            result = ch + result;
        }
        return result.toString();
    },

    // 这个是格式化字符串，很多语言都有的功能
    format : function(format){
        var args = Array.prototype.slice.call(arguments, 1);
        return format.replace(/\{(\d+)\}/g, function(m, i){
            return args[i];
        });
    }
});

// 切换值函数
String.prototype.toggle = function(value, other){
    return this == value ? other : value;
};

// 去空格函数
String.prototype.trim = function(){
    var re = /^\s+|\s+$/g;
    return function(){ return this.replace(re, ""); };
}();

 

八、扩展原生Number

Ext.applyIf(Number.prototype, {
    // 对当前数值取一个范围
    constrain : function(min, max){
        return Math.min(Math.max(this, min), max);
    }
});

 

九、扩展原生Array

Ext.applyIf(Array.prototype, {

    indexOf : function(o){
       for (var i = 0, len = this.length; i < len; i++){
          if(this[i] == o) return i;
       }
       return -1;
    },


    remove : function(o){
       var index = this.indexOf(o);
       if(index != -1){
           this.splice(index, 1);
       }
       return this;
    }
});

 

十、扩展原生Date

// 返回一个时间差
Date.prototype.getElapsed = function(date) {
    return Math.abs((date || new Date()).getTime()-this.getTime());
};