前端开发规范
规范目的
命名规范
结构化规范
注释规范
编码规范
CSS 规范
规范目的
为提高团队协作效率
便于后台人员添加功能及前端后期优化维护
输出高质量的文档
命名规范
为了让大家书写可维护的代码，而不是一次性的代码
让团队当中其他人看你的代码能一目了然
甚至一段时间时候后你再看你某个时候写的代码也能看
普通变量命名规范
命名方法 ：驼峰命名法
命名规范 ：
命名必须是跟需求的内容相关的词，比如说我想申明一个变量，用来表示我的学校，那么我们可以这样定义const mySchool = "我的学校";
命名是复数的时候需要加s,比如说我想申明一个数组，表示很多人的名字，那么我们可以这样定义const names = new Array();
常量
命名方法 : 全部大写
命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。
const MAX_COUNT = 10
const URL = 'https://www.baidu.com/'
组件命名规范
官方文档推荐及使用遵循规则：
PascalCase (单词首字母大写命名)是最通用的声明约定
kebab-case (短横线分隔命名) 是最通用的使用约定
组件名应该始终是多个单词的，根组件 App 除外
有意义的名词、简短、具有可读性
命名遵循 PascalCase 约定
公用组件以 Abcd
(公司名缩写简称) 开头，如（AbcdDatePicker,AbcdTable）
页面内部组件以组件模块名简写为开头，Item 为结尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem）
使用遵循 kebab-case 约定
在页面中使用组件需要前后闭合，并以短线分隔，如（<abcd-date-picker></abcd-date-picker>，<abcd-table></abcd-table>）
导入及注册组件时，遵循 PascalCase 约定
同时还需要注意：必须符合自定义元素规范: 切勿使用保留字。
method 方法命名命名规范
驼峰式命名，统一使用动词或者动词+名词形式
//bad
go、nextPage、show、open、login
// good
jumpPage、openCarInfoDialog
请求数据方法，以 data 结尾
//bad
takeData、confirmData、getList、postForm
// good
getListData、postFormData
init、refresh 单词除外
尽量使用常用单词开头（set、get、go、can、has、is）
附：函数方法常用的动词:
get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate废旧,
collect 收集/aggregate 聚集
views 下的文件命名
只有一个文件的情况下不会出现文件夹，而是直接放在 views 目录下面，如Index.vue
尽量是名词,且使用驼峰命名法
开头的单词就是所属模块名字（WorkbenchIndex、WorkbenchList、WorkbenchEdit）
名字至少两个单词（good:
WorkbenchIndex）（bad:Workbench）
props 命名
在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用kebab-case
props: {
'greeting-text':String
}
props: {
greetingText:String
}
例外情况
作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。
循环变量可以简写，比如：i，j，k 等。
结构化规范
目录文件夹及子文件规范
以下统一管理处均对应相应模块
以下全局文件文件均以 index.js 导出，并在main.js 中导入
以下临时文件，在使用后，接口已经有了，发版后清除
vue 文件基本结构
export default{
components :{
},
data () {
return {
}
},
mounted() {
}，
methods: {
}
}
多个特性的元素规范
多个特性的元素应该分多行撰写，每个特性一行。(增强更易读)
src="https://vuejs.org/images/logo.png"
alt="VueLogo"
>
foo="a"
bar="b"
baz="c"
>
元素特性的顺序
原生属性放前面，指令放后面
如下所示：
- class
- id,ref
- name
- data-*
- src, for, type,href,value,max-length,max,min,pattern
- title, alt，placeholder
- aria-*, role
-required,readonly,disabled
- is
- v-for
- key
- v-if
- v-else-if
- v-else
- v-show
- v-cloak
- v-pre
- v-once
- v-model
- v-bind,:
- v-on,@
- v-html
- v-text
组件选项顺序
如下所示：
- components
- props
- data
- computed
- created
- mounted
- metods
- filter
- watch
注释规范
代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明
务必添加注释列表
公共组件使用说明
各组件中重要函数或者类说明
复杂的业务逻辑处理说明
特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述
多重 if 判断语句
注释块必须以/**（至少两个星号）开头**/
单行注释使用//
单行注释
注释单独一行，不要在代码后的同一行内加注释。例如：
bad
var name =”abc”;//姓名
good
//姓名
var name =“abc”;
多行注释
组件使用说明，和调用说明
/**
*组件名称
* @module组件存放位置
* @desc组件描述
* @author组件作者
* @date 2017年12月05日17:22:43
* @param{Object} [title] -参数说明
* @param{String} [columns] -参数说明
* @example调用示例
*
**/
编码规范
优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。尽量按照 ESLint 格式要求编写代码
源码风格
使用 ES6 风格编码
定义变量使用 let
,定义常量使用const
静态字符串一律使用单引号或反引号，动态字符串使用反引号
// bad
const a ='foobar'
const b = 'foo' +a + 'bar'
// acceptable
const c =`foobar`
// good
const a = 'foobar'
const b =`foo${a}bar`
const c ='foobar'
解构赋值
数组成员对变量赋值时，优先使用解构赋值
//数组解构赋值
const arr = [1,2, 3, 4]
// bad
const first =arr[0]
const second =arr[1]
// good
const [first,second] = arr
函数的参数如果是对象的成员，优先使用解构赋值
//对象解构赋值
// bad
functiongetFullName(user) {
const firstName= user.firstName
const lastName= user.lastName
}
// good
functiongetFullName(obj) {
const {firstName, lastName } = obj
}
// best
functiongetFullName({ firstName, lastName }) {}
拷贝数组
使用扩展运算符（...）拷贝数组。
const items = [1,2, 3, 4, 5]
// bad
const itemsCopy =items
// good
const itemsCopy =[...items]
箭头函数
需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了this
// bad
const self =this;
const boundMethod= function(...params) {
returnmethod.apply(self, params);
}
// acceptable
const boundMethod= method.bind(this);
// best
const boundMethod= (...params) => method.apply(this, params);
模块
如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export
default，export default 与普通的 export 不要同时使用
// bad
import * asmyObject from './importModule'
// good
import myObjectfrom './importModule'
如果模块默认输出一个函数，函数名的首字母应该小写。
functionmakeStyleGuide() {
}
export defaultmakeStyleGuide;
如果模块默认输出一个对象，对象名的首字母应该大写。
const StyleGuide= {
es6: {
}
};
export defaultStyleGuide;
指令规范
指令有缩写一律采用缩写形式
// bad
v-bind:class="{'show-left'：true}"
v-on:click="getListData"
// good
:class="{'show-left'：true}"
@click="getListData"
v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一
{{ todo.text}}
{{ todo.text}}
避免 v-if 和 v-for 同时用在一个元素上（性能问题）
以下为两种解决方案：
将数据替换为一个计算属性，让其返回过滤后的列表
{{ user.name}}
{{ user.name}}
computed: {
activeUsers:function () {
return this.users.filter(function(user) {
returnuser.isActive
})
}
}
将 v-if 移动至容器元素上 (比如ul, ol)
{{ user.name}}
{{ user.name}}
Props 规范
Props 定义应该尽量详细
// bad 这样做只有开发原型系统时可以接受
props: ['status']
// good
props: {
status: {
type: String,
required: true,
validator:function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
其他
避免this.$parent
调试信息 console.log() debugger 使用完及时删除
除了三目运算，if,else
等禁止简写
// bad
if (true)
alert(name);
console.log(name);
// bad
if (true)
alert(name);
console.log(name)
// good
if (true) {
alert(name);
}
console.log(name);
CSS 规范
通用规范
统一使用"-"连字符
省略值为 0 时的单位
公用组件,需要有自己的前缀
// bad
padding-bottom:0px;
margin: 0em;
// good
padding-bottom:0;
margin: 0;
如果 CSS 可以做到，就不要使用JS
建议并适当缩写值，提高可读性，特殊情况除外
“建议并适当”是因为缩写总是会包含一系列的值，而有时候我们并不希望设置某一值，反而造成了麻烦，那么这时候你可以不缩写，而是分开写。
当然，在一切可以缩写的情况下，请务必缩写，它最大的好处就是节省了字节，便于维护，并使阅读更加一目了然。
// bad
.box{
border-top-style: none;
font-family:palatino, georgia, serif;
font-size:100%;
line-height:1.6;
padding-bottom:2em;
padding-left:1em;
padding-right:1em;
padding-top: 0;
}
// good
.box{
border-top: 0;
font: 100%/1.6palatino, georgia, serif;
padding: 0 1em2em;
}
声明应该按照下表的顺序
左到右，从上到下
显示属性自身属性文本属性和其他修饰
displaywidthfont
visibilityheighttext-align
positionmargintext-decoration
floatpaddingvertical-align
clearborderwhite-space
list-styleoverflowcolor
topmin-widthbackground
// bad
.box {
font-family:'Arial', sans-serif;
border: 3pxsolid #ddd;
left: 30%;
position:absolute;
text-transform:uppercase;
background-color: #eee;
right: 30%;
isplay: block;
font-size:1.5rem;
overflow:hidden;
padding: 1em;
margin: 1em;
}
// good
.box {
display: block;
position:absolute;
left: 30%;
right: 30%;
overflow:hidden;
margin: 1em;
padding: 1em;
background-color:#eee;
border: 3pxsolid #ddd;
font-family:'Arial', sans-serif;
font-size:1.5rem;
text-transform:uppercase;
}
元素选择器应该避免在 scoped 中出现
官方文档说明：在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。
分类的命名方法
使用单个字母加上"-"为前缀
布局（grid）（.g-）；
模块（module）（.m-）；
元件（unit）（.u-）；
功能（function）（.f-）；
皮肤（skin）（.s-）；
状态（.z-）。
统一语义理解和命名
布局（.g-）
语义命名简写
文档docdoc
头部headhd
主体bodybd
尾部footft
主栏mainmn
主栏子容器maincmnc
侧栏sidesd
侧栏子容器sidecsdc
盒容器wrap/boxwrap/box
模块（.m-）、元件（.u-）
语义命名简写
导航navnav
子导航subnavsnav
面包屑crumbcrm
菜单menumenu
选项卡tabtab
标题区head/titlehd/tt
内容区body/contentbd/ct
列表listlst
表格tabletb
表单formfm
热点hothot
排行toptop
登录loginlog
标志logologo
广告advertisead
搜索searchsch
幻灯slidesld
提示tipstips
帮助helphelp
新闻newsnews
下载downloaddld
注册registreg
投票votevote
版权copyrightcprt
结果resultrst
标题titlett
按钮buttonbtn
输入inputipt
功能（.f-）
语义命名简写
浮动清除clearbothcb
向左浮动floatleftfl
向右浮动floatrightfr
内联块级inlineblockib
文本居中textaligncentertac
文本居右textalignrighttar
文本居左textalignlefttal
垂直居中verticalalignmiddlevam
溢出隐藏overflowhiddenoh
完全消失displaynonedn
字体大小fontsizefs
字体粗细fontweightfw
皮肤（.s-）
语义命名简写
字体颜色fontcolorfc
背景backgroundbg
背景颜色backgroundcolorbgc
背景图片backgroundimagebgi
背景定位backgroundpositionbgp
边框颜色bordercolorbdc
状态（.z-）
语义命名简写
选中selectedsel
当前currentcrt
显示showshow
隐藏hidehide
打开openopen
关闭closeclose
出错errorerr
不可用disableddis
sass 规范
当使用 Sass 的嵌套功能的时候，重要的是有一个明确的嵌套顺序，以下内容是一个 SCSS 块应具有的顺序。
当前选择器的样式属性
父级选择器的伪类选择器(:first-letter, :hover, :active etc)
伪类元素(:before and :after)
父级选择器的声明样式(.selected, .active, .enlarged etc.)
用 Sass 的上下文媒体查询
子选择器作为最后的部分
.product-teaser {
// 1. Styleattributes
display:inline-block;
padding: 1rem;
background-color: whitesmoke;
color: grey;
// 2. Pseudoselectors with parent selector
&:hover {
color: black;
}
// 3. Pseudoelements with parent selector
&:before {
content:"";
display:block;
border-top:1px solid grey;
}
&:after {
content: "";
display:block;
border-top:1px solid grey;
}
// 4. Stateclasses with parent selector
&.active {
background-color: pink;
color: red;
// 4.2.Pseuso selector in state class selector
&:hover {
color:darkred;
}
}
// 5.Contextual media queries
@media screen and (max-width: 640px) {
display:block;
font-size:2em;
}
// 6. Subselectors
> .content> .title {
font-size:1.2em;
// 6.5.Contextual media queries in sub selector
@media screenand (max-width: 640px) {
letter-spacing: 0.2em;
text-transform: uppercase;
}
}
}
特殊规范
对用页面级组件样式，应该是有作用域的
对于公用组件或者全局组件库，我们应该更倾向于选用基于 class 的 BEM 策略
// bad
// good
//good
.c-Button {
border: none;
border-radius:2px;
}
.c-Button--close{
background-color: red;
}
关于git 和svn
1. 需熟用
2. 不确定不能提交,提交有冲突需及时解决
关于typescript
目前项目暂时没有用到,可以部分地方先用起来
其他
1.严格按照设计稿还原;
2.禁止行内样式;(非改不动样式)
3.非必要,不允许用jq,用jq需提前和我方负责人说明;
