EXTJS4 official documentation translation series 1: Class systems and coding specifications

EXTJS4 official documentation translation series 1: Class systems and coding specifications, reposted from the technical blog of "Learn and learn insufficiency", the original article is as follows:

I started to use extjs4 last week and never used ext before. So now I have to read the document. By the way, remember to avoid forgetting it later. the content in the brackets is the remarks or original text added by myself. the English language is poor, but I don't want to keep it bad, so I try to translate it. I hope you can make a mistake. If you are good at English, please read the official documentation. Don't be misled by me.

Address: http://docs.sencha.com/ext-js/4-0/#/guide/class_system

PS: some titanium documents that were to be translated last time are helpless .. no way. I can't work. I want to learn work in my spare time. titanium liked it, but it never touched it for a long time. have the opportunity to continue ..

Ext4 uses the new class mechanism for a lot of refactoring, which is the first time in the history of ext! To support the new architecture, ext4 almost overwrites every class, so it is best to understand the new architecture and then start coding.

This article is suitable for developers who want to expand existing classes or create new classes in extjs4 (Note: To use ext4, take a look). There are four parts:

The first part is an overview of the necessity of a powerful class mechanism.

Part 2: Coding specifications: discusses best practices for class, method, attributes, variables, and file naming.

Part 3: hands-on, detailed Encoding example.

Part 4: Error Handling and debugging, providing some useful debugging and Exception Handling Skills

I. Overview

ExtJS4 has more than 300 classes. so far, our community has more than 0.2 million developers from all over the world who use different background languages. to provide architecture with the following characteristics on a framework of this scale, there are huge challenges:

1. easy to learn. 2. fast development, simple debugging, and easy deployment. 3. Good structure, scalability and maintainability.

Javascript is a prototype-independent language (Original: classless. Therefore, the most powerful feature of javascript is flexibility. The same thing can be done in different ways and different encoding styles and techniques. This feature also brings unpredictable risks. Without a unified coding specification, javascript code will be hard to understand, maintain, and reuse.

On the contrary, class-based programming languages have popular object-oriented models, strong types, built-in encapsulation mechanisms, and mandatory encoding constraints. By forcing developers to abide by some big principles to make code behavior easier to understand and improve Scalability (I don't understand here, isn't javascript dynamic languages easier to expand ?) And scalability. However, such languages do not have the flexibility of javascript.

Ii. Naming Conventions

Using consistent naming conventions in all classes, namespaces, and file names helps maintain a good structure and readability of the Code.

1) Class

The class name can only contain letters and numbers. Numbers are allowed, but are not recommended in most cases unless these numbers are part of the terminology. Do not use underscores, hyphens, or other non-alphanumeric characters. For example:

MyCompany. useful_util.Debug_Toolbar is not recommended

MyCompany. util. Base64 is appropriate (although it contains numbers, digits are part of the term)

The class name should be included in the namespace separated by periods. At least, there must be a top-level namespace. For example:

MyCompany. data. CoolProxyMyComp

MyCompany. data. CoolProxyMyCompa

The top-level namespace and actual class names should use CamelCased, and the others should be in lower case. For example:

MyCompany. form. action. AutoLoad

Do not use Ext as the top-level namespace for classes not developed by Sencha (that is, not included in Ext.

The abbreviation must also comply with the above camper naming conventions. For example:

Ext. data. JsonProxy instead of Ext. data. JSONProxy

MyCompany. util. HtmlParser instead of MyCompary. parser. HTMLParser

MyCompany. server. Http instead of MyCompany. server. HTTP

2) code file

The file (including the file name) of the class corresponding to the class name ). Therefore, each file should contain only one class (the class name is the same as the file name ). For example:

Ext. util. Observable is stored in path/to/src/Ext/util/Observable. js

Ext. form. action. Submit is stored in path/to/src/Ext/form/action/Submit. js.

MyCompany. chart. axis. Numeric is stored in path/to/src/MyCompany/chart/axis/Numeric. js

Path/to/src is the directory where your application is located. All classes should be under this generic root directory and use appropriate namespaces for development, maintenance, and deployment.

3) methods and variables

Like class naming, methods and variables can only contain letters and numbers. Numbers are also allowed, but not recommended, unless in a professional term. Do not use any non-alphanumeric characters such as underscores or hyphens.

The method is the same as the variable name.

Example

• Proper Method Name:

EncodeUsingMd5 () getHtml () instead of getHTML ()

GetJsonResponse () instead of getJSONResponse ()

ParseXmlContent () replaces parseXMLContent ()

• Proper variable name:

Var isGoodName

Var base64Encoder

Var xmlReader

Var httpServer

4) attributes

The class property name follows the naming conventions of the variables and methods above, unless it is a static constant.

All static attribute constants of the class should be capitalized. For example:

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

3. hands-on practice

1). Declaration

1.1) Old Method

If you have used extjs in earlier versions, you must be familiar with Ext. extend to create a class:

   1: varMyWindow=Ext.extend(Object,{...});

 

 

 

This method can easily create a new class from the existing class relay. compared with direct inheritance, we do not have easy-to-use APIs for other aspects of class creation, such as configuration, static methods, and Mixins ). Later, we will review these aspects in detail. Now let's look at another example:

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

 

 

In this example, we create our new class, inherit Ext. Window, and place it in the namespace. We have two problems to solve:

1. before accessing the Window attribute of My. cool, My. cool must be an existing object.

2. Ext. Window must be loaded before reference.

The first problem is usually Ext. namespace (alias Ext. ns. this method recursively creates (if this object does not exist) These object dependencies. the tedious and boring part is that you must. run Ext. ns to create them.

   1: Ext.ns('My.cool');

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

The second problem is hard to solve, because Ext. window may directly or indirectly depend on many other classes, and the dependent classes may also depend on other classes... for this reason, before ext4, we usually introduce the entire ext-all.js, even if we only need a small part of it.

1.2) New Method

In Extjs4, you only need to use one method to solve these problems: Ext. define. below is its basic syntax:

   1: Ext.define(className, members, onClassCreated);

ClassName: Class Name

Members: the object literal volume of a class member (key-value pair, json)

OnClassCreated: an optional callback function that is triggered after all dependencies are loaded and the class is created. this callback function is useful in many cases because of the new asynchronous feature created by the class. these will be further discussed in section 4

For example:

   1: Ext.define('My.sample.Person', {

   2:     name: 'Unknown',

   3:  

   4:     constructor: function(name) {

   5:         if (name) {

   6:             this.name = name;

   7:         }

   8:  

   9:         return this;

  10:     },

  11:  

  12:     eat: function(foodType) {

  13:         alert(this.name + " is eating: " + foodType);

  14:  

  15:         return this;

  16:     }

  17: });

  18:  

  19: var aaron = Ext.create('My.sample.Person', 'Aaron');

  20:     aaron.eat("Salad"); // alert("Aaron is eating: Salad");

Note that we use Ext. the create () method creates My. sample. A new instance of the Person class. we can also use the new keyword (new My. sample. person () to create. however, it is recommended that Ext. create is a habit of creating class examples, because it allows you to take advantage of dynamic loading.