首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

ExtJs源码分析与学习—ExtJs核心代码(2)

2012-11-05 
ExtJs源码分析与学习—ExtJs核心代码(二)接上篇下面介绍Ext.js中其他核心方法?Ext.namespace,用来管理Ext库

ExtJs源码分析与学习—ExtJs核心代码(二)

接上篇

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

?

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

?

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

?

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

?

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

?

首先判断第一个参数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,用来判断对象是否为空

?

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

?

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

?

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

?

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

?

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

?

toArray : function(){             return isIE ?                 function(a, i, j, res){                     res = [];                     for(var x = 0, len = a.length; x < len; x++) {                         res.push(a[x]);                     }                     return res.slice(i || 0, j || res.length);                 } :                 function(a, i, j){                     return Array.prototype.slice.call(a, i || 0, j || a.length);                 };         }(),

该方法有三个参数,如果只传入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 方法

?

?

//这是一个通用迭代器,可以迭代数组,也可以是对象iterate : function(obj, fn, scope){            if(Ext.isEmpty(obj)){                return;            }            if(Ext.isIterable(obj)){                Ext.each(obj, fn, scope);                return;            }else if(typeof obj == 'object'){                for(var prop in obj){                    if(obj.hasOwnProperty(prop)){                        if(fn.call(scope || obj, prop, obj[prop], obj) === false){                            return;                        };                    }                }            }        },

?

?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)

?

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

?

热点排行