ExtJs源码学习之namespace和urlEncode

[size=medium]
    真的很惭愧，花了一个半小时才读完两个函数， 亏得我还是挑了较简单的来看。有两个原因。第一个肯定是自己的基础不扎实。说实话，我的js功底的确不怎么好， 只知道用一些常用的函数来实现一些普通的功能。对于那些自己不怎么用的函数看都不想看一下。读了几个函数的代码后才发现，不这那些函数不常用，而是已经被人家封装成更常用的了。都是着了浮躁的道， 痛定思过， 一定要改。 第二个原因，编写ext的那些大牛们实在是太牛了, 太惜行如金了，大量使用了 ||、&&和三目运算符，人家需要十几行的代码大牛们一行搞定。结果代码是紧凑了，但可读性就低了。比如这句:buf.push('&', e(key), '=', (!Ext.isEmpty(val) && (val != key || !empty)) ? (Ext.isDate(val) ? Ext.encode(val).replace(/"/g, '') : e(val)) : '');

不多发表感慨了，总结一下今天的阅读收获。

先是Ext.namespace()的源代码， 对于这个函数的用法就不说了， 不清楚的可以去查文档，在Ext类中。

        namespace : function(){
            var o, d;
            Ext.each(arguments, function(v) {
                d = v.split(".");
                o = window[d[0]] = window[d[0]] || {}；
                Ext.each(d.slice(1), function(v2){
                    o = o[v2] = o[v2] || {};
                });
            });
            return o;
        }

    第一个难点在  o = window[d[0]] = window[d[0]] || {}；   这句上面.    首先执行  window[d[0]] || {};     若window[d[0]]为空或undefined, 返回{},否则返回window[d[0]]; 然后执行window[d[0]]=  .    这个window[val]看起来有点难理解. 其实它的意思是给window对象名为val的属性赋值, 再说白了就是创建一个名为val的变量. 例如window['abc']='abc'的效果和 var abc='abc'; 相同. (若想知道为什么, 可以去W3CSchool看看windows对象的说明).  最后执行o=window[d[0]].
    我遇到的第二个坑是在slice函数上。刚看见它时怎么看怎么陌生，查了W3CSchool才知道它是数组对象的一个函数：arrOjb.slice(start,end),效果类似于字符串的substring().汗颜！再感慨一下： 基础不牢啊！

    这个函数的返回值不是创建的所有对象，而后创建最后一个对象。如Ext.namespace("a","b","c.d.e")；返回的是对象e。

然后是Ext.urlEncode。挑它不是因为它常用， 而是因为它看起来好欺负。

urlEncode : function(o, pre){
            var empty,
                buf = [],
                e = encodeURIComponent;

            Ext.iterate(o, function(key, item){
                //alert("key="+key+",item="+item);
                empty = Ext.isEmpty(item);
                Ext.each(empty ? key : item, function(val){
                    buf.push('&', e(key), '=', (!Ext.isEmpty(val) && (val != key || !empty)) ? (Ext.isDate(val) ? Ext.encode(val).replace(/"/g, '') : e(val)) 

: '');
                });
            });
            if(!pre){
                buf.shift();
                pre = '';
            }
            return pre + buf.join('');
        }

     这段代码对我来说有三道坎。第一道坎是e = encodeURIComponent; 这个是小坎， 查查文档就明白了：‘encodeURI() 函数可把字符串作为 URI 进行编码。如果 URI 组件中含有分隔符，比如 ? 和 #，则应当使用 encodeURIComponent() 方法分别对各组件进行编码。’  将encodeURIComponent赋给e纯粹是为了使用方便。
    第二道坎是

Ext.iterate(o, function(key, item){
                empty = Ext.isEmpty(item);
                Ext.each(empty ? key : item, function(val){
                    buf.push('&', e(key), '=', (!Ext.isEmpty(val) && (val != key || !empty)) ? (Ext.isDate(val) ? Ext.encode(val).replace(/"/g, '') : e(val)) 

: '');
                });
            });

    没错， 这一大段代码一开始都没读懂。文档中的函数说明是‘Takes an object and converts it to an encoded URL. e.g. Ext.urlEncode({foo: 1, bar: 2}); would return "foo=1&bar=2".  Optionally, property values can be arrays, instead of keys and the resulting string that's returned will contain a name/value pair for each array value.’， 意思是说这个函数可以处理json对象,也可以处理数组。当参数为json对象时，这个函数的执行过程很容易理解，但当参数为数组时就不那么直接了. 直到我加入上面那句alert后才有点明白:Ext.iterate在处理数组对象如["a","b"]时,会把它当作json对象{a:0,b:1}来看. 
    至于buf.push('&', e(key), '=', (!Ext.isEmpty(val) && (val != key || !empty)) ? (Ext.isDate(val) ? Ext.encode(val).replace(/"/g, '') : e(val)) : '');这一句有点太长了.可以拆分为buf.push('&', e(key), '=')和buf.push((!Ext.isEmpty(val) && (val != key || !empty)) ? (Ext.isDate(val) ? Ext.encode(val).replace(/"/g, '') : e(val)); 那么最难理解的就是!Ext.isEmpty(val) && (val != key || !empty)这个判断了. 到现在都没想明白val != key || !empty这个条件会在什么情况下起作用,即,val在什么情况下会等于key? 难道会出现传入{...,undefined:undefinde,...}或{...,null=null,...}这种两种参数的情况? 如果没有传入这两怪异的参数的话, (!Ext.isEmpty(val) && (val != key || !empty))就可以简化为!Ext.isEmpty(val)了,剩下的也好理解了.
    第三个坎是buf.shif()这个函数:arrayObject.shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
ps:遇到的坎越多,只要不被吓倒, 收获就越大. 
昨天本来还看了Ext.extend的源代码, 不过硬是被打击了.
[/size]