Extjs4前端开发代码规范参考

 

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

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应用

             

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