Ext JS的4类系统
对于在其历史上第一次， 分机 JS经历了一个从地面巨大的重构与新的等级制度。站在新的架构背后几乎每写一个类 分机 JS 4.x的，因此重要的是要了解它做好，然后再开始编码。
本手册适用于任何开发谁想要建立新的或扩展现有类 分机 JS 4.x的它分为3个主要部分：
- 第一节：“概述”说明了一个强大的阶级制度的必要性
- 第二节：“命名约定”讨论命名类，方法，属性，变量和文件的最佳做法。
- 第三节：“动手”提供了详细的一步一步的代码示例
- 第四部分：“错误处理和调试”提供有用的技巧就如何处理异常和技巧
一，概述
Ext JS的4艘船超过300班。我们有超过20万巨大的社会发展至今，来自世界各地的各种编程背景的。当时的一个框架的规模，我们面临着共同的代码提供了一个架构，大challange：
- 熟悉和简单易学
- 快速开发，易于调试，无痛部署
- 精心组织，可扩展性和可维护性
JavaScript是一个阶级， 原型化 语言。因此本质上是语言的最强大功能之一是灵活性。它可以得到同样的工作做了许多不同的方式，在许多不同的编码风格和技巧。这个功能，但是，自带的不可预测性的成本。如果没有一个统一的结构，JavaScript代码可以真的很难理解，维护和再利用。
基于类的 编程，另一方面，仍然保持作为最流行的面向对象模型。 基于类的语言 通常需要强打字，提供封装，并提出标准的编码约定。通过使开发人员一般坚持一个原则大集，编写的代码更容易被预测的，可扩展的，随着时间的推移可扩展性。然而，他们没有相同的动态能力，以JavaScript这样的语言中找到。
每种方法都有自己的优点和缺点，但我们可以在同一时间既好隐瞒的部分，而坏的部分？答案是肯定的，我们已经实现了解决方案 分机 JS 4。
II。命名约定
1）班
-
类名只能包含 字母数字 字符。数字是允许的，但在大多数情况下不鼓励，除非他们属于一个技术术语。不要使用下划线，连字符，或任何其他非字母数字字符。例如：
MyCompany.useful_util.Debug_Toolbar 不鼓励MyCompany.util.Base64 是可以接受的
-
类名应该是组合成包在适当和正确的命名空间的使用对象属性点号（。）至少，应该有一个独特的顶级命名空间的类的名称。例如：
MyCompany.data.CoolProxyMyCompany.Application
-
顶层命名空间和实际的类名应在驼峰，一切都应该是小写。例如：
MyCompany.form.action.AutoLoad
-
不受煎茶分布式类不应该使用 分机 作为顶级命名空间。
-
缩略语也应遵循上述公约的驼峰。例如：
Ext.data.JsonProxy 代替 Ext.data.JSONProxyMyCompany.util.HtmlParser 代替 MyCompary.parser.HTMLParserMyCompany.server.Http 代替 MyCompany.server.HTTP
2）源文件
3）方法和变量
4）属性
III。动手
1。声明
1.1）的老路上
如果你曾经使用过任何以前的版本 分机 JS，你肯定熟悉 Ext.extend 创建一个类：
VAR mywindow的 = 分机.延长(对象, { ... });
这种方法很容易跟着来创建一个新类，从另一个继承。比直接继承外，然而，我们没有其他方面的类的创建，如配置，静态和混入，能说一口流利的API。我们将详细审查这些项目在短期内。
让我们来看看另一个例子：
My.cool.Window = Ext.extend(Ext.Window, { ... });
在这个例子中，我们要 命名空间 我们的新类，并使其延伸至 Ext.Window。我们有两个问题需要解决：
My.cool 需要将现有的对象，才可以指定 窗口 作为其财产Ext.Window 必须存在/在页面上加载，然后才能引用
第一项是通常解决了 Ext.namespace （化名通过 Ext.ns）。该方法通过递归横向对象/属性树，创造他们，如果他们不存在。枯燥的部分是你需要记住它们添加以上 Ext.extend 所有的时间。
Ext.ns('My.cool');
My.cool.Window = Ext.extend(Ext.Window, { ... });
第二个问题，但是，不容易解决，因为 Ext.Window 可能取决于许多直接/间接性，从而继承其他类，这些依赖关系可能依赖于其他类存在。出于这个原因，前编写的应用程序 分机 JS 4通常包括在整个图书馆的形式 EXT - all.js 尽管他们可能只需要一个框架的一小部分。
1.2）的新方式
Ext JS的4只用一个单一的消除方法，你需要记住的类的创建所有这些缺点： Ext.define。基本语法：
Ext.define({String} className, {Object} members, {Function} onClassCreated);
的className：在 类名成员 是一个对象代表一个类的成员在键 - 值对的集合onClassCreated 是一个可选的回调函数被调用时，这个类的所有依赖都准备好了，类本身是完全建立。由于 新的异步性质 类的创建，这个回调可以在很多情况下是有用的。这些都将进一步讨论 第四节
例如：
Ext.define('My.sample.Person', {
name: 'Unknown',
constructor: function(name) {
if (name) {
this.name = name;
}
return this;
},
eat: function(foodType) {
alert(this.name + " is eating: " + foodType);
return this;
}
});
var aaron = Ext.create('My.sample.Person');
aaron.eat("Salad"); // alert("Aaron is eating: Salad");
注意：我们创建了一个新的实例 My.sample.Person 使用 Ext.create（） 方法。我们可以用 新的 关键字（新My.sample.Person（））。然而，建议中得到的始终使用习惯 Ext.create 因为它可以让你利用动态加载的优势。更多关于动态加载信息见 入门指南
2。配置
2.1）的老路上
在此之前的版本4，我们并没有真正有办法来区分阶级属性和用户提供的配置。配置被定义为正常类的属性和使用记录 @ CFG 注释。让我们看一个示例类。这是相当漫长的，但它很好地描述作为一个整体的问题：
Ext.ns('My.own');
My.own.Window = Ext.extend(Object, {
/** @readonly */
isWindow: true,
/** @cfg {String} title The default window's title */
title: 'Title Here',
/** @cfg {Object} bottomBar The default config for the bottom bar */
bottomBar: {
enabled: true,
height: 50,
resizable: false
},
constructor: function(config) {
Ext.apply(this, config || {});
this.setTitle(this.title);
this.setBottomBar(this.bottomBar);
return this;
},
setTitle: function(title) {
// Change title only if it's a non-empty string
if (!Ext.isString(title) || title.length === 0) {
alert('Error: Title must be a valid non-empty string');
}
else {
this.title = title;
}
return this;
},
getTitle: function() {
return this.title;
},
setBottomBar: function(bottomBar) {
// Create a new instance of My.own.WindowBottomBar if it doesn't exist
// Change the config of the existing instance otherwise
if (bottomBar && bottomBar.enabled) {
if (!this.bottomBar) {
this.bottomBar = Ext.create('My.own.WindowBottomBar', bottomBar);
}
else {
this.bottomBar.setConfig(bottomBar);
}
}
return this;
},
getBottomBar: function() {
return this.bottomBar;
}
});
总之， My.own.Window:
- 在接受一个实例配置对象，这与类的默认属性合并
- 允许
的标题 ，并 bottomBar 要改变在运行时通过制定者
这种方法有一个好处，但它是在同一时间一个缺点：你可以覆盖在实例化这个类的实例的任何成员，包括私有方法和属性，不应该被覆盖。而对于flexibilty encapsutation权衡造成在过去，而导致贫困的设计，以及不良的调试和维修经验很多应用误用。
更进一步，还有其他的限制：
2.2）的新方式
在 分机 JS 4，我们引入一个专门 配置 属性得到了强大的处理 Ext.Class预处理器 前级创建。让我们重写上面的例子：
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);
return this;
},
applyTitle: function(title) {
if (!Ext.isString(title) || title.length === 0) {
alert('Error: Title must be a valid non-empty string');
}
else {
return title;
}
},
applyBottomBar: function(bottomBar) {
if (bottomBar && bottomBar.enabled) {
if (!this.bottomBar) {
return Ext.create('My.own.WindowBottomBar', bottomBar);
}
else {
this.bottomBar.setConfig(bottomBar);
}
}
}
});
下面是一个如何使用的例子可以：
var myWindow = Ext.create('My.own.Window', {
title: 'Hello World',
bottomBar: {
height: 60
}
});
alert(myWindow.getTitle()); // alerts "Hello World"
myWindow.setTitle('Something New');
alert(myWindow.getTitle()); // alerts "Something New"
myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"
myWindow.setBottomBar({ height: 100 }); // Bottom bar's height is changed to 100
有了这些变化：
My.own.Window 类的代码大大减少，甚至更多的功能与- 配置是完全封装其他类成员
- getter和setter，每个配置属性的方法自动生成到类的类的创建过程中的原型，如果类没有已经定义了这些方法。
- 一个
适用 方法也产生每个配置属性。自动生成的setter方法??调用 适用 方法在内部设置前的值。覆盖 适用 对于一个配置属性的方法，如果你需要运行之前设置值的自定义逻辑。如果 适用 不返回值，那么二传手不会设置的值。例如见 applyTitle 以上。
3。静力学
静态成员可以定义使用 静力学 配置
Ext.define('Computer', {
statics: {
instanceCount: 0,
factory: function(brand) {
// 'this' in static methods refer to the class itself
return new this({brand: brand});
}
},
config: {
brand: null
},
constructor: function(config) {
this.initConfig(config);
// the 'self' property of an instance refers to its class
this.self.instanceCount ++;
return this;
}
});
var dellComputer = Computer.factory('Dell');
var appleComputer = Computer.factory('Mac');
alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"
alert(Computer.instanceCount); // Alerts "2"
4。继承
Ext JS的4支持同时通过继承和混入继承。欲了解更多有关继承的信息请参阅文件 Ext.Class
6。依存关系
另一项新功能介绍 分机 JS四是动态加载的依赖关系。欲了解更多信息，请参阅文件 Ext.Loader
IV。错误处理和调试
Ext JS的4包含了一些有用的功能，将帮助您调试和错误处理。
-
您可以使用 Ext.getDisplayName（） 得到的任何方法的显示名称。这对于抛出的错误有类名和方法名有用的描述：
扔 新的 错误('['+ 分机.getDisplayName(参数.被叫) +“]一些消息在这里”);
-
当错误被抛出在类中定义的任何使用方法 Ext.define（），你应该看到的方法和调用堆栈中的类名，如果您使用的是基于WebKit的浏览器（浏览器或Safari）。例如，下面是它看起来像在浏览器：
|
