ExtJS 4中动态加载的路径设置-CSDN博客

本文详细介绍了ExtJS中Loader对象如何通过getPath方法实现类文件的动态加载，包括路径配置、前缀匹配及自定义路径设置等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在此首先感谢CSDN的文顺网友，是他提醒了我需要写这文的。

在Loader对象中，动态加载是使用getPath方法获取下载路径的，其代码如下：

 
getPath :  function  ( className )  { 
    var   path  =  ' ' , 
        paths  =  this  . config . paths , 
        prefix  =  this  . getPrefix ( className ) ; 

    if   ( prefix . length  >  0  )  { 
        if   ( prefix  = = =  className )  { 
            return   paths [ prefix ] ; 
        } 

        path  =  paths [ prefix ] ; 
        className  =  className . substring ( prefix . length  +  1  ) ; 
    } 

    if   ( path . length  >  0  )  { 
        path  + =  ' / ' ; 
    } 

    return   path . replace ( / \ / \ . \ // g,  '/')  +  className.replace(/\./g,  "/")  +  '.js'; 
} , 

 

从变量paths的定义可知，预设路径保存在Loader对象的config对象的paths对象里的，其默认配置如下：

 
paths :  { 
    ' Ext ' :  ' . ' 
} 

 

也就是说，默认Ext的加载路径是根目录。

代码先使用getPrefix方法获取类名的前缀，其代码如下：

 
getPrefix :  function  ( className )  { 
    var   paths  =  this  . config . paths , 
        prefix ,  deepestPrefix  =  ' ' ; 

    if   ( paths . hasOwnProperty ( className ) )  { 
        return   className ; 
    } 

    for   ( prefix  in   paths )  { 
        if   ( paths . hasOwnProperty ( prefix )  & &  prefix  +  ' . '  = = =  className . substring ( 0  ,  prefix . length  +  1  ) )  { 
            if   ( prefix . length  >  deepestPrefix . length )  { 
                deepestPrefix  =  prefix ; 
            } 
        } 
    } 

    return   deepestPrefix ; 
} , 

 

代码会检查paths对象中是否包含有以类名为属性名称的属性，如果有，说明该类有直接路径，直接返回就可以了。例如，定义了一个类名为“My.App.User”的类，在paths对象存在以下定义：

 
' My . App . User ' : ' . . / app / user . js ' 
 

说明“My.App.User”类不用计算其下载路径，直接根据paths对象中的定义去下载文件就可以了。

如果不存在直接路径，就先找带有路径的前缀，例如“My.App.User”类，如果在paths对象中只存在“My”的路径定义，则返回前缀“My”。如果paths对象既存在“My”和“My.App”的路径定义，则返回前缀“My.App”。

如果以上都不存在，则返回空字符串。

回到getPath方法，如果返回的前缀不是空字符串，则检查前缀是否与类型相同，如果相同，从paths对象中取出路径直接返回。否则取出前缀的路径，并把类名的前缀部分去掉。

接着判断路径（path）是否存在，如果不存在，给路径加一个“/”。

最后把类名转换为带“.js”的文件名加上路径返回。要注意的是，如果类名中还带有“.”，那么会将“.”转换为“/”，也就是当成路径的一部分。

要预设加载路径，可使用Loader对象的setPath方法。代码很简单，就是将配置对象的成员复制到paths路径里，在此就不讲述了。

下面在浏览器中打开ExtJS 4的API文档，然后在Firebug控制台输入以下命令：

 
Ext . Loader . setPath ( { 
    " My " : " ./app " , 
    " My.app " : " ./app " , 
    " Ext " : ' . / lib / src ' 
} ) 
console . dir ( Ext . Loader . config . paths ) ; 

 

命令使用setPath方法预设了“My”、“My.app”和“Ext”的加载路径。

运行后，在控制台可看到以下输出：

 
Ext     " ./lib/src/ " 
My      " ./app " 
My . app   " ./app/ " 

 

该设置是根据一般的项目结构设置的路径。一般情况下都会加载ext-all.js，因而不用设置Ext目录也行，但是如果你喜欢全部动态加载，也可以按示例代码进行设置，把ExtJS的源代码放到lib的src目录里。一般项目中，自定义的类可以放到app目录下，类名的命名空间可以随便设置，只要在paths对象中指定其路径就可以了。例如定义了“My.base”、“My.app.user”和“My.app.product”等类，以及使用“Ext.ux.plugin”等Ext插件或扩展，使用getPath获得的路径将是：

 
. / app / base . js 
. / app / user . js 
. / app / product . js 
. / lib / scr / ux / plugin . js 

 

现在的问题是插件也要放到src目录下，因而为了方便，你可以将插件另外定义插件的目录，例如：

 
Ext . Loader . setPath ( " Ext.ux " , " ./lib/ux " ) ; 
 

这样就可以把插件放到lib下的ux目录了。

经过以上的设置，在OnReady方法前使用Ext.require方法就可顺利的加载库文件了，例如：

 
Ext . Loader . setConfig ( { enabled :  true  } ) ; 
Ext . Loader . setPath ( { 
    " My " : " ./app " , 
    " My.app " : " ./app " , 
    " Ext " : ' . / lib / src ' , 
  " Ext.ux " : " ./lib/ux " 
} ) ; 
Ext . require ( [ 
    ' My . base ' , 
    ' My . app . user ' , 
    ' My . app . product ' , 
    ' Ext . ux . plugin ' 
] ) ; 
Ext . onReady ( function  ( ) { 
    // 应用代码; 
} ) ; 

 

代码中，setConfig 方法设置eabled属性的作用是开启动态加载中的依赖加载功能。

1	getPath : function ( className ) {
2	var path = ' ' ,
3	paths = this . config . paths ,
4	prefix = this . getPrefix ( className ) ;
5
6	if ( prefix . length > 0 ) {
7	if ( prefix = = = className ) {
8	return paths [ prefix ] ;
9	}
10
11	path = paths [ prefix ] ;
12	className = className . substring ( prefix . length + 1 ) ;
13	}
14
15	if ( path . length > 0 ) {
16	path + = ' / ' ;
17	}
18
19	return path . replace ( / \ / \ . \ // g, '/') + className.replace(/\./g, "/") + '.js';
20	} ,
21

1	getPrefix : function ( className ) {
2	var paths = this . config . paths ,
3	prefix , deepestPrefix = ' ' ;
4
5	if ( paths . hasOwnProperty ( className ) ) {
6	return className ;
7	}
8
9	for ( prefix in paths ) {
10	if ( paths . hasOwnProperty ( prefix ) & & prefix + ' . ' = = = className . substring ( 0 , prefix . length + 1 ) ) {
11	if ( prefix . length > deepestPrefix . length ) {
12	deepestPrefix = prefix ;
13	}
14	}
15	}
16
17	return deepestPrefix ;
18	} ,
19

1	Ext . Loader . setPath ( {
2	" My " : " ./app " ,
3	" My.app " : " ./app " ,
4	" Ext " : ' . / lib / src '
5	} )
6	console . dir ( Ext . Loader . config . paths ) ;
7

1	. / app / base . js
2	. / app / user . js
3	. / app / product . js
4	. / lib / scr / ux / plugin . js
5

1	Ext . Loader . setConfig ( { enabled : true } ) ;
2	Ext . Loader . setPath ( {
3	" My " : " ./app " ,
4	" My.app " : " ./app " ,
5	" Ext " : ' . / lib / src ' ,
6	" Ext.ux " : " ./lib/ux "
7	} ) ;
8	Ext . require ( [
9	' My . base ' ,
10	' My . app . user ' ,
11	' My . app . product ' ,
12	' Ext . ux . plugin '
13	] ) ;
14	Ext . onReady ( function ( ) {
15	// 应用代码;
16	} ) ;
17