ExtJs中动态加载机制研究

昨天我们team对于extjs的动态加载机制做了些深入研究,这里先share下controller加载的结果。

以service registry portlet为例:
比如,在 liferay-portlet.xml中定义了:

所以我们的js的入口点是app.js,这其中创建了Ext.application并且声明了动态加载controller:

Ext.application({
   name: 'serviceRegistry',
   appFolder: '/serviceregistryportlet/js/app',
   controllers:['mainPanel'],
   launch:function(){
...
)

我们这里具体看extjs是如何实现动态加载controller的。

首先我们可以看到,当它在加载controller时候,所有这里声明的controller的都会以类全名的形式传递给classNames属性

Ext.Loader的config选项paths会收到2个属性,一个是默认的Ext的path,它的默认值定义如下:

config: {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
           enabled: false,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
           disableCaching: true,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
           disableCachingParam: '_dc',
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
           paths: {
               'Ext': '.'
           }
       },

另外一个就是从Ext.application中获取的属性,它的key 为Ext.application中定义的name(在这里是serviceRegistry),
value为Ext.application中定义的appFolder(在这里是/serviceregistryportlet/js/app)
如下图所示:

然后在第5314行,就通过另外一个方法getPrefix()来根据controller的类名来获取它的前缀,并且这个前缀会最终参与到运算。我们这里省去这段逻辑,反正最终,这个"serviceRegistry.controller.mainPanel'的前缀是"serviceRegistry",如上图的调试结果。

注:以上的所有结论和我昨天猜想的完全一致,昨天并没有调试结论,看来我计算机感觉不错,小得意一下~

既然上面paths给出了2个候选的路径名(一个是Ext级别的,一个是项目serviceRegistry级别的),这2个路径名都有可能作为最终加载资源文件的备选路径,那么选取哪一个路径作为最终加载路径呢?就要看下面的分析了。

刚才因为已经得到了prefix=serviceRegistry,所以我们通过第5321行: path=paths[prefix] 来最终得到了真正要加载的路径名,也就是"/serviceregistryportlet/js/app"
紧接着,class的名字也确定下来了,就是类的全名(classFullName)去除掉前缀(prefix),所以也就是"serviceRegistry.controller.mainPanel",去除掉"serviceRegistry",剩下来"controller.mainPanel":
以上2个信息都可以从调试的结果看出来;

所以最后工作就很清楚了,它会吧所有的路径名中的"."替换成"/" ,然后最后结尾加上".js"文件扩展名,所以最终就成了js controller文件的资源路径:

这个路径是正确的而且是我们预期的。。

所以从以上调试,我们可以总结出以下结论:
(1)对于controller而言,它的加载路径总是有2个备选路径,一个是Ext框架级别的备选路径,它的默认值是当前目录".",另外一个是项目级别的路径,并且项目级别的路径的优先级高于框架级别。只有项目级别路径加载不到js资源文件才会从框架级别的路径中加载js文件。

(2)对于controller而言,要计算出项目级别的路径,不得不获取很多相关信息,比如说前缀,controller的类名,路径名。其中Ext.application的项目名(name)的作用是提供了项目级别路径的key,Ext.application的(appFolder)提供了项目级别路径的value, 前缀是通过类的全名解析出来的。

(3)一般类的全名的前缀部分最好和Ext.application的项目名(name)一致,其原因是,资源文件最终路径path是通过path=paths[prefix]计算出来的。如果不一致的话,要走else 分支。

(4)所有的资源文件最终路径都是用.分割的路径最终替换成的/分割的路径并且尾部追加扩展名来形成的,项目中任何地方不会涉及裸露的路径字符串。

(5)在任何情况下controller总能被正确的加载,只要appFolder设置正确。比如说我们把Ext.application的name设置成"hello",吧appFolder设置为"/xxx/js/app",但是,我们某个controller文件,我们的前缀并不设置为"hello" ,而是设置成其他的,比如fxxk,所以controller的类全名是"fxxk.controller.ABCController",在这种情况下。prefix因为是从"fxxk.controller.ABCController"字符串中分析来的,所以它的值是“fxxk",而appName因为是"hello",所以paths中有2个值,一个是key="Ext" ,value=".",另外一个是 key="hello",value="/xxx/js/app",所以执行path=paths[prefix]值时,它没办法获取任何值,所以保留原来的默认值"" 空字符串。但是,className是用"fxxk.controller.ABCController"去除prefix "fxxk",所以,className是正确的,还是"controller.ABCController",所以在最后5329行拼接path时候:path.replace(slashDotSlashre,'/')依然返回"", 而className是正确的,所以className.replace(dotRe,"/"),会返回/controller/ABCController.最后拼接上.js扩展名。所以这个文件依然能正确加载。

作者: 平行线的凝聚
原文: http://supercharles888.blog.51cto.com/609344/1244064