extJs 2.0学习笔记

    申明：本笔记转自伯平,163的博客,网上有关extjs好的资料本来就不多，见到他的这么一份笔记，我是欣喜若狂，在读这份笔记的时候，我流连于他的详细的备注，更惊叹于他透彻的分析，读完这份笔记以后，我从此又多了一个偶像－伯平，在此我十万分的感谢他的这份笔记对我的帮助！
              extJs 2.0学习笔记(ext.js篇)

要是以前，我铁定整天到处找教程看，光说不练，现在觉悟了，看教程看得最多，不一定能看完，看完了不一定能比作者更明白，看明白了不一定能用得好。所以看教程其实好处不大，只能作为小小的参考。很多东西看别人的始终是没有用。只有将实验进行到底才是王道……

　　这儿主要是代码分析。

　　研究工具：Dreamweave cs3(装那个extJs 2.0插件老装不上)、Aptana(一个好处，好看代码，有括号匹配，json语法好是好，就是括号多了，搞清在哪儿结束)

　　发现，extJs的代码最喜欢用json语法定义，类基本上都是用json语法定义的。而不是在外面一大路的xx.prototype.yyyy=function(){……}。不过这种语法蛮清晰。我喜欢。

　　extJs时面只有一个类：Ext，它是一个静态类。提供了经常要用到的函数。

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;
};

　　这是apply函数，作用其实相当于克隆，它把对象c中的成员全部复制到o中去。如果有defaults，也把它的内容复制到o中。这儿其实揭示javascript的一种语法：

　　javascript中的对象的成员有两种引用方法：

　　一、o.propertyName

　　二、o[propertyName]

　　这段代码关键就在o[p]=c[p]。这个要理解。尽管如此，但是不能像下面一样做：

　　var newelem=new Object();
　　Ext.apply(newelem,Ext.getDom("a1"));
　　Ext.getDom("form1").appendChild(newelem);

 

　　下面一大段的代码，由于dw不好看代码，半天才晓得那儿是个(function(){……Ext.apply(Ext,{……}})()，这是我把概述出来。这样写呢，实在有点叫人别扭，作者的意图是想把这相关的一段全部放到括号中，以免造成理解上的混乱。能理解。不过，这种写法不大招人喜欢。

 

        applyIf : function(o, c){
            if(o && c){
                for(var p in c){
                    if(typeof o[p] == "undefined"){ o[p] = c[p]; }
                }
            }
            return o;
        }

　　这是applyIf的代码，事实上，在文档上面，它的描述有问题，应当是是当o,c两个对象都存在时，则把o中不存在，c中存在的属性复制到o中，且属性名不变。而不是所谓“如果o不存在时就把属性复制到o中”，哪有这种说法的。另外，判断一个对象是不是存在，最严谨的还是用typeof的方法。

 

addBehaviors : function(o){
            if(!Ext.isReady){
                Ext.onReady(function(){
                    Ext.addBehaviors(o);
                });
                return;
            }
            var cache = {}; 
            for(var b in o){
                var parts = b.split('@');
                if(parts[1]){ // for Object prototype breakers
                    var s = parts[0];
                    if(!cache[s]){
                        cache[s] = Ext.select(s);
                    }
                    cache[s].on(parts[1], o[b]);
                }
            }
            cache = null;
        }

　　这个地方巧妙在于依赖于Ext.isReady。这个属性我估计应当是在onload第一行将它设成true的，它的作用就是用于标志当前是不是已经文档模型加载完了。前面几行的意思：如果dom模型还没有加载完，没有准备好，就将这些事件注册代码交给onload去做。即Ext.onReady。

　　如果DOM模型已加载完，那么就马上注册事件，区别：前者是延迟注册、后者是马上注册。为什么要延迟，因为DOM都没有创建完，有些元素在DOM树中还不存在，当然就没法设置它了。其余的地方则不足道，后面的关键就是Ext.select了。

 

        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;
        }

　　这儿有一个技巧：prefix = prefix || "ext-gen"，这是最简捷的代码啊。本来要一个if语句的。

 

　　extend、namespace两个函数硬是没有看懂，等水平高了再来研究。

 

　　urlEncode的源代码原理简单，但是，要是我的话还是没法写得这么清楚，主要是情况比较多。这儿主要是学到了数组的push，原来以为push只能传一个参数，没想到能一次传多个。发现，很多时候，在构造一个复杂的字符串时都是用到数组的。至于urlEncode的作用，就是把一个JSON对象编码成一个查询字符串。

        each : function(array, fn, scope){
            if(!Ext.isArray(array)){
                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; };
            }
        }

　　这个函数的功能并不是像它的名字一样简单啊，这儿又学到了：

　　一、原来构造单元素数组可以直接这样写：a=[a]。

　　二、scope在这儿是默认伪调用者，同时，还把当前数组元素值、序号、数组引用都传过去了。这个可能在fn中用得着。要注意。

　　另外就是x===false这个语句要注意。要知道undefined==false。

        callback : function(cb, scope, args, delay){
            if(typeof cb == "function"){
                if(delay){
                    cb.defer(delay, scope, args || []);
                }else{
                    cb.apply(scope, args || []);
                }
            }
        }

　　吃了一惊，Function什么时候有个成员叫defer了？后来才知，defer是extJs扩展出来的。delay是时延。老实说scope这个东西不能言传只可意会，不看代码是不清楚的。事实上javascript中的确是存在defer属性的。用于修饰script元素的，确实是用于延迟script里面内容的加载。详情见此处。

        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();
　　　　　　}
                }
            }
        }

　　这个函数用来销毁对象，由代码可知一点，extJs鼓励大家在创建自己的类有必要的话就写destroy。如大量没用的dom元素。在这里，destory相当于析构造函数一样。至于removeAllListenners，remove这两个函数，它们是Ext.Element类的成员。

　　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);
            }
        }

　　这个代码作用显然，就是删除一个结点。但是这个代码的写法实在有点让人难以接受啊。最郁闷是如果ie，那么，那个参数n是怎么传进去的呢，因为外面罩住的那个函数没有参数，本来没有参数也好办，关键是外面的那个函数根本没有传参数给return里面的函数，这居然也能传进去，见识到了。

　　经过一番实验与琢磨，发现，其实并不是外面的函数能传参给里面的那个函数，实在是因为那个()用得好，如有：

　　var do1=function(){return function(n){}}();

　　关键是要外面的函数{}之后要马上“自调用”一下，这样就会返回一个结果，这个结果是个函数表达式，它就能传参了。所以如果外面的函数没有()的话，那么实际调用将必须写成：do1()(3)的形式，连写两个括号。。这个问题我想了好久，终于想清楚了。

    createCallback : function(/*args...*/){
        // make args available, in function below
        var args = arguments;
        var method = this;
        return function() {
            return method.apply(window, args);
        };
    }

　　顾名思意，回调。这个函数是对Function对象的原型扩展。所以，所有函数都有这个成员。例如：

　　function A(){}

　　B=A.createCallback();

　　B();

　　最后B()执行调用的是A。有人说，既然调用B就相当于调用A，还不如直接用

　　function B(){A.apply(window,this.argments);}

　　的确，这样确实可以达到差不多的目的，但是，写代码要注意封装。尽管这只有一行代码，但是，相对于客户程序员来说，createCallback比apply亲切多了，而且，它还节省了不少字符，这就节省带宽。

　　什么时回调？让别人来调，那为什么不定义在那个调用者里面？因为，只有定义在别人的里面才可以获得别人的信息。

　　当然，在这儿我还是学到了一点，以前没意识到，怎样把外层的this传给内层的function。只需method=this。

　　有一些Ext下的函数并没有定义在ext.js中。如：Ext.onReady、Ext.reg、Ext.select、Ext.query。