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 应用的目录结构:
最新文章
- JS魔法堂:不完全国际化&;本地化手册 之 理論篇
- 更改primefaces theme
- 25个增强iOS应用程序性能的提示和技巧(初级篇)
- List<;string>;中的泛型委托
- 简单使用packetbeat
- 【转】notepad++ 应用学习 -- 列模式,十六进制模式
- MTU &; MSS 详解记录(转)
- 同一个页面里的JS怎样获取jsp从别的页面获取的参数
- 【Android 多媒体开发】 MediaPlayer 网络视频播放器
- 一统江湖的大前端(5)editorconfig + eslint——你的代码里藏着你的优雅
- Redis学习笔记之延时队列
- [py]使用字典get方法做数据统计
- .NET Core 全新认识(转载)
- 一 Struts框架(上)
- C++泛型编程(1)--自己实现C++迭代器/遍历器 iterator
- G - 生日蛋糕
- Spring4 MVC HelloWord实例
- linux上搭建redis
- Charles抓包之HTTPS抓包配置
- Android 上传文件,图片。以及服务器端接收相关。
热门文章
- 敏捷开发之Scrum扫盲篇(转)
- 关于话题模型(topic model)的一些思考
- 【Jmeter】if控制器+循环控制器+计数器,控制接口分支
- 前端 HTML 常用标签 head标签相关内容 title标签 网页的标题信息
- Magento2与Magento1的区别有哪些
- wx工具栏,菜单栏,状态栏
- IOP开发数据库--20180105整理
- 【UML】-NO.43.EBook.5.UML.1.003-【UML 大战需求分析】- 状态机图(State Machine Diagram)
- centos7 下 apache nginx squid https正向代理 代理服务器
- 基于Extjs+SpringMVC+MyBatis+Oracle的B/S信息系统简化开发思路