前端JS规范http://JsLover.com

Get Started. It's Free
or sign up with your email address
Rocket clouds
前端JS规范http://JsLover.com by Mind Map: 前端JS规范http://JsLover.com

1. 前端JS开发规范

1.1. 基于jquery框架

1.2. 1个公站公用的js---base.js

1.2.1. 全站全局变量

1.2.1.1. baseurl

1.2.1.2. uid

1.2.1.3. vuid

1.2.1.4. ...

1.2.2. 全站全局方法

1.2.2.1. StringBulder

1.2.2.2. getHeadSrc

1.2.2.3. includeFile

1.2.2.4. ...

1.3. 前端组件库

1.3.1. 弹出层

1.3.2. 选择组件

1.3.3. 编辑器

1.3.4. FLASH上传组件

1.3.5. 评论组件

1.3.6. 分页组件

1.3.7. 滚动条加载

1.3.8. 文本框自动高度

1.3.9. 日期控件

1.3.10. 省市区控件

1.3.11. 滚动条阅读

1.3.12. 排序组件

1.4. 页面对应js文件

1.4.1. 每个页面都需要引用 jquery.js和base.js(通过模板页引用)

1.4.2. 每个单页面加载1个页面对应的业务.js

1.4.3. 页面中如果有需要调用到其它js文件,在业务.js头部通过includeFile方法引用

1.5. 命名约定

1.5.1. js目录

1.5.1.1. /js

1.5.1.1.1. /js/lib

1.5.1.1.2. /js/views

1.5.1.1.3. /js/jquery.latest.js

1.5.1.1.4. /js/base.js

1.5.2. js文件名

1.5.2.1. 组件(每个组件一个单独目录,nd.组件功能)

1.5.2.1.1. nd.uapselector/nd.uapselector.js

1.5.2.1.2. nd.uapselector/nd.uapselector.css

1.5.2.1.3. nd.uapselector/demo.htm

1.5.2.2. 业务(每个模块一个单独目录,与php views对应)

1.5.2.2.1. album/photolist.js

1.5.2.2.2. album/photoupload.js

1.5.2.3. 文件名全部用小写

1.5.3. js函数、变量命名

1.5.3.1. 匈牙利命名法

1.5.3.2. json或数组,逗号写前面

1.5.3.3. 变量名在js文件头部分组定义

2. 前后端协作规范

2.1. AJAX数据传输格式约定

2.1.1. json传输

2.1.2. 格式约定

2.1.3. AJAX方式

2.1.3.1. $.getJSON

2.1.3.2. $.post

2.1.3.3. $.get

2.1.3.4. $.load

2.2. 组件、base.js完全由前端人员维护

2.3. 业务.js文件由前端人员根据通用模板.js创建,定义好主要的变量及功能块

2.3.1. 业务模板.js

2.4. 后端人员实现业务.js中的业务功能

2.4.1. 删除操作模板

2.4.2. html拼接模板

2.4.3. 分页方法模板

2.4.4. 组件调用模板

2.4.5. 前后端业务界定

2.4.5.1. 图片展示、消息交互、首页动态交互等复杂交互由前后端人员配合完成

2.4.5.2. 常见列表、表单提交、删除等业务处理由后端人员完成

3. momo前端js调整计划

3.1. 目录结构与文件名规范调整

3.2. js文件引用方式优化调整

3.2.1. JS全部置于页面底部

3.2.2. 模板页引用公用JS

3.2.2.1. jquery.lastest.js

3.2.2.2. base.js

3.2.3. 每个页面对应一个业务.js

3.2.3.1. 文件名基本与php页面对应

3.2.3.2. 在js文件内部控制需要引用其它js

3.3. base.js 完善优化

3.3.1. 整理和规范全局公用方法、变量

3.3.1.1. 对现有功能进行整合

3.3.1.2. 添加includeFile方法,用于在js文件内引用其它文件

3.4. 原业务js中冗余方法统一与规范

3.5. 代码评审,检测修复隐含BUG