前言
目前公司进入了联合开发,不再是以前一个人单枪匹马的闯荡,有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 |
- 如果一个单词描述不了,用2个词(名词加动词),常用于二级、三级目录
关键词 | 备注 |
---|---|
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 | 公司 |
- 如果一个单词描述不了,用2个词(名词加动词)
关键词 | 备注 |
---|---|
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
扫描二维码关注公众号,回复: 2512461 查看本文章底部
footer-time,footer-box,footer-item,copyright,friends-link
js变量命名
- 全局变量、基础类型和引用数据类型
全局变量以下划线开头,例如:
关键词 | 备注 |
---|---|
_list | 列表 |
_approList | 审批列表 |
_userList | 用户列表 |
_stop | 停止 |
_chkUser | 检查用户 |
… |
- 基础类型
关键词 | 备注 |
---|---|
字符串 | var count=”“ |
布尔类型 | var status=false |
数字类型 | var total=12 |
在js里面如果,不确定的类型也可以用null,因为js会隐式转换
- 引用数据类型
关键词 | 备注 |
---|---|
数组 | var barArr=[], |
对象 | var barObj={}, |
函数 | var submitFn=function(){} |
ps:尽量不要用语言保留的关键字命名,例如:default、class、improt、export、module等等,用可读的同义词代替。
例如:
var obj = {class: ''} //不好的
var obj = {klass: ''} //一般
var obj = {type: ''} //好的
- 函数用小驼峰形式(动词+名词),例如:getList()
关键词 | 备注 |
---|---|
sign() | 登录 |
reg() | 注册 |
cancel() | 取消 |
getList() | 获取列表 |
getTotal() | 获取总数 |
keySearch() | 关键字搜索 |
submitForm() | 提交表单 |
clearContent() | 清楚内容 |
uploadImg() | 上传图片 |
- 构造函数和类使用大驼峰(动词+名词),例如:UserList()
//不好的
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、大小划分
[email protected]/png //商品图片大小
本公司的前端的应用的目录结构,其实后端的目录结构先差无几
- 项目命名为 trip
trip/
├─ 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