Ext 详解--查看文章
 
Ext源码解析:1, Ext.js
发布时间:2008-8-17
  • 上一篇文章:
  • 下一篇文章:

  • Ext版本: 2.1

    Ext.js位于Ext源代码的core目录下,它定义了Ext的核心工具和方法集

    Ext是一个singleton,不能直接使用new来创建,因为Ext源码中没有声明Ext的constructor
    
    
    Ext = {version: '2.1'};

    声明了Ext对象,其中version属性为'2.1'

    然后定义了Ext.apply方法:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    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;
    };

    Ext.apply方法将c对象中的属性全部copy到o对象中,并且最后返回o对象

    然后紧接着是一个"Module Pattern"的使用:
    1
    2
    3
    4
    5
    6
    7
    
    (function(){
        // ...
        Ext.apply(Ext, {
            // ...
        });
        // ...
    })();

    Module Pattern实际上是一个Singleton模式,最后的()表示该匿名方法会立即执行

    其中在Ext.apply那一大段代码里,声明了很多public的属性和方法,如:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    Ext.isIE
    Ext.isGecko
    Ext.isSafari
    Ext.isWindows
    Ext.isLinux
    Ext.isMac
    ------------------------
    Ext.namespace()
    Ext.applyIf()
    Ext.extend()
    Ext.override()
    Ext.getDom()
    Ext.isArray()

    接下来对一些类进行扩展,添加了一些方法:
    对Function类全局添加了几个方法,这样所有的Function对象(也即所有的 JavaScript方法)都具有如下方法: createCallback/createDelegate/createInterceptor/createSequence/defer
    对String类添加了escape/format/leftPad/toggle/trim方法
    对Number类添加了constrain方法
    对Array类添加了indexOf/remove方法
    对Date类添加了getElapsed方法

    我们重点分析一下Ext.namespace/Ext.extend/Ext.override方法
    首先分析一下Ext.namespace方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    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]];
            }
        }
    }

    该方法实现的非常灵活,可以给namespace传递多个String参数,每个String又可以带'.'来描述命名空间的父子关系,调用方式:
    1
    2
    3
    4
    5
    
    Ext.namespace('com.beyondrails.hideto');
    // com = { beyondrails : { hideto : {} } }
    Ext.namespace('foo', 'bar')
    // foo = {}
    // bar = {}

    然后我们看看Ext.override方法:
    1
    2
    3
    4
    5
    6
    7
    8
    
    override : function(origclass, overrides){
        if(overrides){
            var p = origclass.prototype;
            for(var method in overrides){
                p[method] = overrides[method];
            }
        }
    }

    很简单,将overrides中所有方法覆盖到origclass中

    最后我们来看看Ext.extend方法:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    
    extend : function(){
        // inline overrides
        var io = function(o){
            for(var m in o){
                this[m] = o[m];
            }
        };
        var oc = Object.prototype.constructor;
        
        return function(sb, sp, overrides){
            if(typeof sp == 'object'){
                overrides = sp;
                sp = sb;
                sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);};
            }
            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;
        };
    }()

    这段代码比较诡异,一般来说继承的JavaScript实现就将subclass.prototype = new superclass(),这里也是这样实现的
    不过Ext在这里还给subclass加上了一个superclass属性和一个override方法
    而且这里支持两种方式的调用:
    1
    2
    
    Ext.extend(Class1, {a:1, b:2})
    Ext.extend(Class1, Class2, {a:1, b:2})

    其中需要注意的是直接写成Object Literal方式的对象会override而不是extend



     [Ext 详解]ExtJs 2.0 公司工程化应用的最佳实践(一) (佚名,03-06)
          几乎所有的新的编程技术,从它出现的时候,就具备了一些“个性”,这些“个性”,使得使用者被迫去接受一些约束与限制,而这往往也是导致项目工程出现问题的主要根源。组件程序员的使命,就是不断的去除这些技术的”个性“,使之能够无缝……

     [Ext 详解]extJs 2.0学习笔记(Ext.Panel篇三) (佚名,07-21)
     上一篇中把panel的config部分的文档翻译了一下,事实上,好多东西都加上了我自己的看法,也不能说完全是翻译。真是个苦差使啊。这一次主要是来研究一下Ext.Panel的属性、函数。 属性:body : Ext.Element它是指向panel的body的Element引用。它被用于包……

     [Ext 详解]Ext_基本文本输入框_Ext.form.TextField (myext,07-04)
    <mce:script type=text/javascript><!--/*Ext.form.TextField主要配置表:allowBlank           &n……

     [Ext 详解][图文]读Ext源码之五(Dom的低级封装) (myext,12-15)
    这篇看ext-base-dom.js(Ext.lib.Dom)。后续EventManager.js(Ext.EventManager)其中会用到该篇的Ext.lib.Dom。整体浏览ext-base-dom.js可以看到还是一个匿名函数执行,与上一篇不同的是这次并非返回包装好的对象pub,而是直接将……

     [Ext 详解][转载]EXT核心API详解(二)-Array/Date/Function/Numbe (佚名,07-20)
    Array类indexOf( Object o ) : Numberobject是否在数组中,找不到返回-1;找到返回位置remove( Object o ) : Array从数组中删除指定的对象object,如果找不到object则数组无变化Number类constrain( Number min……

     


    ©2008 MyExt.cn
    本站文章来自互联网,仅供学习和研究使用,如有版权问题,请发送Email:myext@126.com.