ExtJs源码分析与学习—ExtJs核心代码（二）

下面介绍Ext.js中其他核心方法

 

Ext.namespace，用来管理Ext库命名空间的方法

 

Js代码   

1. namespace : function(){  
2.             var o, d;  
3.             Ext.each(arguments, function(v) {//循环遍历所传的参数  
4.                 d = v.split(".");//返回字符串数组  
5.                 o = window[d[0]] = window[d[0]] || {};//把数组第一个元素作为window对象的一个子对象  
6.                 Ext.each(d.slice(1), function(v2){//再把数组中其他元素按顺序作为o的子对象，注意是逐级的，即第二个元素是o的子对象，第三个元素是o的子对象的子对象，依次类推  
7.                     o = o[v2] = o[v2] || {};  
8.                 });  
9.             });  
10.             return o;  
11.         },  

 

该方法实现了js命名空间的管理，类似于java包结构，其Ext.ns是该方法的简写，Ext.namespace中用到了方法Ext.each

 

Js代码   

1. each : function(array, fn, scope){  
2.             if(Ext.isEmpty(array, true)){  
3.                 return;  
4.             }  
5.             //判断array是否可迭代，对于数组、NodeList、HTMLCollection都是可迭代的，即返回true。  
6.             //或者是字符型，数字型和布尔型时直接封装成数组  
7.             if(!Ext.isIterable(array) || Ext.isPrimitive(array)){  
8.                 array = [array];  
9.             }  
10.             for(var i = 0, len = array.length; i < len; i++){  
11.                 //fn的第一个参数为集合元素，第二个参数i为索引，第三个参数为被迭代元素自身  
12.                 if(fn.call(scope || array[i], array[i], i, array) === false){  
13.                     return i;  
14.                 };  
15.             }  
16.         },  

 

首先判断第一个参数array是否为数组，如果为空直接返回。接着判断array是否可迭代，对于数组、NodeList、HTMLCollection都是可迭代的，即返回true。不可迭代的，如基本类型的字符串，数字等会将其包装成数组。接着就是for循环，回调函数fn，fn的执行上下文scope，scope如果没有传默认为array[i]，即在fn内使用this取到集合的每一个元素。fn的第一个参数为集合元素，第二个参数i为索引，第三个参数为被迭代元素自身。

 

最后还有个技巧，可以在fn内使用某个条件为false如 return i=3 来终止迭代，这时候会返回迭代最后一次的索引i。

可以看到 Ext.each 的用法与 JQuery.each 类似，不同之处在于Ext.each的第三个参数可以指定回调函数的执行上下文，JQuery.each  的第三个参数仅供库内部使用。

 

Ext.each 调用了方法Ext.isEmpty，用来判断对象是否为空

 

Js代码   

1. isEmpty : function(v, allowBlank){  
2.             return v === null || v === undefined || ((Ext.isArray(v) && !v.length)) || (!allowBlank ? v === '' : false);  
3.         },  

 

如果传入的值是null、undefined或空字符串或空数组，则返回true。
allowBlank（可选的）如果该值为true，则空字符串不会当作空而返回true。

 

Ext.isEmpty中调用了Ext.isArray，用来判断是否为数组

 

Js代码   

1. isArray : function(v){  
2.             return toString.apply(v) === '[object Array]';  
3.         },  

 

Ext.toArray 方法实现了把可迭代的对象转换为数组，该方法也是一个匿名函数自执行，执行后返回的function才是真正的Ext.toArray

 

Js代码   

1. toArray : function(){  
2.              return isIE ?  
3.                  function(a, i, j, res){  
4.                      res = [];  
5.                      for(var x = 0, len = a.length; x < len; x++) {  
6.                          res.push(a[x]);  
7.                      }  
8.                      return res.slice(i || 0, j || res.length);  
9.                  } :  
10.                  function(a, i, j){  
11.                      return Array.prototype.slice.call(a, i || 0, j || a.length);  
12.                  };  
13.          }(),  

该方法有三个参数，如果只传入a，则取可迭代的所有元素

可以看到实现时对浏览器进行了判断，IE使用for循环的遍历  伪数组   ，将其push到res中。非IE浏览器则使用Array.prototype.slice。

IE中为何不能使用Array.prototype.slice呢，对于NodeList等并非一个JavaScript object。会抛异常。怿飞   总结过。

然而，随着IE9 beta的发布，IE9中已经将javascript引擎内置在浏览器中，IE9 中Array.prototype.slice.call(NodeList) 已经不再抛异常了，可以使用其将NodeList等转换为数组。因此Ext.isIE这个条件改为 Ext.isIE6||Ext.isIE7||Ext.isIE8 则较为合理了。之前DOM的错误实现也部分修复了，相关  Blog   。

 

Ext.iterate 方法

 

 

Js代码   

1. //这是一个通用迭代器，可以迭代数组，也可以是对象  
2. iterate : function(obj, fn, scope){  
3.             if(Ext.isEmpty(obj)){  
4.                 return;  
5.             }  
6.             if(Ext.isIterable(obj)){  
7.                 Ext.each(obj, fn, scope);  
8.                 return;  
9.             }else if(typeof obj == 'object'){  
10.                 for(var prop in obj){  
11.                     if(obj.hasOwnProperty(prop)){  
12.                         if(fn.call(scope || obj, prop, obj[prop], obj) === false){  
13.                             return;  
14.                         };  
15.                     }  
16.                 }  
17.             }  
18.         },  

 

 urlDecode

 把一个已经encoded的URL字符串转换为对象。如Ext.urlDecode("foo=1&bar=2"); 就是{foo: "1", bar: "2"}； Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", false);就是{foo: "1", bar: ["2", "3", "4"]}。
overwrite （可选的）重复名称的就当作为数组，如果该项为true就禁止该功能（默认为false）。

 

urlAppend

//追加url参数

 

getDom

返回dom对象，参数可以是string(id)，dom node，或Ext.Element。

 

getBody

 

返回当前document.body的Ext.Element 类型。

 

getHead

 

返回当前document.head的Ext.Element 类型。

 

removeNode

移除document的DOM节点。如果是body节点的话会被忽略。

 

isDate

返回true表名送入的对象是JavaScript的date类型对象，否则为false。

 

还有常用的isObject、isPrimitive（是否为字符数字或布尔型）、isFunction、isNumber、isString、isBoolean、isElement、isDefined（是否为undefined）

 

其他的方法就是一些判断浏览器类型和版本以及操作系统等，这里就不罗列了，详细查看源代码