Extjs4前端开发代码规范参考

时间:2022-05-03 13:40:55


准则:  一致性, 隔离与统一管理, 螺旋式重构改进, 消除重复, 借鉴现有方案

 1.    保证系统实现的一致性,寻求一致性方案, 相同或相似功能尽量用统一模式处理;

2.    尽可能使用隔离技术,将某一模块(比如权限管理)的代码隔离在局部统一管理;

3.    不断重构改进,一旦发现更好的方式, 马上替换掉原有方式;

4.    尽可能重用,消除重复;

5.    尽可能先借鉴系统中已有方案并复用之;如果有更好方案可替换之;

 

前端架构: 采用MVC模式

1.     尽可能遵循MVC模式, 做到 “模型-视图-控制器”相分离;

2.     将整个MVC应用分解为多个小的MVC应用, 模块化管理;

3.    “模型-视图”分离: 显示数据集时, 先定义数据模型, 再定义 Store , 然后关联到具体的视图中引用;

4.    “视图-控制器”分离: 视图事件逻辑放置于控制器中,控制器负责注册事件监听、数据加载及更新视图; 极少量逻辑可以绑定到视图中。

 

组件配置: 标识 – 数据配置– 布局 – 显示 – 样式– 监听器

1.    唯一标识性(xtype/itemId/name)最先,数据配置信息(store)次之,布局信息(layout, flex)再次之, 显示性信息(width,height, text等)再次之,样式信息(margin等)再次之,操作/事件监听器(handler, listeners)最后。

2.    标识性信息用于定位组件;数据配置信息用于更快速地了解其显示用途;

3.    事件监听器最好在控制器中注册。

 

异步请求的操作与响应: 统一模式, 响应信息尽可能明确详细 , 正确优先于效率

1.    创造和使用统一模式处理异步请求: 发送请求、处理响应、给予提示;

2.    每个异步请求的响应提示必须指明该响应针对什么请求,完成了什么操作,产生了什么影响; 如果成功, 显示成功导致的结果; 如果失败,显示具体原因; 必要的话给予建议操作;

3.    正确性是第一位的, 其次是效率; 错误的高效只会导致更灾难的结果,而低效的正确毫无意义;

4.    异步请求可以使用两种方式: Ext.data.Store.load 方法和 Ext.Ajax.request . 前者用于为绑定store 的组件加载数据, 后者用于请求操作。

 

全局变量管理:

1.    使用单例模式;

2.    所有模块公用的全局变量和函数放在文件 sharedUtils.js 和 sharedComponents.js 中统一管理; sharedUtils.js 管理实用工具类, sharedComponents.js 管理组件的常用配置;

3.    特定模块公用的全局变量和函数放在该模块的 XXXUtils.js 文件中, 例如 VmoperationUtils.js

 

命名规范:

1.     程序中的所有变量一律采用驼峰式写法;而组件配置中的标识性变量 itemId, name 等值采用下划线写法。比如,

         var vmName =parent.down(‘textfield[name=”vm_name”]’);

2.    模块名带有 _module 或 Module 后缀, 以便于区分;

 

文件位置约定:

1.    自定义样式放置于webapp/resources/css/moonmm.css 下;

2.    图片放置于webapp/resources/images/ 下;

3.    特定模块的局部 frame html 文件放置于 webapp/framehtml/下;

4.    公用JS库、文件放置于 webapp/ 下

 

应用目录结构:


1.    整体MVC 目录结构: 分解为多个子MVC应用

             Extjs4前端开发代码规范参考


             2.  每个子MVC 应用的目录结构:

           Extjs4前端开发代码规范参考