《EtJS 4 官方指南：类系统 简体中文版》由会员分享，可在线阅读，更多相关《EtJS 4 官方指南：类系统 简体中文版（9页珍藏版）》请在金锄头文库上搜索。
1、Ext JS 4 类系统在历史上第一次，Ext JS的经历了一个在基础上的巨大重构，这就是新的类系统。新架构的 基础几乎每一个都是建立在Ext JS4.X写单个类上，因此在开始编码之前理解这个类系统是很 重要的。本手册适用于任何希望创造新的或扩大在现有的Ext JS 4.x类的开发者。它分为4个部分：第一节：“概述解释为什么需要一个强大的类系统第二节：“命名约定讨论命名类，方法，属性，变量和文件的最佳做法。 第三节： “实践”提供了详细的一步一步的代码示例 第四节： “错误的处理和调试”提供有用的提示和技巧，如何处理异常1 概述Ext JS4有300多个类。我们有超过20万开发者的巨大社区，他
2、们来自世界各地，有各种编 程背景。在这种规模的框架中，我们面对的一个巨大挑战就是提供一个共同的代码架构。这 个架构要求： 熟悉和简单易学 能快速开发，调试方便，无痛部署 精心组织，可扩展性和可维护性JavaScript 是 -个没有类的，原型为导向(prototype-oriented)的语言。因此，JavaScript语 言本质上最强大的功能之一是灵活性。它可以使用许多不同的编码风格和技巧，以许多不同 的方式做同样的工作。然而，该功能也是不可预知的成本。如果没有一个统一的结构， JavaScript代码会真的很难理解，维护和再利用。另一方面，基于类(Class-based)编程，仍然停留OO
3、P的最流行的模式。基于类的语言， 通常需要强类型，提供封装，标准的编码约定。通常使得开发者坚持一个大原则，编写的代 码更可能是可预见的、可延伸和可扩展的。然而，他们却不具有JavaScript这样的语言的动 态能力。每种方法都有其自身的利弊，我们能否对各方都去其糟粕，取其精华？答案是肯定的，我们 已经在Ext JS 4的解决方案中实现了。2 命名约定使用一致的命名约定作为所有类的代码基础，而命名空间和文件名有助于保持你的代码的组 织，结构化和可读性。2.1 类类名只能包含字母和数字字符。数字是允许的，但在大多数情况下不推荐使用，除非是表达 一个技术术语（比如Base64）。不要使用下划线、连字
4、符，或任何其他非字母数字字符。例 如：MyCompany.useful_util.Debug_Toolbar 不推荐MyCompany.util.Base64 可接受类名应该被组织到适当的和正确的命名空间和包中，用（）分隔包。最低限度，应该有一 个独特的顶级命名空间的类名称。例如：MyCompany.data.CoolProxyMyCompany.Application顶级的命名空间和实际类名应该用驼峰命名法，其他名称应全部小写。例如：MyCompany.form.action.AutoLoad除了 Sencha发布的类以外，都不应该使用Ext作为顶级命名空间。 缩略语也应该遵循上面列出的驼峰
5、命名法。例如：Ext.data.JsonProxy 来替代 Ext.data.JSONProxyMyCompany.util.HtmlParser,来替代 MyCompary.parser.HTMLParser MyCompany.server.Http 来替代 MyCompany.server.HTTP2.2 源文件由于类名称直接映射到存储这些类的文件路径上。因此，每个文件只能有一个类。例如： Ext.util.Observable 存储在 path/to/src/Ext/util/Observable.js Ext.form.action.Submit 存储在 path/to/src/Ex
6、t/form/action/Submit.js MyCompany.chart.axis.Numeric存储在 path/to/src/MyCompany/chart/axis/Numeric.js其中path/to/src是您的应用程序的类目录。所有的类都应该在这个共同的根路径的 中，这是最好的开发、维护和部署经验。2.3 方法和变量和类名一样，方法和变量名只可包含字母数字字符。数字是允许的，但在大多数情 况下不推荐使用，除非是表达一个技术术语(比如Base64)。不要使用下划线、连 字符，或任何其他非字母数字字符。 方法和变量名应该总是使用驼峰命名法。这也适用于首字母缩写的方法和变量名。
7、例子 可以接受的方法名称：冃encodeUsingMd5() getHtml()而不是getHTML()。 用 getJsonResponse()而不是。用 getJSONResponse() parseXmlContent()而不是 parseXMLContent() 可接受的变量名： varisGoodName; var base64Encoder;varxmlReader;varhttpServer2.4 属性 类的属性名应与上面提到的方法和变量遵循完全相同的约定，除非当他们静态常量 时。 静态类属性是常量应全部大写。例如：Ext.MessageBox.YES =“YES” Ext.Me
8、ssageBox.NO =“N0MyCompany.alien.Math.PI =“3.14”(译者：原文写成了 4.13 )3 实践3.1 声明3.1.1老方法如果您曾经使用过任何以前版本的Ext JS，你肯定熟悉Ext.extend创建一个类： varMyWindow=Ext.extend(Object,.)除了直接继承，遵循这种做法很容易创建从另一个类继承的新类。但是，我们没有为类的创 建提供其他方面流畅的API,如配置，静态和混入。我们马上就会修订这些条目。让我们看看另一个例子：My.cool.Window=Ext.extend(Ext.Window,.);在这个例子中，我们希望在自己
9、的命名空间创建新类，并使其从Ext.Window继承。我们需 要解决两方面的问题：1. 在指定Window作为其属性之前，My.cool必须是一个已经存在的对象。2. Ext.Window需要在其被引用之前在同一页面存在并加载第一个问题通常由Ext.namespace (别名为Ext.ns)解决。该方法通过对象/属性树递归横向 创建他们，如果他们不存在。你不得不需要记住在代码里添加Ext.extend。Ext.ns(My.cool);My.cool.Window=Ext.extend(Ext.Window,.);然而，第二个问题不容易解决，因为Ext.Window可能取决于它直接/间接继承的许
10、多其他类。 反过来，这些依赖关系可能还依赖于其他类的存在。出于这个原因，Ext JS4之前编写的应用 程序通常包括整个库EXT - all.js，即使开发者可能只需要一个框架的一小部分。3.1.2新方法Ext JS4消除了所有这些缺点：创建类时你只需要记住Ext.define这一个方法。它的基本语法 如下：Ext.define(className, members,onClassCreated); className：类的名称 members是一个对象，表示一个类成员的键-值对的集合 onClassCreated是一个可选的回调函数，在类完全建立后调用。由于新的异步类的创 建，回调在很多情况下
11、是很有用的。这些都将在第四节进一步讨论。例如：Ext.define(My.sample.Person,name:Unknown,constructor:function(name)if(name)this.name = name;returnthis;,eat:function(foodType)alert(this.name + is eating: +foodType);returnthis;)；varaaron=Ext.create(My.sample.Person,Aaron);aaron.eat(Salad);/ alert(Aaron is eating: Salad);注意，我们
12、创建了一个新的实例My.sample.Person使用Ext.create()方法。我们可以用new 关键字(new My.sample.Person。)。然而，建议总是使用Ext.create并养成习惯，因为它有 动态加载的好处。对于动态加载的详细信息，请参阅“入门指南”3.2 配置在Ext JS 4中，我们引入一个专用的config属性，这个属性在类创建前就可以由Ext.class的 强大的预处理器处理，这些特性包括：配置对于其他类成员是完全封装的 getter和setter，如果类没有定义这些方法，处理器会自动为类生成类原型。也为每个配置属性生成一个apply方法。在设置值之前，自动生成
13、的setter方法会在 内部调用apply方法。如果你需要在设置值之前执行自定义逻辑，可以覆盖apply方 法。如果apply不返回值则setter不会设置值。举一个例子，applyTitle：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);returnthis;,applyTitle:f
14、unction(title)if (!Ext.isString(title)|title.length=0)alert(Error: Title must be a valid non-empty string);elsereturn title;,applyBottomBar:function(bottomBar)if(bottomBar&bottomBar.enabled)if(!this.bottomBar)returnExt.create(My.own.WindowBottomBar,bottomBar);elsethis.bottomBar.setConfig(bottomBar);
15、);这是一个如何使用它的例子：varmyWindow=Ext.create(My.own.Window, title:Hello World, bottomBar: height:60);alert(myWindow.getTitle();/ alerts Hello WorldmyWindow.setTitle(Something New);alert(myWindow.getTitle();/ alerts Something NewmyWindow.setTitle(null);/ alerts Error: Title must be a valid non-empty stringmyWindow.setBottomBar( height:100);/ Bottom bars height is changed to 1003.3 静态成员可以定义静态成员使用staticsconfigExt.def
