[ExtJS3.2源码每天一小时](1)ext-base.js做了什么（之一）

    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方法了，明天继续分析，今天就到这吧。

        

 

评论

1 楼 clskkk2222 2012-03-08  

博主辛苦，写的很到位，受教了