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

向右看齐 2024-02-17 20:37 46阅读 0赞

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

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

Js代码 ![收藏代码][icon_star.png]

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.  \},

![save_snippets.png][]

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

Js代码 ![收藏代码][icon_star.png]

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.  \},

![save_snippets.png][]

首先判断第一个参数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代码 ![收藏代码][icon_star.png]

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

![save_snippets.png][]

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

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

Js代码 ![收藏代码][icon_star.png]

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

![save_snippets.png][]

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

Js代码 ![收藏代码][icon_star.png]

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.  \}(),

![save_snippets.png][]

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

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

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

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

Ext.iterate 方法

Js代码 ![收藏代码][icon_star.png]

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.  \},

![save_snippets.png][]

**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）

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

[icon_star.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/17eb75c687f64413b40d769fe16521f0.png
[save_snippets.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ce02e9cbc6e240ba85a99258bbed1537.png
[Java]: http://lib.csdn.net/base/javase
[JQuery.each]: http://snandy.iteye.com/blog/574932
[jQuery]: http://lib.csdn.net/base/jquery
[Link 1]: http://linder0209.iteye.com/blog/580373
[JavaScript]: http://lib.csdn.net/base/javascript
[Link 2]: http://www.planabc.net/2010/01/06/arguments_to_array/
[Blog]: http://blogs.msdn.com/b/ie/archive/2010/09/02/dup-exploring-ie9-s-enhanced-dom-capabilities.aspx
[Ext.Element]: http://linder0209.iteye.com/blog/1071682
[Link 3]: http://lib.csdn.net/base/operatingsystem