一、命名规则
在代码中,使用一致的命名习惯:命名空间和文件名,有助于保持你的代码组织、结构化和可读性。
# 类名应该分成包。最少应该有一个独特的顶层的命名空间,类名紧随其后。例如:
1.类
# 类名只能包含字母数字字符。数字是允许的,但在大多数情况下不鼓励,除非他们属于一个技术术语。# 类名应该分成包。最少应该有一个独特的顶层的命名空间,类名紧随其后。例如:
MyCompany.data.CoolProxy
# 顶层的命名空间和实际的类名应该是UpperCamelCase(第一个词的首字母,以及后面每个词的首字母都大写,叫做“大骆驼拼写法”),其他应该都是小写。
例如:
2.配置
例如:
MyCompany.form.action.AutoLoad
# 没有被
# 缩略语也应该遵循上述CamelCased公约。例如:
Sencha
(Sencha是由ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个开源项目)分配的类绝不可用EXT作为顶层的命名空间。
# 缩略语也应该遵循上述CamelCased公约。例如:
MyCompany.server.Http
instead of
MyCompany.server.HTTP
2.源文件
类的名字直接映射成存放它们的文件路径。因此,每个文件都必须有一个类。
例如:Ext.util.Observable
存放在 path/to/src/Ext/util/Observable.js 其中path/to/src
是应用程序类的目录。
3.方法和变量
3.方法和变量
类似于类名,方法和变量名只能包含字母数字字符。数字是允许的,但在大多数情况下不鼓励,除非他们属于一个技术术语。不要使用下划线、连字符或任何其他非字母数字字符。方法和变量名应该总是处于lowerCamelCase(第一个词的首字母小写,后面每个词的首字母大写,叫做“小骆驼拼写法”)。这也适用于首字母缩写。
4.属性
类的属性名遵循与方法和变量同样的命名规则,除非他们是静态常数的情况下。静态类属性,应该都是大写。例如:Ext.MessageBox.YES = "Yes"
二、实战
1.定义类
Ext.define(className, members, onClassCreated);
className
::类名members
:一个包含了一个类成员(关键字-值)的集合对象onClassCreated
:一个可选的回调函数。当这个类所有的依赖都准备好了,和类本身就是完全创造了,便会调用。由于创建类的异步本质,该回调函数在很多情况下都是有用的
Ext.define('My.sample.Person', {
name: 'Unknown',
constructor: function(name) {
if (name) {
this.name = name;
}
},
eat: function(foodType) {
alert(this.name + " is eating: " + foodType);
}
});
var aaron = Ext.create('My.sample.Person', 'Aaron');
aaron.eat("Salad"); // alert("Aaron is eating: Salad");
上面例子用
Ext.create
来创建类的实例。我们也可以利用new关键字(new My.sample.Person())。然而,建议使用Ext.create,因为它可以让你充分利用动态加载。
2.配置config
例子:
Ext.define('My.own.Window', { /** @readonly */ isWindow: true, config: { title: 'Title Here', bottomBar: { enabled: true, height: 50, resizable: false } }, constructor: function(config) { this.initConfig(config); }, applyTitle: function(title) { if (!Ext.isString(title) || title.length === 0) { alert('Error: Title must be a valid non-empty string'); } else { return title; } }, applyBottomBar: function(bottomBar) { if (bottomBar && bottomBar.enabled) { if (!this.bottomBar) { return Ext.create('My.own.WindowBottomBar', bottomBar); } else { this.bottomBar.setConfig(bottomBar); } } } });
var myWindow = Ext.create('My.own.Window', { title: 'Hello World', bottomBar: { height: 60 } }); alert(myWindow.getTitle()); // alerts "Hello World" myWindow.setTitle('Something New'); alert(myWindow.getTitle()); // alerts "Something New" myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string" myWindow.setBottomBar({ height: 100 }); // Bottom bar's height is changed to 100
3.静态成员
静态成员定义可以用statics
例子:
Ext.define('Computer', {
statics: {
instanceCount: 0,
factory: function(brand) {
// 'this' in static methods refer to the class itself
return new this({brand: brand});
}
},
config: {
brand: null
},
constructor: function(config) {
this.initConfig(config);
// the 'self' property of an instance refers to its class
this.self.instanceCount ++;
}
});
var dellComputer = Computer.factory('Dell');
var appleComputer = Computer.factory('Mac');
alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"
alert(Computer.instanceCount); // Alerts "2"
三、调试
你可以用Ext.getDisplayName()显示任何方法的名称。它能抛出包含类名和方法名的错误,因此很有用。
throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');