ext-base.js 是我们使用ExtJS之前必须要引入的文件,我们今天就来分析一下,ext-base中它究竟干了什么。
首先ext-base这个文件包含了ExtJS的版本信息、最基本的Functions及Utilities,以及最重要的Ext对象。
1.window.undefined = window.undefined;
在较早的浏览器中因为window.undefined不存在所以会返回undefined,将此赋给等号前的window.undefined这样后面就可以直接使用if (a==="undefined")的判断方式了。在新版本的浏览器中window.undefined=undefined;因此不会造成什么负面影响。
除了使用window.undefined=window.undefined和window["undefined"]=window["undefined"]外,还有很多别的办法来实现对IE5及之前浏览器的兼容,如
var undefined = void null; //void函数永远返回undefined
var undefined = function(){}();
var undefined = void 0;
只要等号后的表达式返回undefined即可。
2.Ext.apply(a,b)方法,这个方法将b对象中的属性加到a对象中或者覆盖a对象的属性值。
var a = {age:12};
var b = {name:'lion',age:15}
Ext.apply(a,b);
那么现在的a 就是{age:15,name:'lion'}
Ext.applyIf(a,b)方法,这个方法将b对象的不存在于a对象中的属性拷贝到a对象中,相同的属性不再覆盖。
var a = {age:12};
var b = {name:'lion',age:15}
Ext.applyIf(a,b);
那么现在的a 就是{age:12,name:'lion'}
3.最重要的就是其中的自运行函数了,什么是自运行函数呢?例如:function(a){alert(a)}(1); 这样加载这段js代码的时候就会执行其中的逻辑,弹出就会显示1,有时候为了明显的指明这是一个自运行函数,故写成(function(a){alert(a)})(1); Ext-base中就采用了这种方式。
这个自运行函数中做了哪些工作呢?可想而知,这些工作对于Ext的运行是非常之重要了。
(1)document渲染类型的判断
首先解释一下什么叫渲染类型
document.compatMode:可以用来判断当前页面采用的渲染方式。
BackCompat:标准兼容模式关闭。
CSS1Compat:标准兼容模式开启。
当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。
Ext拿到浏览器的渲染类型后,对于Ext的组件布局的渲染打下了基础,另外对于IE浏览器使用非兼容渲染模式BackCompat时,Ext专门定义了一个变量isBorderBox来更好的支持IE的布局。
(2)浏览器类型、操作系统、url链接类型的判断
能够判断浏览器的类型:Opera、Chrome、WebKit、Safari、Safari2、Safari3、Safari4、ie6、ie7、ie8、Gecko、Gecko2、Gecko3;
能够判断操作系统的类型:windows、linux、mac;
能够判断的链接类型:https 安全连接;
注:为什么Ext要判断是否是https安全连接呢?因为在使用https环境下,ie的iframe的页面about:blank引用会出现问题,iframe在页面上就会显示出一个小框,提示使用了不同的协议无法显示,此时将about:blank换为JavaScript:''即可解决。Ext的大师们把这一点都考虑进去了。
所有的以上判断都是用正则表达式匹配来实现的。另外发现了正则表达式中“i”关键字的功能是忽略大小写。
(3) 解决IE6下图片缓存及鼠标操作背景图抖动问题
document.execCommand("BackgroundImageCache", false, true);
(4)将Ext对象中打入dom是否ready标记、垃圾回收器是否启用标记、事件回收器是否启用标记(垃圾回收器回收时是否启用它)、级联事件回收器是否启用(节点删除时是否将其孩子结点的事件都删除)、是否使用本地浏览器解析JSON数据。
(5)唯一节点ID生成方法,以前一直弄不明白Ext.id()这个方法为什么能够得到全局唯一的ID值呢,现在弄明白了,原来在这个函数中,Ext设置了一个变量idSeed,初始时为0,当我们调用Ext.id()时,这个idSeed就会加1,并且追加一些Ext特有的前缀组合成一个唯一ID串返回给我们。
(6)最重要的莫属extend方法了,明天继续分析,今天就到这吧。