版本说明:
Ext 4.2.1
cmd 5.0.3
1. sencha app refresh的作用是,重新生成bootstrap.js文件,如下图所示:
2. bootstrap.js 三个作用:
添加各个基础命名空间或者类名的映射路径 Ext.Loader.addClassPathMappings()
将类名和备用名,对应起来 Ext.ClassManager.addNameAlternateMappings()
将类名和别名,对应起来 Ext.ClassManager.addNameAliasMappings()
三者对应的meta命令分别为:
sencha compile -classpath=app meta -loader -out wyloader.js
sencha compile -classpath=app meta -alt -out wyalt.js
sencha compile -classpath=app meta -alias -out wyalias.js
参考地址:http://docs.sencha.com/cmd/5.x/advanced_cmd/cmd_metadata.html
注:
Ext.define('MyApp.view.Test'),这里的name既对应文件路径,也对应Ext级别的class。为了后文叙述,我们暂且叫他“伪类”
备用名:对应文件路径的作用
别名:对应Ext级别的class的作用
bootstrap.js的作用是影响Ext.loader的文件加载和路径查找,以及Ext.ClassManager的类映射。
3. 用三个例子来说明一下
例1,普通的方式
伪类StandardC定义如下:
Ext.define('Seed.view.StandardC', { config:{ name : 'wy' }, add : function (x, y) { return x + y; }, subtract : function (x, y) { return x - y; } });
调用伪类定义如下:
Ext.define('Seed.Application', { name: 'Seed', extend: 'Ext.app.Application', requires:[ 'Seed.view.StandardC' // 注意:如果用create方式创建对象,这里的require可省略 ], launch: function () { var sc = Ext.create('Seed.view.StandardC'); alert('sc :'+ sc.getName()+ ' ,res: ' + sc.add(3,4)); } });
运行refresh,并访问地址,结果:运行正常
例2,类的别名的方式
伪类StandardC定义如下:
Ext.define('Seed.view.StandardC', { alias: 'StandardC', // 注意这里用类的别名 config:{ name : 'wy' }, add : function (x, y) { return x + y; }, subtract : function (x, y) { return x - y; } });
调用伪类定义1 如下:
Ext.define('Seed.Application', { name: 'Seed', extend: 'Ext.app.Application', requires:[ 'Seed.view.StandardC' // 注意:这里引用伪类 ], launch: function () { var sc = Ext.create('StandardC'); // 注意:这里用类的别名 alert('sc :'+ sc.getName()+ ' ,res: ' + sc.add(3,4)); } });
运行refresh,在bootstrap.js中添加的如下内容:
Ext.ClassManager.addNameAlternateMappings({ "Seed.view.StandardC": [] }); Ext.ClassManager.addNameAliasMappings({ "Seed.view.StandardC": [ "StandardC" ] });
运行应用:结果正常
调用伪类定义2 如下:
Ext.define('Seed.Application', { name: 'Seed', extend: 'Ext.app.Application', requires:[ 'StandardC' // 注意:这里引用类的别名 ], launch: function () { var sc = Ext.create('StandardC'); // 注意:这里用类的别名 alert('sc :'+ sc.getName()+ ' ,res: ' + sc.add(3,4)); } });
运行应用:结果正常
调用伪类定义3 如下:
Ext.define('Seed.Application', { name: 'Seed', extend: 'Ext.app.Application', requires:[ // 注意:这里不添加任何引用 ], launch: function () { var sc = Ext.create('StandardC'); // 注意:这里用类的别名 alert('sc :'+ sc.getName()+ ' ,res: ' + sc.add(3,4)); } });
运行应用:结果正常
如果,我们手动删除bootstrap.js中,类的别名和伪类之间的对于关系,refresh
运行报错,如下图:
例3,路径备用名的方式
伪类StandardC定义如下:
Ext.define('Seed.view.StandardC', { alternateClassName: 'al.StandardC', // 注意这里用路径的备用名 config:{ name : 'wy' }, add : function (x, y) { return x + y; }, subtract : function (x, y) { return x - y; } });
调用伪类定义1 如下:
Ext.define('Seed.Application', { name: 'Seed', extend: 'Ext.app.Application', requires:[ 'al.StandardC' // 注意:这里引用备用路径 ], launch: function () { var sc = Ext.create('al.StandardC'); // 注意:这里用备用路径 alert('sc :'+ sc.getName()+ ' ,res: ' + sc.add(3,4)); } });
运行refresh,在bootstrap.js中添加的如下内容(注意区别):
Ext.ClassManager.addNameAlternateMappings({ "Seed.view.StandardC": [ "al.StandardC" ] }); Ext.ClassManager.addNameAliasMappings({ "Seed.view.StandardC": [] });
运行应用:结果正常
调用伪类定义2 如下:
Ext.define('Seed.Application', { name: 'Seed', extend: 'Ext.app.Application', requires:[ // 注意:这里不添加任何引用 ], launch: function () { var sc = Ext.create('al.StandardC'); // 注意:这里用备用路径 alert('sc :'+ sc.getName()+ ' ,res: ' + sc.add(3,4)); } });
运行应用:结果正常
如果,我们手动删除bootstrap.js中,路径备用名和伪类之间的对于关系,refresh
运行报错,如下图:
注意:例3和例2两次报错的区别!
这里的文件加载和类加载的技术细节,不是重点。而是,找到一种适合自己项目开发环境的,类、命名空间、文件路径之间解耦的解决方案。突破点,在这里,就看怎样应用!