类系统

翻译 2012年03月29日 22:59:20

类系统

在其历史上的第一次,Ext JS的经历了从地面的巨大重构了新的阶级制度。新架构的背后几乎每一个在Ext JS 4.x的书面单类代表,因此重要的是了解它在开始编码之前。

本手册旨在为开发人员要创建新的或扩大现有教学班在Ext JS 4.x的 它分为4个部分:

  • 第一节:“概述”解释为一个强大的阶级制度的必要性
  • 第二节:“命名约定”讨论命名的类,方法,属性,变量和文件的最佳做法。
  • 第三节:“动手”提供了详细的一步一步的代码示例
  • 第四节:“错误处理和调试提供了有用的提示和技巧,如何处理异常

一,概述

Ext JS的船舶超过300班。我们有超过20万开发者的巨大的社会,来自世界各地的各种编程背景。在规模,一个框架,我们面临着一个共同的代码架构,是一个提供大challange:

  • 熟悉和简单易学
  • 快速开发,易于调试,无痛部署
  • 精心组织,可扩展性和可维护性

JavaScript是一个没有阶级的,面向原型的语言。因此自然语言的最强大的功能之一是其灵活性。它可以由许多不同的方式做同样的工作,在许多不同的编码风格和技巧。然而,该功能是不可预知的成本。如果没有一个统一的结构,JavaScript代码可以是真的很难理解,维护和重新使用。

另一方面,基于类的编程,仍然保持作为最流行 ​​的面向对象的模型。基于类的语言,通常需要强类型,提供封装,以及标准编码约定来。由一般开发商坚持的原则,编写的代码更可能是可预见的,可扩展性和可扩展性,随着时间的推移。然而,他们没有像JavaScript这样的语言中找到相同的动态能力。

每种方法都有其自身的优点和缺点,但在同一时间,我们可以有双方的良好的部分,而隐瞒坏的部件?答案是肯定的,我们已经实施了该解决方案的Ext JS 4。

二。命名约定

整个类,命名空间和文件名的代码的基础上使用一致的命名惯例有助于保持你的代码有组织,有结构化和可读性。

1)班

类的名称只能包含字母数字字符。数字是允许的,但在大多数情况下,气馁,除非他们属于一个技术术语。不要使用下划线,连字符,或任何其他非字母数字字符。例如:

  • MyCompany.useful_util.Debug_Toolbar被劝阻
  • MyCompany.util.Base64是可以接受的

类的名称应在适当和正确的命名空间的使用对象的属性点符号(。)的包分成。在最低限度,应该有一个独特的顶级命名空间的类的名称。例如:

MyCompany的数据

顶层的命名空间和实际的类名应该是在CamelCased,一切应该是所有小写。例如:

MyCompany的形式行动

不煎茶分布的类不应该使用分机作为顶级命名空间。

缩略语也应遵循上面列出CamelCased公约。例如:

  • Ext.data.JsonProxy,而不是对Ext.data.JSONProxy
  • MyCompany.util.HtmlParser,而不是对MyCompary.parser.HTMLParser
  • MyCompany.server.Http,而不是对MyCompany.server.HTTP

2)源文件

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

  • Ext.util.Observable存储在路径/ / SRC /分机/ UTIL / Observable.js
  • 路径/ / SRC /分机/形式/行动/ Submit.js的存储Ext.form.action.Submit
  • MyCompany.chart.axis.Numeric存储在路径/ / SRC / MyCompany的/图表/轴/ Numeric.js

路径/ / SRC是您的应用程序的类目录。所有类应该留在这个共同的根,并应适当命名空间最好的发展,维护和部署的经验。

3)方法和变量

  • 同样,以类名,方法和变量名只能包含字母数字字符。数字是允许的,但在大多数情况下,气馁,除非他们属于一个技术术语。不要使用下划线,连字符,或任何其他非字母数字字符。

  • 方法和变量名应该总是在camelCased。这也适用于缩略语。

  • 举例

    • 可接受的方法名称:getHtml encodeUsingMd5()()代替getHTML()getJsonResponse()代替getJSONResponse()parseXmlContent(),而不是 parseXMLContent()
    • 可接受的变量名:VAR isGoodName VAR base64Encoder VAR的XmlReader VAR httpServer

4)属性

  • 类的属性名遵循完全相同的惯例,除了上面提到的方法和变量的情况下,当他们是静态常量。

  • 静态类的属性是常量应该全部大写大小写。例如:

    • Ext.MessageBox.YES =“是”
    • Ext.MessageBox.NO =“没有”
    • MyCompany.alien.Math.PI =“4.13”

第三。动手

1。声明

1.1)老办法

如果您曾经使用过任何旧版本的Ext JS,你肯定熟悉Ext.extend创建一个类:

VAR  mywindow的 =  分机延长对象 {  ...  });

这种做法很容易跟进,以创建一个新类,从另一个继承。比其他直接继承,但是,我们没有有能说一口流利的API类创建的其他方面,如配置,静态和混入。我们将审查这些项目在细节不久。

让我们来看看另一个例子:

我的凉爽 =  分机扩展分机窗口 {  ...  });

在这个例子中,我们希望我们的一类新的命名空间,使其延长Ext.Window有两方面的顾虑,我们需要解决:

  1. my.cool需要将现有的对象之前,我们可以指定窗口,其财产
  2. Ext.Window需要存在/加载在页面上之前,它可以被引用

第一项是通常解决与Ext.namespace(化名Ext.ns的)。这种方法通过对象/属性树递归横向和创建他们,如果他们不存在。枯燥的部分是你要记住他们加入上述Ext.extend所有的时间。

分机,
我的凉爽 =  分机延长分机窗口 {  ...  });

然而,第二个问题,是不容易解决,因为Ext.Window可能取决于许多其他类,它直接/间接继承,并反过来,这些依赖关系可能依赖于其他类存在。出于这个原因,编写的应用程序之前的Ext JS 4通常包括在整个库的形式EXT-all.js,即使他们可能只需要一小部分的框架。

1.2)的新途径

Ext JS的4只是一个单一的方法,你需要记住类的创建与消除所有这些缺点:Ext.define其基本语法如下:

分机定义类名成员onClassCreated的);
  • 的className:类名
  • 成员是一个对象,代表一个类成员的键-值对的集合
  • onClassCreated是一个可选的回调函数被调用这个类的所有依赖关系时准备,和类本身是完全建立。由于新的异步性质类的创建,此回调可以在很多情况下是有用的。这些将在第四节进一步讨论

例如:

分机定义My.sample.Person'  { 
    名称 “未知”

    构造函数 函数名称 { 
        如果 名称 { 
            名称= 名称; 
        }

        返回 ; 
    }
 功能foodType )的 
        警报这个名称+  “吃”  + foodType );

        返回 ; 
    
} } );

VAR =  分机创建'My.sample.Person“ ,“阿龙”  ); 
    亚伦“沙拉” );  / /警报(“亚伦是吃色拉”);

注意:我们创建一个新实例My.sample.Person使用的Ext.create()方法。我们可以用新的关键字(新My.sample.Person() )。然而,它建议得到总是使用习惯Ext.create因为它使您可以动态加载的优势。对于动态加载的更多资讯,请参阅“ 入门指南“

2。组态

在Ext JS 4,我们得到前预处理器强大的处理Ext.Class类创建一个专用的配置属性功能包括:

  • 从其他类成员的配置完全封装
  • getter和setter,为每个配置属性的方法自动生成的类到类的类的创建过程中的原型不具有已定义这些方法。
  • An 应用apply方法也产生了为每个配置属性。自动生成的setter方法调用设定值之前,国内 method is also generated for every config property. The auto-generated setter method calls the 申请的apply方法。 method internally before setting the value. Override the apply method for a config property if you need to run custom logic before setting the value. If apply does not return a value then the setter will not set the value. For an example see applyTitle below.

Here's an example:

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

And here's an example of how it can be used:

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

Static members can be defined using the statics config

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. Errors Handling & Debugging

Ext JS 4 includes some useful features that will help you with debugging and error handling.

  • You can use Ext.getDisplayName() to get the display name of any method. This is especially useful for throwing errors that have the class name and method name in their description:

      throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');
  • When an error is thrown in any method of any class defined using Ext.define(), you should see the method and class names in the call stack if you are using a WebKit based browser (Chrome or Safari). For example, here is what it would look like in Chrome:

Call Stack

See Also

探索Win32系统之窗口类(Window Classes in Win32)

以前一直没有很在意窗口类的使用,我近期在用vc做一些界面时遇到窗口类定义的概念,这次翻MSDN的时候看到了一篇文章,讲到窗口类的一些基本概念,匆匆看完,翻译出来当学习笔记,可能有一些细节上的谬误,请包...
  • maweiqi
  • maweiqi
  • 2012年03月11日 22:53
  • 939

从零开始,搭建博客系统MVC5+EF6搭建框架(3),添加Nlog日志、缓存机制(MemoryCache、RedisCache)、创建控制器父类BaseController

一、回顾系统进度以及本章概要      目前博客系统已经数据库创建、以及依赖注入Autofac集成,接下来就是日志和缓存集成,这里日志用的是Nlog,其实还有其他的日志框架如log4,这些博客园都有...

计算机系统(嵌入式类)术语概念

6月忙于期末的复习和课业项目,很久没更博客,今天来分享一部分有关计算机系统(含嵌入式类系统)的概念知识。 既是考点,又是需要掌握的概念,发在这里做个记录和分享。嵌入式系统: 是一种嵌入机械或电气系...

新闻资讯类系统 ---- 文章分类和标签的设计

零. 简介 博客、 CMS(网易新闻、 腾讯新闻) 之类的系统, 核心就是文章, 一切的一切都围绕着文章进行, 所以设计一个好的文章分类和标签的数据库关系模型, 对后续编码及维护将会起到至关...

Android调用系统邮件类应用的正确实现方法

http://blog.csdn.net/asce1885/article/details/8119898 Android应用开发中,很多情况下免不了要调用手机上的邮件类应用...

系统调用的简单封装类实现

系统调用的简单封装类实现, 实现了thread, process, semaphore, mutex 的封装。 封装类,实际上是对调用接口的实现。 代码简练,可供参考。 有一些最简单的单行代码封装...

如何修改Wordpress系统自带的Widget小工具类

在Wordpress中的wp-includes中的default-widgets.php文件将每个Widget写成了一个类。要修改Widget只要找到相应的类即可。以“功能”这个小工具为例:在defa...

基于Android系统Api封装常用工具类

项目地址 https://github.com/h4de5ing/AndroidCommon/blob/master/README-cn.md gradle使用方式 compile 'com...

基于深度学习的人脸识别系统系列(Caffe+OpenCV+Dlib)——【六】设计人脸识别的识别类

现在我们希望能够有一个识别的接口来实现输入一张图片,便可以分辨出他是哪个人。我们需要提前: 1、定义一个人脸空间; 2、将一些人脸的图片放到这个人脸空间中; 3、将n个人脸图片提取特征为n个向量,并且...

C++ 面向对象—类继承(酒店会员管理系统)

#include #include #include using namespace std; class RMB { friend ostream &operator
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:类系统
举报原因:
原因补充:

(最多只允许输入30个字)