项目开发规范说明

前言

目前公司进入了联合开发，不再是以前一个人单枪匹马的闯荡，有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

• 底部

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、大小划分

goods@200x200.jpg/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