ExtJS 4 的类体系 已翻译 100%

窝窝球 投递于 2013/10/31 14:18 (共 12 段, 翻译完成于 11-01)
阅读 549
收藏 2
0
加载中

历史上第一次,Ext JS通过新的类体系进行了彻底的重构。新的框架支持几乎每个单独的用Ext JS 4.x写的类,因此在你开始编码之前理解彻底比较重要。

这个指南是为任何想创造新的或者扩展现有的Ext JS 4.x类的开发者而准备。分成4个部分:

  • 第一部分:“综述”解释了自动类系统的需求
  • 第二部分:“命名转换”讨论了命名类、方法、属性、变量和文件的最佳实践
  • 第三部分:“动手实践”提供了详细的一步一步的编码样例
  • 第四部分:“错误处理&调试”给出了如何处理异常的有效提示&技巧
Ley
Ley
翻译于 2013/10/31 16:06
3

I. 综述

Ext JS 4承载了超过300个类。我们拥有一个来自全世界拥有不同编程背景的超过200,000名开发者的巨大的社区。面对如此规模的框架,我们面临的是提供通用编码架构的巨大挑战:

  • 常见并简单易学
  • 快速开发、容易调试、易于部署
  • 良好组织、可扩展和维护
JavaScript是一个无类别的、面向原型的语言。因此本质上,该语言最大的特征是灵活。它可以用很多不同的方法、以多种不同的编码风格和技术来解决同一个问题。然而,这个特征带来了不可预测性的代价。没有一个标准的结构,JavaScript代码会很难理解、维护和复用。
Ley
Ley
翻译于 2013/10/31 16:15
1

另一方面,基于类的编程仍然是最流行的OOP模型。基于类的语言通常需要强类型,提供封装,使用标准编码约定。通常让开发者遵循大量的规则,写出的代码更可能是可预测的、可扩展的和可随时间而伸缩的。然而,在像JavaScript这样的语言中没有相同的动态兼容性。

每个方法都有其优点和缺点,但我们可否在避免不好的部分的同时拥有好的部分呢?答案是肯定的,我们将在Ext JS 4中实现这个解决方法。

Ley
Ley
翻译于 2013/10/31 16:31
1

II.命名约定

在你的代码基础中为类、命名空间和文件名使用一致的命名约定有助于保持你的代码有组织、有结构和可读性。

1)类

类的名字可仅仅包含字母数字的字符。在大多数情况下允许但不鼓励使用数字,除非他们属于技术术语。不要使用下划线、连结号,或者其他非字母数字的字符。例如:

  • MyCompany.useful_util.Debug_Toolbar是不鼓励的
  • MyCompany.util.Base64是可以接受的
Ley
Ley
翻译于 2013/10/31 16:23
1

类名应该组成拥有近似并合理的、使用对象性质的点号(.)命名空间的包。最少应该有一个独立的最高级的、后接类名的命名空间。比如:

MyCompany.data.CoolProxy
MyCompany.Application
最高级的命名空间和真实的类名应该使用驼峰命名法,其他的都应该是小写的。例如:
MyCompany.form.action.AutoLoad
不通过Sencha分布的类不应该使用Ext作为最高级的命名空间。首字母缩略词也应该遵循上面提到的驼峰命名法。例如:
  • Ext.data.JsonProxy而不是Ext.data.JSONProxy
  • MyCompany.util.HtmlParser而不是MyCompany.parser.HTMLParser
  • MyCompany.server.Http而不是MyCompany.server.HTTP
Ley
Ley
翻译于 2013/10/31 16:41
1

2) 源文件

类的名字直接映射到它们存储的文件路径上。结果就是一定是单个文件只有一个类。例如:

  • Ext.util.Observable在路径/to/src/Ext/util/Observable.js上存储
  • Ext.form.action.Submit在路径/to/src/Ext/form/action/Submit.js上存储
  • MyCompany.chart.axis.Numeric在路径/to/src/MyCompany/chart/axis/Numeric.js上存储
路径/to/src是你应用的类的文件夹。所有的类应该放在这个通用根目录下,应该为了最佳开发、维护和部署而使用合适的命名空间。
Ley
Ley
翻译于 2013/10/31 16:46
1

3)方法和变量

  • 和类名相似,方法和变量名可以仅包含字母数字字符。在大部分情况下允许但不鼓励使用数字,除非它们属于技术用语。不要使用下划线、连结号,或者其他非字母数字字符。
  • 方法和变量名应该总是使用驼峰命名法。这对首字母缩略词同样有效。
  • 例子:
  • 可接受的方法名:encodeUsingMd5() getHtml()而不是getHTML() getJsonResponse()而不是getJSONResponse() parseXmlContent()而不是parseXMLContent()
  • 可接受的变量名:var isGoodName var base64Encoder var xmlReader var httpServer
Ley
Ley
翻译于 2013/10/31 17:00
1

4)属性

  • 类属性名和上面提到的方法和变量遵循相同的约定,除了它们是静态常量的情况。
  • 静态常量类属性应该全大写。例如:
  • Ext.MessageBox.YES = "Yes"
  • Ext.MessageBox.NO = "No"
  • MyCompany.alien.Math.PI = "4.13"

III. 动手实践

1.声明

1.1)旧方法

如果你曾经使用过Ext JS以前的版本,你一定对使用Ext.extend来创建一个类很熟悉:


var MyWindow = Ext.extend(Object, { ... });

这个方法在从其他类继承而创建新类时很容易使用。然而,不像直接继承,我们并没有用做创建类的其他方面的固定API,比如配置、静态和混合。我们将简短的详细回顾这些内容。

Ley
Ley
翻译于 2013/10/31 17:11
1

让我们来看下另一个例子:

My.cool.Window = Ext.extend(Ext.Window, { ... });
在这个例子中,我们想对新类设置 命名空间,并让它从 Ext.Window中扩展。我们需要强调两点需要注意的地方:
  1. My.cool在我们分配Window作为它的属性前,需要是个已存在的对象
  2. Ext.Window在它可以被引用前,需要存在/载入页面中
第一条经常使用Ext.namespace(别名Ext.ns)来解决。这个方法在对象/属性树上横向递归,如果它们不存在就创建它们。无聊的地方在于你需要时时记住在Ext.extend上添加它们。

Ext.ns('My.cool'); 
My.cool.Window = Ext.extend(Ext.Window, { ... });
然而,第二个问题很难强调,因为 Ext.Window可能依赖于它直接/间接继承的其他类,反过来,这些依赖也可能依赖其他存在的类。因为这个原因,在Ext JS 4前写的应用经常以ext-all.js的形式包含整个库,尽管他们可能仅需要框架的一小部分。
Ley
Ley
翻译于 2013/10/31 17:24
1

1.2) 新方法

Ext JS 4取消了那些用来创建类的,需要记的,仅有一个单独方法的所有那些缺点。基本语法如下:

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()方法创建了My.sample.Person的新实例。我们可以使用new关键字(new My.sample.Person())。然而建议养成使用 Ext.create的习惯,因为它可以使你利用动态载入的优势。关于动态载入的更多信息可以看 入门指南
Ley
Ley
翻译于 2013/10/31 17:59
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(0)

返回顶部
顶部