项目开发规范说明
2018-03-26 10:12
99 查看
前言
目前公司进入了联合开发,不再是以前一个人单枪匹马的闯荡,有team的感觉就是好,但是团队一起,也很烦恼,各种规范、环境、开发工具等等,需要统一才行,俗话说:工欲善其事必先利其器,先说断,后不乱。
应用(项目)命名
文件夹命名最好用一个单词描述
关键词 | 备注 |
---|---|
常用项目命名 | trip(差旅)、ims(通信)、oas(办公)、react、vue、prj(项目)、test(测试)、iview(通信视图)等等 |
二级目录 | build、static、config、src、examples、base、common、issues、assert |
三级目录 | libs、models、plugins、skins、images、css、js |
关键词 | 备注 |
---|---|
color-pick | 颜色选择 |
button-groups | 按钮组 |
date-picker | 日期选择 |
option-grounp | 选择组 |
jquery-select | jquery下拉框 |
jquery-swiper | jquery轮播图 |
关键词 | 备注 |
---|---|
node_models | 项目开发的依赖(libs库) |
gulp-cli | gulp为栗子 |
文件命名
最好用一个单词描述以下变量名可以加css、js、html,例如index.html、index.js、index.css
常用组件命名
关键词 | 备注 |
---|---|
index | |
message | |
menu | |
page | css 类 |
slider | 滑块 |
progress | 进度条 |
tooltip | 提示 |
tree | |
upload | |
time | |
button | |
checkbox | |
dialog | |
cascader | 三级联动 |
常用文件命名
关键词 | 备注 |
---|---|
index | 主要 |
shopping | 购物 |
share | 分享 |
integral | 积分 |
advertisement | 广告 |
pay | 支付 |
community | 社区 |
game | 游戏 |
docs | 文档 |
bussiness | 公司 |
关键词 | 备注 |
---|---|
share-to-friends | 分享给朋友 |
share-to-community | 分享给社区 |
wxpay-pay | 微信支付 |
alipay-pay | 支付宝支付 |
user-integral | 用户积分 |
game-page | 游戏页面 |
docs-page | 文档页面 |
关键词 | 备注 |
---|---|
mobile-advertisement | 移动广告 |
mobile-social | 移动社交 |
mobile-bussiness | 移动电子商务 |
mobile-game | 手机游戏 |
mobile-tv | 手机电视 |
mobile-reading | 移动电子阅读 |
mobile-search | 手机搜索 |
mobile-pay | 移动支付 |
mobile-share | 手机内容共享 |
html布局命名
一般都是根据项目的特性或者市面上大家都统一的方式做。关键词 | 容器 | 备注 |
---|---|---|
外套 | wrap,container | |
标题 | title,subtitle | |
头部 | header,head,nav,sub-nav,menu,sub-menu,branding | |
主要内容 | main,section,article,aside | |
左侧 | main-left,side-bar-left | |
右侧 | main-right,side-bar-right | |
内容 | content,content-item,content-lists,card | |
底部 | footer,partner(合作伙伴),joinu,site-info,copyright,friends |
总结常用的
导航nav,nav-event,nav-style,nav-item,nav-link
内容
title,box,warp,xx-item,item-title,item-link,item-image
底部
footer-time,footer-box,footer-item,copyright,friends-link
js变量命名
全局变量、基础类型和引用数据类型全局变量以下划线开头,例如:
关键词 | 备注 |
---|---|
_list | 列表 |
_approList | 审批列表 |
_userList | 用户列表 |
_stop | 停止 |
_chkUser | 检查用户 |
… |
关键词 | 备注 |
---|---|
字符串 | var count=”“ |
布尔类型 | var status=false |
数字类型 | var total=12 |
引用数据类型
关键词 | 备注 |
---|---|
数组 | var barArr=[], |
对象 | var barObj={}, |
函数 | var submitFn=function(){} |
例如:
var obj = {class: ''} //不好的 var obj = {klass: ''} //一般 var obj = {type: ''} //好的
函数用小驼峰形式(动词+名词),例如:getList()
关键词 | 备注 |
---|---|
sign() | 登录 |
reg() | 注册 |
cancel() | 取消 |
getList() | 获取列表 |
getTotal() | 获取总数 |
keySearch() | 关键字搜索 |
submitForm() | 提交表单 |
clearContent() | 清楚内容 |
uploadImg() | 上传图片 |
//不好的 function user(options) {} var us = new user({}) //好的 function User(options) {} var us = new User({})
尽量不要使用尾随或前导下划线
//不好的 var _variable_ = '' var _variable = '' var variable_ = '' //好的 var variable = ''
我们公司规定了,全局变量使用前导下划线,所以一般根据公司规定来,一般不建议使用前导下划线
在项目中存在jQuery的时候,一般会在变量前面加一一个“$”,来表明这个是jQuery对象,和原生js写的进行区别
var $variable = ”
2.5. css命名
关键词 | 备注 |
---|---|
公共的 | common.css |
其实和common差不多 | base.css |
动画 | animation.css |
皮肤 | skin.css |
文字 | font.css |
主题 | themes.css |
打印样式 | print.css |
颜色 | color.css |
2.5. 图片命名
图片命名分成几类,例如:1、一般的图片可根据分类和表现的内容划分:
normal_loading.jpg/png //默认懒加载时的图片
2、小图标划分:
home_icon.jpg/png //首页图标
tags_icon.jpg/png //标签图标
3、大小划分
goods@200x200.jpg/png //商品图片大小
本公司的前端的应用的目录结构,其实后端的目录结构先差无几
项目命名为 triptrip/ ├─ dist ├─ node_modules ├─ src ├─ .babelrc ├─ .eslintrc ├─ .project ├─ manifest.json ├─ gulpfile.js ├─ webpack.config.js ├─ package.json ├─ package-lock.json └─ xtend@4.0.1
2.6. 开发工具
推荐使用:VSCode- VSCode下载地址
- 访问密码:6PphIw
相关文章推荐
- MT6573台开发分支下配置多个项目的规范说明_mi
- MTK MT65XX平台开发分支下配置多个项目的规范说明
- Maven2使用项目开发规范说明
- (一)项目说明及程序框架说明——.NET开发完整案例(企业邮箱系统)
- XXX P2P堡垒机项目帐号集中管理、定制开发说明
- 规范在项目开发中的重要性
- 自动化测试流程分析(转载自网络:HYHOLINE的《自动化测试项目开发流程说明》一文)
- 【项目开发规范(Java)】
- JavaEE项目开发--基础篇-1--JavaEE开发之SSH+maven开发规范小结(规范就是标准,不容小视)
- Java项目开发规范之方法命名规范
- web项目开发 之 前端规范 --- JavaScript编码规范
- JavaWeb物流管理项目开发(JSP、Servlet、JDBC):4、明确规范
- cocos2d-x 某项目的开发规范
- 分享.NET ERP项目开发中应用到的重量级工具 选择合适的工具和资源,做项目效率高而且规范程度高
- 如何使用SSH框架开发实际项目-开发规范
- 团队项目开发"编码规范"之二:代码外观
- 项目开发规范
- Android项目实战(二十六):蓝牙连接硬件设备开发规范流程
- 软件开发项目计划书编写说明