EXTJS 5 学习笔记1 - Class System

1. Name Conventions 命名规范

     1) Classes 类

         a. 类名只能包含数字字母 only contain alphanumeric characters

         b. 允许但不鼓励使用数字  numbers are permitted but discouraged

         c. 不能使用下划线、减号或其他特殊字符

         d. 类要按包名组织，至少需要一个最顶层的唯一包名

         e. 最顶层的包名和类名应该大小写，其他中间名字需小写 top-level namespaces and the actual class names should be CamelCased

         f.  缩略词也应该遵循大小写原则

         g. 非Sencha发布的类不允许使用Ext作为最顶层的包名

 

     2) Source Files  源文件

         a. 类名直接映射成文件路径 names of classes map directly to the file paths

         b. 一个类一个文件

         c. Ext.util.Observable => /path/to/src/Ext/util/Observable.js

 

     3) Methods and Variables 方法与变量

         a. 方法与变量名只能包含数字字母 only contain alphanumeric characters

         b. 允许但不鼓励使用数字  numbers are permitted but discouraged

         c. 不能使用下划线、减号或其他特殊字符

 

     4) Properties 属性

         a. 属性的命名规范与变量的命名规范类似

         b. 静态属性的名称必须全部大写

 

 

2. Declaration 声明

     1) The Old Way

         a. var MyClass = Ext.extend(object, {...});

         b. Ext.ns("My.cool");  My.cool.Window = Ext.extend(Ext.Window, {...});

 

     2) The New Way

         a. Ext.define(className, members, onClassCreated);

         b. Ext.create(className, arguments);

 

3. Configuration 配置

     1) As for EXTJS 4, a dedicated config property was introduced

     2) Configurations are completely encapsulated from other class members

     3) Getter and setter methods for every config property are automatically generated into the class prototype during class creation if methods are not already defined

     4) The auto-generated setter method calls the applyXXX method (if defined on the class) internally before setting the value. You may override the applyXXX method for a config property if you need to run custom logic before setting the value. If your apply method does not return a value, the setter will not set the value. The updateXXX method (if defined) will also be called when a different value is set. Both the applyXXX and updateXXX methods are passed the new value and the old value as params.

     5) As for EXTJS 5, eliminated the need to call initConfig() manually. Only for your own classes that extend Ext.Base, initConfig() still neneds to be called

 

4. Statics 静态成员

     1) 通过配置statics来定义静态成员 static members can ben defined using the statics config

     2) Ext.define('Computer', {

              statics: {

                    instanceCount: 0,

                    factory: function(brand) {

                         return new this({brand: brand});

                    }

               },

               

               config: {

                    brand: null

               }

         });

         var dell = Computer.factory('dell');

 

5. Errors Handling & Debugging 错误处理及调试

     1) 通过Ext.getDisplayName()获取方法的名称。尤其是在需要抛出异常

          throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] something wrong ');

     2) 使用Ext.define()定义的任意类方法在抛出异常时，可以在WebKit浏览器上观察到异常栈(Chrome/Safari)