《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