Ext JS 4第三个正式文件——班级制概述与实践

Ext JS 4从底层重构类系统，这是Ext JS历史上第一次大幅度重构类系统。新的架构已经应用到几乎每个Ext JS 4类中，所以在开始编码之前对它有一些了解是非常重要的。本手册适合任何想要在Ext JS 4中创建新类或继承现有类的开发人员。共分为四个部分：第一部分：“概述”——说明创建稳健的班级制度的必要性；第二部分：“命名规范”——讨论类、方法、属性的问题，变量和文件的最佳命名规范第三部分：“实践”——提供详细的分步代码示例第四部分：“错误处理和调试”——提供关于如何处理异常的非常有用的提示和技巧。1.概述Ext JS 4有300多个类。到目前为止，我们有一个庞大的社区，有来自世界各地各种编程背景的20多万名开发人员。对于这样一个大规模的框架，我们面临着提供通用代码架构的巨大挑战：友好且易学、开发速度快、易于调试、部署简单且组织良好、可扩展且可维护。JavaScript是一种无类型、面向原型的语言，这种语言最强大的特性之一是灵活性。它可以通过各种方法和不同的编码风格和技术来完成相同的工作。然而，这一特点带来了不可预见的成本。没有统一的结构，JavaScript代码很难理解、维护和重用。换句话说，基于类的编程使用最流行的OOP模型。基于类的语言通常是强类型语言，它们提供封装并具有标准的编码约定。一般来说，如果开发人员遵循一套统一的编码规则，编写的代码更有可能是可预测的、可扩展的和可扩展的。然而，它们没有像JavaScript这样的语言的动态功能。每种方法都有各自的优缺点，但是我们能不能同时利用两种方法的优点，隐藏它们的缺点呢？答案是肯定的，我们已经在Ext JS 4中实现了这个解决方案。2.命名规范始终根据代码中的类、命名空间和文件名使用一致的命名规范，这将有助于保持代码易于组织、结构化和可读。1)类名只能包含字母数字字符，大多数情况下不允许使用数字，除非它们属于技术术语。不要使用下划线、连字符或任何其他非字母数字字符。例如，不允许使用my company . util . debug _ toolbar，允许使用MyCompany.util.Base64，并且应该使用点表达式()将类名放在适当的命名空间中。)属性。类名至少应该有一个唯一的顶级命名空间。例如，my company . data . cool proxy my company . application的顶级命名空间和类名应该采用驼峰命名法，除此之外所有其他名称都应该是小写的。示例：MyCompany.form.action.AutoLoad不是由Sencha的Ext JS发布的类不能使用Ext作为顶级命名空间。缩写也应该遵循上面提到的驼峰命名惯例。示例：Ext.data.JsonProxy替换ext . data . jsonproxy mycompany.util.html解析器替换MyCompany.server.HTTP解析器MyCompany.server.HTTP替换my company . server . http 2)源文件类的名称直接映射到存储它们的文件路径，因此每个文件只能有一个类。示例：Ext . util . observatory存储在/to/src/Ext/util/observatory . jsext . form . action . submit存储在/to/src/Ext/form/action/submit . js my company . chart . axis . numeric存储在/to/src/my company/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 ' my company . alien . math . pi=' 4.13 ' iii。练习1。声明1.1)旧方法如果您曾经使用过Ext JS的任何早期版本，那么您必须熟悉使用Ext.extend来创建类：var mywindow=ext.extend (object，{ object.});此方法可以轻松创建从其他类继承的新类。然而，除了直接继承之外，我们没有一个好的API来创建类的其他方面，比如配置、静态配置和混合类，我们将在后面详细讨论。我们再来看一个例子：my . cool . window=ext . ext . ext(ext . window，{ 0.});在这个例子中，我们想要创建一个带有名称空间的新类，并让它继承ext.Window，这里有两个问题需要解决：My.cool必须是一个现有的名称空间对象，这样我们就可以将Window指定为它的属性。延伸文件系统窗口必须存在并已加载。这样，引用它的第一点通常由Ext.namespace(别名Ext.ns)解决。这个方法递归地创建不存在的对象，但令人讨厌的是，您必须始终记得在ext . ext:ext . ns(' my . cool ')之前添加它们；my . cool . window=Ext . Ext(Ext。窗口，{ 0.});但是，第二个问题不容易解决，因为Ext。窗口可能依赖于许多其他类，它可能直接或间接继承自那些依赖类，这些依赖类又可能依赖于其他类。因此，在Ext JS 4之前编写的应用程序通常会引入整个库文件ext-all.js，尽管可能只需要一小部分。1.2)新方法Ext JS 4消除了所有这些缺点。你只需要记住，创建类的唯一方法是Ext.define，它的基本语法如下：ext.define (classname，members，onclass repeated)；class name:class name members是一个大型对象，表示类成员的集合、一系列键-值对和一个可选的回调函数，当类的所有依赖项都准备好并且类完全创建完成时，将调用该回调函数。这个回调函数在很多情况下非常有用，我们将在第四部分深入讨论。示例：复制代码如下： ext . define(' my . sample . person ')，{name3360' unknown '，构造函数： function(name){ if(name){ this . name=name；}}，eat:函数(foodType) { alert(this.name '正在吃： ' Food Type)；}});var Aaron=ext . create(' my . sample . person '，' Aaron ')；亚伦.吃('沙拉')；//alert('Aaron在吃：沙拉')；请注意，我们使用Ext.create()方法创建了My.sample.Person的一个实例。当然，我们也可以使用new关键字(new My.sample.Person())，但是我们建议您养成总是使用Ext.create的习惯，因为它可以利用动态加载功能。有关动态加载的更多信息，请参见Ext JS 4入门指南。2.配置在Ext JS 4中，我们引入了一个特殊的配置属性，它将由强大的预处理器类Ext处理。创建类之前的类。它具有以下特点：每个Config属性的getter和setter方法完全封装自其他类成员，将在类原型中自动生成。如果类中没有定义这些方法，它还会为每个配置属性生成一个apply方法，该方法由自动生成的setter方法在内部设置值之前调用。如果要在设置值之前运行自定义逻辑，可以重写此apply方法。如果apply没有返回值，setter方法将不会设置该值。

让我们看看下面的应用标题方法：下面的例子定义了一个新类：复制代码代码如下： Ext.define('My.own.Window '，{/* * @ readonly */is window : true，config : { Title : ' Title Here '，底栏： { enabled : true，height: 50，resizable: false } }，构造函数： function(config){ this。initconfig(配置)；}，applyTitle:函数（标题){ if(！延伸文件系统isstring(Title)| | Title。长度===0){警报('错误：标题必须是有效的非空字符串');} else {返回标题；} }，applyBottomBar:函数(底部条){ if(底部条底部条。已启用){ if(！这个。底部栏){返回扩展名。创建(' my。拥有。‘窗底栏’，底栏)；} else { this。底部栏。setconfig(底部栏)；} } }});下面是如何使用这个新类的例子：复制代码代码如下： var my window=ext。创建(' my。拥有。window '，{ title: 'Hello World '，底栏： { height : 60 } })；警报(我的窗口。gettitle())；//提醒“你好世界”我的窗口。settitle('有新东西');警报(我的窗口。gettitle())；//提醒"有新东西" myWindow.setTitle(空);//警报'错误：标题必须是有效的非空字符串我的窗户。setbottom bar({ height : 100 })；//底部栏的高度更改为100 3。静态配置静态配置成员可以使用静力学属性来定义：复制代码代码如下： Ext.define('Computer '，{ static 3360 { instance count : 0，factory : function(brand){/' this '在静态方法中引用类本身返回新本({ brand : brand })；} }、config: { brand: null}、constructor:函数(配置){这个。initconfig(配置)；//实例的“自我”属性引用其类这个。自我。实例计数；}});var DeLL ComputeR=computer。工厂(”戴尔");苹果电脑。工厂(‘苹果’)；alert(苹果电脑。getbrand())；//使用自动生成的吸气剂获取配置属性的值。警报“麦克”警报（计算机。实例计数);//警报' 2 '四。错误处理和调试外部联署材料4包含了一些有用的特性，可以帮助你调试和错误处理：你可以使用Ext.getDisplayName()方法来获取任何方法的显示名称，这是特别有用的，当抛出错误时，可以用来在错误描述里显示类名和方法名：引发新的错误(“[”Ext . GetDisplayName(参数。被调用方)']此处有消息');当错误从由Ext.define()定义的类的任何方法中抛出时，如果你使用的基于WebKit的浏览器（镀铬或者Safari)的话，你会在调用堆栈中看到方法名和类名。例如，下面是从铬中看到的堆栈信息