[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.你们都熟悉了解，简单容易学习

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中报错的信息以下：