[ExtJS5学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试

2022-03-07 05:39:30

-------------------------------------------------------------资源链接-----------------------------------------------------------------------

翻译来源 Sencha Cmd官方网站： http://www.sencha.com/products/extjs/up-and-running/the-class-system

------------------------------------------------------------------------------------------------------------------------------------------------

本篇指导旨在给想要创建或者从EXT JS 4.X或者EXT JS 5.X继承已有类的任何开发者的。

概述

-------

EXT JS 5自带了有超过300的类，到目前为止有200多万的开发者在使用extjs开发，他们来自不同的地方，有不同的背景。所以这样说来，在提供一份公共代码结构上我们就面临着一个巨大的挑战，这些代码结构是：

1.大家都熟悉了解，简单容易学习

2.开发迅速，调试方便，部署的时候也没有痛苦

3.有组织的，可扩展的，并且是可维护的

JavaScript是面向原型的类语言，其中一个最强大的功能就是*，有好多的解决方案，可以使用不同的编码风格还有技术问题，但是这样就会以不可预知为代价了。没有一个统一的结构，javascript代码就很难理解，很难维护并且不好复用。

另一方面，基于类的编程仍然是最流行的面向对象的编程模式，基于类的语言通常需要强类型，封装和标准的编码惯例，通过让开发人员坚持大量的原则,代码更可能是可预测的,可扩展和可伸缩。然而,这个模型没有JavaScript的动态能力。

每个方法都有优点和缺点,但是我们可以保持好的而坏的部分同时隐藏?答案是肯定的,你可以在Ext JS找到解决方案。

命名约定

在代码中使用一致的命名惯例基础类、名称空间和文件名可以帮助组织你的代码,结构化和可读性。

类命名约定

类名只能包含字母数字字符。数字被允许但是不被鼓励，除非他们属于一个技术术语。不要使用下划线、连字符或其他任何非字母数字字符。例如:

MyCompany.useful_util.Debug_Toolbar

这个是被推荐的

MyCompany.util.Base64

这个是可以接受的

类名应该打包到像使用对象属性(.)一样的适当的名称空间中。类名至少应该有一个独特的*名称空间中紧随其后。例如:

MyCompany.data.CoolProxy
MyCompany.Application

*名称空间和实际的类名应该驼峰模式其它一切应该都小写，例如:

MyCompany.form.action.AutoLoad

不是使用sencha生成的类尽量不要使用Ext作为*空间。缩略词也应该遵守驼峰预约定，如：

使用Ext.data.JsonProxy 而不是 Ext.data.JSONProxy
使用 MyCompany.util.HtmlParser 而不是MyCompary.parser.HTMLParser
使用MyCompany.server.Http 而不是 MyCompany.server.HTTP

源文件命名约定

类的名称直接映射到它们存储的文件路径。因此,必须只有一个类文件。例如:

Ext.util.Observable 是在如下目录存储的 path/to/src/Ext/util/Observable.js
Ext.form.action.Submit 是在如下目录存储的 path/to/src/Ext/form/action/Submit.js
MyCompany.chart.axis.Numeric 是在如下目录存储的 path/to/src/MyCompany/chart/axis/Numeric.js

path/to/src是应用程序的类路径。所有类应该在这种共同的根下，,应该给予适当的名称空间以便可以最好的开发、维护和部署。

方法和变量的命名规则

以类似的方式,类名、方法和变量名只能包含字母数字字符。数字被允许但是不被鼓励,除非他们属于一个技术术语。不要使用下划线、连字符或其他任何非字母数字字符。方法和变量名应该遵循驼峰原则这也适用于缩略词。

例如：
可接受的方法名称:
encodeUsingMd5()
getHtml()而不是 getHTML()
getJsonResponse()而不是getJsonResponse()
parseXmlContent()而不是parseXMLContent()
可接受的变量名:
var isGoodName
var base64Encoder
var xmlReader
var httpServer

属性的命名规则

类属性名遵循完全相同的约定时除了静态常量。
静态类常量属性应该全部大写。例如:

Ext.MessageBox.YES = "Yes"
Ext.MessageBox.NO = "No"
MyCompany.alien.Math.PI = "4.13"

声明

旧的方式

如果你曾经使用过Ext的4.x版本，你可能会对Ext.extend方法来创建类比较熟悉：

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

这种方法很容易遵循以创建一个新的类继承自另一个。除了直接继承,我们没有其他方面创造流畅的API的类。这个排除诸如配置、静态和mixins。我们稍后将详细回顾这些物品在本指南。

让我们再看看另一个例子：

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

在本例中,我们想我们新类命名空间,并使其从Ext.window延伸。有两个问题我们需要解决:

1.在给My.cool属性赋值Window属性的时候，需要先有这个对象存在。

2.ext . window需要存在/加载页面,才能引用

解决第一个问题我们可以通过Ext.namespace(别名 Ext.ns)来解决。这个方法递归地通过对象/属性树创建他们如果他们不存在。这需要在之前添加Ext.extend

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

第二个问题不容易解决,因为ext.window可能取决于许多其他类。反过来,这些依赖关系可能依赖于其他类的存在。出于这个原因,Ext JS 4之前编写的应用程序引入整个ext-all.js的形式,不管应用程序是不是只需要一小部分的框架。

新的方式

Ext JS 4消除这些缺点为类创建一个方法你需要记住:Ext.define。它的基本语法如下:

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");

注意:我们创建了一个新的My.sample的实例。使用Ext.create()方法。我们可以使用新的关键字(new My.sample.Person())。不过建议得到的习惯总是使用Ext.create因为它允许您利用动态加载。动态加载的更多信息参见入门指南

配置

在Ext JS 4中,我们介绍了一个专用的配置属性,它是在类创建之前被强大的Ext.Class 预处理创建的类。功能包括:

1.从其他类成员配置是完全封装
2.如果方法还未定义，创建期间Getter和setter方法为每个配置属性自动生成到类原型类。
3.一个apply方法也为每个属性生成配置。内部自动生成setter方法调用apply方法之前设置值。你可以覆盖apply方法申请配置属性,如果你需要运行自定义逻辑之前设置的值。如果apply不返回一个值,setter不会设置值。

为Ext类使用配置,Ext JS 5消除了需要手动调用initConfig()。然而,对于自己的类,扩展Ext.Base initConfig()仍然需要手动调用。
你可以看到下面的配置示例：

Ext.define('My.own.Window', {
   /** @readonly */
   isWindow: true,

   config: {
       title: 'Title Here',

       bottomBar: {
           height: 50,
           resizable: false
       }
   },

   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) {
           if (!this.bottomBar) {
               return Ext.create('My.own.WindowBottomBar', bottomBar);
           }
           else {
               this.bottomBar.setConfig(bottomBar);
           }
       }
   }
});

/** A child component to complete the example. */
Ext.define('My.own.WindowBottomBar', {
   config: {
       height: undefined,
       resizable: true
   }
});

这是一个如何使用它的例子:

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 });

alert(myWindow.getBottomBar().getHeight()); // alerts 100

静态变量

静态变量可以使用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
    }
});

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"

错误控制和调试

Ext JS包括一些有用的特性,将帮助您调试和错误处理。

您可以使用Ext.getDisplayName()的任何方法的显示名称。这对抛出错误的类名和方法名描述来说是特别有用的:

throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');

当有错误在使用Ext.define时抛出的时候，你应该查看这个方法还有类的堆栈信息，你可以看下谷歌Chrome中报错的信息如下：

码农公寓

概述