产品开发代码规范建议

目的

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

基本规定

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

HTML规定

  • 写注释
  • 标签合理使用

  • 标签classid命名语义化
头部:class="header"
尾部:footer
导航:nav
侧边栏:sidebar
标签页:tab
菜单:menu
  • 标签属性值使用""包裹,不要使用''

  • 标签属性书写顺序
class 
id 
data-* 
src, type, href, value
title, alt





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

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)
    }
}
  • ‘ID’在变量名中全大写
let goodID;
  • 常量全大写,用下划线连接构造函数,大写第一个字母
let MAX_COUNT = 10;
  • jquery对象必须以’$’开头命名
let $body = $('body');
  • 使用对象方法速记语法
const atom = {
value: 1,
addValue(value) {
    return atom.value + value;
  },
};
const obj = {
  lukeSkywalker,
};
  • 使用模板字符串而不是字符串连接
function sayHi(name) {
     return `How are you, ${name}?`;
}
  • 总是使用 const 或 let 来声明变量。 不这样做会导致产生全局变量。 我们希望避免污染全局命名空间
  • 使用 ===!== 优先于 ==!=

你可能感兴趣的:(产品开发代码规范建议)