EXT源码解析:EXT.js(一)

Ext  =  {version:  ' 2.0.1 ' };

这行代码使用对象直接量的方式来初始化Ext变量,说明Ext属于一个单件对象,无需new就可以直接使用。此句只定义了一个属性version来声明ext的版本号。

window[ " undefined " =  window[ " undefined " ];

这行经典奇异的代码,开始也让我晕的摸不着头脑,不过后来查了一些资料弄明白了,具体这里就不说了,可以参看我的这篇文章:http://www.cnitblog.com/yemoo/archive/2007/10/11/34712.html

Ext.apply  =   function (o, c, defaults){
    
if (defaults){
        
//  no "this" reference for friendly out of scope calls
        Ext.apply(o, defaults);
    }
    
if (o  &&  c  &&   typeof  c  ==   ' object ' ){
        
for ( var  p  in  c){
            o[p] 
=  c[p];
        }
    }
    
return  o;
};

这是为Ext对象定义的第一个方法,该方法实现了对象的复制功能,注意是对象的复制,不能是其他类型如function等,对象可以有多种创建方式,如对象直接量{..},new Object(),new 函数名()等。
该方法可接受三个参数,其中前两个是必须的。
如果default存在则先复制defaults到o中,然后再复制c,如果c与default有相同的属性或方法则c中的属性或方法会覆盖defaults的。

( function (){
    
var  idSeed  =   0 ;
    
var  ua  =  navigator.userAgent.toLowerCase();
   
// 省略N行
})();

这段代码采用闭包的方式,其优点主要就是对变量作用域范围的限定,防止与外部变量冲突,实现对程序较好的封装。

         var  isStrict  =  document.compatMode  ==   " CSS1Compat " ,
        isOpera 
=  ua.indexOf( " opera " >   - 1 ,
        isSafari 
=  ( / webkit | khtml / ).test(ua),
        isIE 
=   ! isOpera  &&  ua.indexOf( " msie " >   - 1 ,
        isIE7 
=   ! isOpera  &&  ua.indexOf( " msie 7 " >   - 1 ,
        isGecko 
=   ! isSafari  &&  ua.indexOf( " gecko " >   - 1 ,
        isBorderBox 
=  isIE  &&   ! isStrict,
        isWindows 
=  (ua.indexOf( " windows " !=   - 1   ||  ua.indexOf( " win32 " !=   - 1 ),
        isMac 
=  (ua.indexOf( " macintosh " !=   - 1   ||  ua.indexOf( " mac os x " !=   - 1 ),
        isLinux 
=  (ua.indexOf( " linux " !=   - 1 ),
        isSecure 
=  window.location.href.toLowerCase().indexOf( " https " ===   0 ;

这段对浏览器及系统平台的检测代码还是很值得我们去学习和借鉴的,相信这些都是经过ext相关人员精心测试过的。

if (isIE  &&   ! isIE7){
        
try {
            document.execCommand(
" BackgroundImageCache " false true );
        }
catch (e){}
    }

该段代码其实主要是为了解决IE7之前的浏览器的一个背景图片闪烁的bug(IE有时对同一张背景图片position切换时也会重新加载而产生闪烁)。

Ext.apply(Ext, {..})

利用apply方法为Ext对象增加一些属性和方法。
注意几个属性:
isReady : false,
isReady属性用来表示页面dom结构是否已经加载完成,在进行dom操作时务必要保证isReady已经是true,当然我们的代码一般是在Ext.onReady()中的,这就不需要判断了。
BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif", 
Ext为了实现对皮肤的灵活定制,因此各种组件使用的图片都采用背景图片的方式来设置,通过一个透明图片来实现占位符的作用。如果这个路径设置不正确,会发现图片上出现很多小方块很难看。因此一般需要先设定该图片的路径。

applyIf :  function (o, c){
            
if (o  &&  c){
                
for ( var  p  in  c){
                    
if ( typeof  o[p]  ==   " undefined " ){ o[p]  =  c[p]; }
                }
            }
            
return  o;
        },

该函数与apply的区别主要在于它不会覆盖原对象的方法和属性,而apply则会覆盖原对象中与要复制对象同名的方法或属性。

addBehaviors :  function (o){
            
if ( ! Ext.isReady){
                Ext.onReady(
function (){
                    Ext.addBehaviors(o);
                });
                
return ;
            }
            
var  cache  =  {};  //  simple cache for applying multiple behaviors to same selector does query multiple times
             for ( var  b  in  o){
                
var  parts  =  b.split( ' @ ' );
                
if (parts[ 1 ]){  //  for Object prototype breakers
                     var  s  =  parts[ 0 ];
                    
if ( ! cache[s]){
                        cache[s] 
=  Ext.select(s);
                    }
                    cache[s].on(parts[
1 ], o[b]);
                }
            }
            cache 
=   null ;
        },

该方法的具体使用我就不讲了,只说对这个函数的一些看法:
1、首先使用Ext.isReady来做了一个判断,其实没必要,这样代码其实就不统一了。既然这个有判断,那下面的getDom。。怎么都不做个判断?而且我们的代码一般也都放在Ext.onReady中。并不是说这段代码有错误,只是觉得有点多余不够统一
2、使用cache变量来对dom进行缓存,这是个好主意,防止重复的dom操作。后面使用Ext本身的select和on方法,这是很好做到了代码重用。
3、最后cache=null;貌似很不起眼的一行代码,但实际上我们还是应该注意的,cache是一个object,而且程序中通过on方法绑定了事件,循环引用产生了,这样如果不手工将cache设置为null就会产生内存泄露,cache对象不能自动的释放,object产生循环引用后在不需要时应该即时设置为null!谨记!

你可能感兴趣的:(ExtJS)