`
guoqingcun
  • 浏览: 55689 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

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) 方法和变量

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

 

 

4) 属性

  • 的属性名遵循完全相同的公约上面提到方法变量情况下当是静态常量,静态类属性是常量全部大写例如:
  •  

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什么样子

Call Stack

 

 

分享到:
评论

相关推荐

    extjs-4-class-system.rar_300

    EXTJS有300多个类,能做到既有面向对象编程的规范性,又能做到JavaScript的灵活性

    extjs4-教程

    ### ExtJS4基础教程知识点 #### 1. ExtJS4开发环境搭建 ExtJS4是使用JavaScript进行开发的框架,专门用于构建富互联网应用(RIA)。搭建ExtJS开发环境需要预先安装一些软件和配置开发环境。以下步骤详细介绍了如何...

    extjs4-slate 主题

    ExtJS 4 Slate 主题是基于 Sencha ExtJS 4.0.7 框架的一个视觉风格,它提供了一种现代、扁平化的设计,增强了用户界面的吸引力和用户体验。Slate 主题是对默认主题的扩展,旨在为开发者提供一个更加专业且引人入胜的...

    ExtJS4中文教程2 开发笔记 chm

    Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4 API文档阅读(四)——Data ...

    Extjs4---grid的修改、删除功能---结合struts2、hibernate

    在本文中,我们将深入探讨如何在ExtJS 4框架中实现Grid组件的修改和删除功能,同时结合Struts2和Hibernate技术,构建一个完整的CRUD(创建、读取、更新、删除)应用。ExtJS 4是一个强大的JavaScript UI库,提供了...

    Extjs-ext-3.1.1

    licensing@extjs.com http://extjs.com/license Open Source License Ext is licensed under the terms of the Open Source GPL 3.0 license. http://www.gnu.org/licenses/gpl.html There are several FLOSS ...

    extjs-theme-bootstrap

    "extjs-theme-bootstrap" 是针对 EXTJS4 的一个主题,它借鉴了 Bootstrap 的设计风格,让 EXTJS4 应用程序具有更加现代化和一致的外观。 Bootstrap 是一个流行的前端开发框架,由 Twitter 推出,主要用于构建响应式...

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    Extjs4---combobox省市区三级联动+struts2

    ### Extjs4---combobox省市区三级联动+struts2 #### 一、技术背景与原理 本案例涉及的关键技术主要包括Extjs4框架中的`combobox`组件以及Struts2框架,通过这两种技术实现了省市区三级联动的效果。下面将详细介绍...

    包含各种类型的extjs小图标,Extjs4小图标

    在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...

    Extjs4-学习指南

    ##### 3.1 系统类 (class system) - **概述**:Extjs 使用面向对象编程的思想,通过类来组织和管理代码。 - **编码和规范**:遵循 Extjs 的编码风格和规范,提高代码质量。 - **示例代码**:提供实际的例子帮助理解...

    extjs4环境搭建

    3. `\extjs-4.x\locale\ext-lang-zh_CN.js`(如果需要中文支持):这个文件提供了中文语言包,用于将ExtJS的默认英文提示和错误消息翻译为中文。 在Eclipse中,只需将上述三个文件或文件夹引入到你的项目中,可以...

    extjs4中文文档

    这个中文文档是EXTJS4的官方文档翻译版,为开发者提供了详细的API参考和教程,帮助理解EXTJS4的各种组件、功能和工作原理。 EXTJS4的核心特性包括: 1. **组件化**:EXTJS4引入了基于MVC(Model-View-Controller)...

    ExtJS4之初体验

    ### ExtJS4之初体验 #### 一、准备工作 在开始使用ExtJS4进行开发之前,我们需要做一些基础的准备工作,确保开发环境已经搭建好,并且能够顺利地运行第一个ExtJS4程序。 ##### 1. 浏览器兼容性 ExtJS4支持大部分...

    ExtJS快速入门--传智播客--蔡世友

    ExtJS快速入门--传智播客--蔡世友

    extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip

    在"extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip"这个压缩包中,包含了一个基于ExtJS 4.1.0 MVC模式构建的复杂仪表盘示例。这个示例展示了如何利用ExtJS的MVC设计模式来组织和管理代码,以便创建功能...

    Extjs4 API文档阅读(一)——类系统(Class System)

    ### Extjs4 API文档阅读(一)——类系统 #### 第一部分:概述 在ExtJS4中,类机制被大幅度地重构与优化,这主要是为了支撑全新的架构需求。随着ExtJS4类的数量超过300个,对于这样一个庞大且全球范围内拥有超过20万...

    Extjs4 权威指南(中)

    ### Extjs4 权威指南知识点总结 #### 一、Extjs4简介与获取途径 - **概述**:Extjs4是一款基于JavaScript的企业级富客户端Web应用程序开发框架,旨在简化前端开发过程,提供丰富的UI组件和强大的数据处理能力。 - ...

    extjs4-export

    在EXTJS4中,开发人员有时需要为用户提供导出数据到Excel的功能,以便他们可以方便地处理和分析数据。然而,EXTJS4官方提供的库可能并不完全支持直接导出到Excel,这通常需要一些额外的工作来实现。"extjs4-export...

Global site tag (gtag.js) - Google Analytics