EXTJS4官方文档翻译系列一:类系统和编码规范


		一,概述

--------------------------------------------------------------------------------
ExtJS4拥有超过300个的类.迄今为止,我们的社区拥有超过20万来自世界各地,使用不同后台语言的开发者.要在这种规模的框架上提供具有以下特点的架构,需要面临巨大的挑战:
1，简单易学。2，快速开发、调试简单、部署容易。3，良好的结构、可扩展性和可维护性。
javascript是一种类无关（原文：classless）、基于原型的语言。因此javascript最强大的特点是灵活。同样的事情可以使用不同的方式，不同的编码风格和技巧去完成。这个特点也会带来一些不可预测的风险。如果没有统一的编码规范，javascript代码将很难理解、维护和复用。
相反的，基于类的编程语言拥有较为流行的面向对象模型，强类型、内建的封装机制和强制的编码约束等特点。通过强制开发人员遵守一些大的原则来使代码的行为更容易被理解，以及提高可扩展性(这里不明白,javascript这类动态语言不是更容易扩展么?)和可伸缩性。但是，这类语言没有javascript的灵活性。
二,命名约定

--------------------------------------------------------------------------------
在所有类、命名空间（namespace）和文件名中使用一致的命名约定,有助于保持代码的良好结构和可读性。
1）类
类名只能包含字母和数字。允许包含数字，但是大部分情况下不建议使用，除非这些数字是专业术语的一部分。不要使用下划线，连字符等非数字字母符号。例如：
MyCompany.useful_util.Debug_Toolbar 不建议
MyCompany.util.Base64 合适的（虽然包含数字，但是数字是术语的一部分）
类名应该包含在使用点号分隔的命名空间中。至少，要有一个顶级命名空间。例如：
MyCompany.data.CoolProxyMyComp
MyCompany.data.CoolProxyMyCompa
顶级命名空间和实际的类名应使用驼峰命名（CamelCased），其他则为小写。例如：
MyCompany.form.action.AutoLoad
不是Sencha开发的类（即不是Ext自带的）不要使用Ext做为顶级命名空间。
缩写也要遵守以上的驼峰式命名约定。例如：
Ext.data.JsonProxy而不是Ext.data.JSONProxy 
MyCompany.util.HtmlParser而不是MyCompary.parser.HTMLParser 
MyCompany.server.Http而不是MyCompany.server.HTTP 
2）代码文件
类名对应类所在的文件（包括文件名）。因此，每个文件应该只包含一个类（类名和文件名一样）。例如：
Ext.util.Observable 存储在 path/to/src/Ext/util/Observable.js 
Ext.form.action.Submit 存储在 path/to/src/Ext/form/action/Submit.js 
MyCompany.chart.axis.Numeric 存储在 path/to/src/MyCompany/chart/axis/Numeric.js 
path/to/src 是你应用程序所在目录。所有类都应该在这个通用根目录下，并且使用适当的命名空间以利于开发、维护和部署。
3）方法和变量
和类命名一样，方法和变量也只能包含字母和数字。数字同样是允许但不建议，除非属于专业术语。不要使用下划线，连字符等任何非字母数字符号。
方法和变量名一样使用驼峰式命名，缩写也一样。
举例
合适的方法名： 
                    encodeUsingMd5() getHtml() 代替 getHTML() 
                    getJsonResponse() 代替 getJSONResponse() 
                    parseXmlContent() 代替parseXMLContent()
合适的变量名： 
                    var isGoodName 
                    var base64Encoder 
                    var xmlReader 
                    var httpServer
4）属性
类属性名称遵循以上的变量和方法命名约定.除非是静态的常量.
类的静态属性常量应该全部大写。例如：
Ext.MessageBox.YES = "Yes" 
Ext.MessageBox.NO = "No" 
MyCompany.alien.Math.PI = "4.13" 
三,动手实践
1).声明
1.1) 旧的方式
如果你曾经使用过旧版本的extjs,那么你肯定熟悉使用Ext.extend来创建一个类:
   1: varMyWindow=Ext.extend(Object,{...});
 
 
 
这个方法很容易从现有的类中继承创建新的类.相比直接继承,我们没有好用的API用于类创建的其他方面,诸如:配置、静态方法、混入（Mixins）。呆会我们再来详细的重新审视这些方面。现在，让我们来看看另一个例子：
   1: My.cool.Window = Ext.extend(Ext.Window, { ... });
 
 
在这个例子中，我们创建我们的新类，继承Ext.Window，放在命名空间中。我们有两个问题要解决：
1，在我们访问My.cool的Window属性之前,My.cool必须是一个已有的对象.
2,Ext.Window必须在引用之前加载.
第一个问题通常使用Ext.namespace(别名Ext.ns)来解决.该方法递归创建(如果该对象不存在)这些对象依赖.比较繁琐枯燥的部分是你必须在Ext.extend之前执行Ext.ns来创建它们.
   1: Ext.ns(My.cool);   2: My.cool.Window = Ext.extend(Ext.Window, { ... });
第二个问题不好解决,因为Ext.Window可能直接或间接的依赖于许多其他的类,依赖的类可能还依赖其它类...出于这个原因,在ext4之前,我们通常引入整个ext-all.js,即使是我们只需要其中的一小部分.
1.2) 新的方式
在Extjs4中,你只需要使用一个方法就可以解决这些问题:Ext.define.以下是它的基本语法:
   1: Ext.define(className, members, onClassCreated);
className: 类名 
members:代表类成员的对象字面量(键值对,json) 
onClassCreated: 可选的回调函数,在所有依赖都加载完毕,并且类本身建立后触发.由于类创建的新的异步特性,这个回调函数在很多情况下都很有用.这些在第四节中将进一步讨论 
例如:
   1: Ext.define(My.sample.Person, {   2:     name: Unknown,   3:     4:     constructor: function(name) {   5:         if (name) {   6:             this.name = name;   7:         }   8:     9:         return this;  10:     },  11:    12:     eat: function(foodType) {  13:         alert(this.name + " is eating: " + foodType);  14:    15:         return this;  16:     }  17: });  18:    19: var aaron = Ext.create(My.sample.Person, Aaron);  20:     aaron.eat("Salad"); // alert("Aaron is eating: Salad");
注意我们使用Ext.create()方法创建了My.sample.Person类的一个新实例.我们也可以使用新的关键字(new My.sample.Person())来创建.然而,建议养成始终用Ext.create来创建类示例的习惯,因为它允许你利用动态加载的优势.更多关于动态加载信息,请看入门指南:入门指南
2).配置
在ExtJS 4 ,我们引入了一个专门的配置属性,用于提供在类创建前的预处理功能.特性包括:
配置完全封装其他类成员 
getter和setter.如果类没有定义这些方法,在创建类时将自动生成配置的属性的getter和setter方法。 
同样的,每个配置的属性自动生成一个apply方法.自动生成的setter方法内部在设置值之前调用apply方法.如果你要在设置值之前自定义自己的逻辑,那就重载apply方法.如果apply没有返回值,则setter不会设置值.看下面applyTitle的例子:    1: Ext.define(My.own.Window, {   2:    /** @readonly */   3:     isWindow: true,   4:     5:     config: {   6:         title: Title Here,   7:     8:         bottomBar: {   9:             enabled: true,  10:             height: 50,  11:

补充：web前端 , JavaScript ,