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

本文地址： http://blog.csdn.net/sushengmiyan/article/details/38479079

本文作者：sushengmiyan

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

翻译来源  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.大家都熟悉了解，简单easy学习

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, { ... });

这样的方法非常easy遵循以创建一个新的类继承自还有一个。除了直接继承,我们没有其它方面创造流畅的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, { ... });

第二个问题不easy解决,由于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()方法。我们能够使用新的keyword(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中报错的信息例如以下：