一步一步翻译,解说extjs4-------------Class System

最新推荐文章于 2020-03-30 19:06:38 发布

月亮床

最新推荐文章于 2020-03-30 19:06:38 发布

阅读量155

点赞数

分类专栏：开发技术文章标签： extjs

开发技术专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了ExtJS 4中的类系统重构，包括命名规范、类声明、配置及静态成员等内容，帮助开发者更好地理解和使用ExtJS 4。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Class System

在其历史上的第一次，Ext JS的经历了一次巨大的重构。几乎每一个类都被重写，因此，在开始写代码之前很好的理解各类是很重要的。

本手册适用于任何的开发者,它分为4个部分：

第一节：“概述”：描述一个强大的类系统第二节：“命名约定”：怎么更好的命名类，方法，属性，变量和文件。第三节：“动手”：提供了详细的一步一步的代码示例第四节：“错误的处理和调试”：提供有用的提示和技巧，如何处理异常

I. 概述

Ext JS 4有300多个类。有一个超过20万来自世界各地开发者的用户社区。在同一个框架下，我们面对着一荐巨大的挑战（共同的代码架构）

熟悉和简单易学
快速开发，调试方便，无痛部署
精心组织，可扩展性和可维护性 JavaScript没有类概念，面向原型的语言。因此，本质上，语言的最强大的功能之一是其灵活性。它可以用不同的方式实现相同的功能。然而，该功能是不可预知的成本。如果没有一个统一的结构，JavaScript代码很难理解，维护和重用。

另一方面，基于类的编程，仍然是OOP的最流行的模式。基于类的语言通常需要强有强类型，提供封装，并拿出标准的编码格式。通常使得开发者有相同的原则，编写的代码更有可扩展性。然而，他们没有发现JavaScript有这种能力。

每种方法都利和弊，我们有没有一种方法可以只要好的不要坏的呢，答案是肯定的，在Extjs4中我们解决了这个问题

II.命名约定

对类，命名空间，文件名使用统一的命名命名约定，有利于对代码的组织，结构化和更有可读性

1) 类

类名可能只包含字母数字。数字是可以，但大多情况下不鼓励使用，除非是技术术语，同样的不要使用下划线，连接线和非字母数字字符。例如：

MyCompany.useful_util.Debug_Toolbar 不鼓励
MyCompany.util.Base64可以

类应该有唯一的命名空间。例如：

MyCompany.data.CoolProxy
MyCompany.Application

顶级的命名空间和实际类名应在驼峰，一切应全部小写。例如：

MyCompany.form.action.AutoLoad

2) 源文件

一个类一个文件，类名和文件名相同。例如：

Ext.util.Observableis stored inpath/to/src/Ext/util/Observable.js
Ext.form.action.Submitis stored inpath/to/src/Ext/form/action/Submit.js
MyCompany.chart.axis.Numericis stored inpath/to/src/MyCompany/chart/axis/Numeric.js

3) 方法和变量

和类名相同，方法和变量名可能只包含字母数字字符。数字是允许的，但在大多数情况下不鼓励，除非他们属于一个技术术语。不要使用下划线，连字符，或任何其他非字母数字字符。
方法和变量名应该总是在驼峰。这也适用于首字母缩写。
例子:
可以接受的方法名称：encodeUsingMd5（）getHtml（而不是getHTML（））getJsonResponse（），而不是getJSONResponse（），而不是ofparseXMLContentparseXmlContent（)
可接受的变量名：VARisGoodNameVARbase64EncoderVAR的XmlReaderVARhttpServer

4) 属性

类的属性名遵循完全相同的公约，除上面提到的方法和变量的情况下，当是静态常量，静态类属性是常量应全部大写。例如：
- Ext.MessageBox.YES= "Yes"
- Ext.MessageBox.NO= "No"
- MyCompany.alien.Math.PI = "4.13"

III. 动手

1. 声明

1.1) 老方式

If you have ever used any previous version of Ext JS, you are certainly familiar withExt.extendto create a class:

如果你使用过Ext JS之前的版本，你应该相当熟悉用Ext.extend的方式创建一个类：

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

我们先看个例子：

My.cool.Window = Ext.extend(Ext.Window, { ... });

在这个例子中，我们命名了继承自Ext.Window的新类。我们需要解决两个问题：

1.My.cool应该是一个已经存在的对象

2.Ext.Window需要被引入

Ext.ns('My.cool');
My.cool.Window = Ext.extend(Ext.Window, { ... });

1.2) 新方式

Ext JS 4 提供了Ext.define方式创建类.例如:

Ext.define(className, members, onClassCreated);

className: 类名
members:键 - 值对的集合
onClassCreated:类创建好后的回调函数

Example:

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');
    aaron.eat("Salad"); // alert("Aaron is eating: Salad");

注意我们使用Ext.create（）创建了一个新实例。我们也可以用new关键字（newMy.sample.Person（））。然而，这是不建议的，因为使用Ext.create（）可以让你动态加载所依赖的类

2. 配置

在Ext JS 4中我们声明了config属性，在创建实例前由EXt.Class处理

配置是完全封装其他类成员
对config属性中的成员自动创建getter，setter，apply方法

例子：

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

3. 静态

使用statics定义静态成员

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"

IV. 错误&调式

Ext Js 4 有一些有用的功能可以帮助你更好的调式问题和对错误的处理

您可以使用Ext.getDisplayName（）来获得的任何方法名称。可以抛出带有类名和方法名错误描述，这是特别有用：
```
  throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');
```
在任何使用Ext.define（）定义的任何类方法抛出错误时，你应该看到调用堆栈中的方法和类的名称，如果你正在使用一个基于WebKit的浏览器（Chrome或Safari）。例如，在Chrome是什么样子：