产品开发代码规范建议

目的

• 团队项目不是一个人在写代码，自己写代码爽了，也要让别人看着清晰
• 减少bug处理，方便bug查找解决，提高开发效率，减少不必要的精力消耗
• 方便后期维护

基本规定

• 代码缩进严格统一，建议都是2空格，或者都是4空格，禁止一切空格交叉使用导致代码不对齐，看着头痛的情况出现
• 禁止代码断层（完整代码块内出现多余的空行）
• 重要功能的注释必须写
• 禁止直接将css禁止在html代码中书写
• 注销无用的代码一律删掉
• 便于开发的代码，例如console.log()或alert()在开发完成后一律删掉

HTML规定

• 写注释
• 标签合理使用

<!-- 头部 -->
<header></header>
<!-- 主内容 -->
<main></main>
<!-- 尾部 -->
<footer></footer>
<!-- 按钮 -->
<button></button>
<!-- 导航 -->
<nav></nav>
<!-- 标题 h1-h6 -->
<h3></h3>

• 标签class或id命名语义化

头部：class="header"
尾部：footer
导航：nav
侧边栏：sidebar
标签页：tab
菜单：menu

• 标签属性值使用""包裹，不要使用''

<!-- yes -->
<footer class="footer"></footer>

<!-- no -->
<footer class='footer'></footer>

• 标签属性书写顺序

class 
id 
data-* 
src, type, href, value
title, alt

<!-- yes -->
<a class="" id="" data-val="" href=""></a>

<!-- no -->
<a id="" href="" class="" data-val=""></a>

• 禁止代码断层，出现多余的空行造成代码可读性很差

CSS规定

• 项目初始化样式reset.css

*{-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0;}
body { color:rgba(51,51,51,0.8); font-size:14px; font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration: none; }
img { border:none; vertical-align: middle}
ol,ul,li { list-style:none; }
i{font-style: normal;}
input, textarea, select, button { font:14px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;}
input,button{border: none; outline: none;}
input[type=checkbox], input[type=radio]{margin: 0;}
table { border-collapse:collapse; }
html {overflow-y: scroll;}
p{margin: 0;}
.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }/*公共类*/

• 项目自定义公用样式统一放在某一指定css中
  将一些经常使用到的样式统一放到public.css文件中，避免重复书写

/* 
 * public.css
 */
 
.fl {
    float: left;
}
.fr {
    float: right;
}
.ac {
    text-align: center;
}
.ar {
    text-align: right;
}
.df {
    display: -webkit-flex;
    display: flex;
}
.df-aic {
    display: -webkit-flex;
    display: flex;
    align-items: center;
}
.df-jcc {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}
.flex-1 {
    flex: 1;
}
.bs {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.cp {
    cursor: pointer;
}
.bg-white {
    background-color: #fff;
}
.w100 {
    width: 100%;
}
.h100 {
    height: 100%;
}
.mb-20 {
    margin-bottom: 20px;
}

• 写注释
• css书写顺序
  文本位置样式
  float，position，left，top，display，z-index...
  文本宽高，边距
  width，height，padding，margin...
  文本内容颜色，大小
  color，line-height，font-size，text-align...
  文本背景，边框
  background，border...
  其他
  border-radius，transform，transiton...

nav ul li {
    float: left;
    width: 90px;
    height: 32px;
    margin: 10px;
    padding: 0 20px 0 10px;
    font-size: 18px;
    text-align: right;
    border: 1px solid #eee;
    border-radius: 4px;
}

• css选择器两边各保留一个空格

label + input {
    margin-left: 10px;
}
nav > ul > li {
    margin-left: 10px;
}

JavaScript规定

• 写注释

整功能模块注释
/**
 *   列表筛选
 *   @param {Array} xxxxx              保存所选省份
 *   @param {String} xxxxxxxxxx        保存所选年代
 *   @method xxxx                      保存所选部分，用于筛选
 *   @method xxxx                      删除筛选中所选条件
 *   ......
 */
整功能模块内部小功能代码注释也需要写
// 列表分页
xxxx
// 重置筛选条件
xxxx

• 驼峰命名

let searchVal = '';
function getUserInfo() {}

• 加空格让代码更优雅

const name = 'yuci';
const userArr = ['a', 'b', 'c'];
if (i === 0) {
    // do
}
for (let i = 0, len = arr.length; i < len; i++) {
    // do
}

if (i === 0) {
    // do
} else {
    // do
}
try {
    // do
} catch {
    // do
}
switch (dataSort) {
    // do
}
for (let i = 0, len = arr.length; i < len; i++) {
    // do
}
const fn = username => {
    // do
}
function fn() {
    // do
}

const user = {
    name: 'xxx',
    age: 'xxx'
}
this.state = {
      username: ''
}
this.setState({
      username: 'yucihent'
})

• 禁止代码断层（可读性非常差）
• 一行代码不要过多
• 简洁清晰

结构赋值
this.state = {
    name: 'xxx',
    age: 'xxx'
}
const { name, age } = this.state;

属性名属性值相同简写
components: {
    Header,
    Footer
}

函数
methods: {
    delItem(index) {
        this.$emit('delItem', index)
    }
}