开发者生存技能 - 代码规范篇

阅读量：6248 次

发布时间：2019-06-22

本文共 8989 字，大约阅读时间需要 29 分钟。

团队项目，良好的代码习惯非常重要。
以下为本人开发项目中的代码习惯，或许对你有所帮助

WHY?

团队项目不是一个人在写代码，自己写代码爽了，也要让别人看着清晰

减少bug处理，方便bug查找解决，提高开发效率，减少不必要的精力消耗

方便后期维护

HOW?

基本准则

代码缩进严格统一，要么都是2空格，要么都是4空格，禁止一切空格交叉使用导致代码不对齐，看着头痛的情况出现

禁止代码断层（完整代码块内出现多余的空行）

注释必须写

非工程化项目中css禁止在html代码中书写

注销无用的代码一律删掉

便于开发的代码，例如console.log()或alert()在开发完成后一律删掉

HTML

写注释

如果代码量少还看的清楚，但是代码量多了，看大量没有注释的代码就没那么轻松，所以注释要写上

标签合理使用

标签class或id命名语义化

头部：
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中（根据自身习惯决定，以下是我编写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;}......

其他公用样式统一放到base.css中

/*  * base.css * 凡是多个页面会同时使用到的样式全部放入该文件中  */ body {    background-color: #f9f9fb;}.container {    width: 1280px;    margin: auto;    padding: 0 15px;}/* 头部 */header {}/* 主内容 */main {}/* 尾部 */footer {}/* 搜索 */.search {}/* checkbox */input[type="checkbox"] {    width: 20px;    height: 20px;    -webkit-appearance:none;    background: url("xxx.png") no-repeat center;}input[type="checkbox"]:checked {     background: url("xxx.png") no-repeat center;}......

写注释

某一区块代码的样式写好注释，比如
header，
footer，
列表，
搜索，
返回顶部 ...

/* yes *//* header */header {}/* footer */footer {}/* 返回顶部 */.go-top {}/* no */header {}footer {}.go-top {}

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...

/* yes */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;}/* no */nav ul li {    margin: 10px;    text-align: right;    border: 1px solid #eee;    width: 90px;    height: 32px;    padding: 0 20px 0 10px;    float: left;    font-size: 18px;    border-radius: 4px;}

padding margin写法

/* 只有一个值的情况 */.title {     margin-left: 10px;}/* 多值情况 *//* yes */.title {    margin: 0 20px 10px;}/* no */.title {    margin-top: 0;    margin-right: 20px;    margin-left: 20px;    margin-bottom: 10px;}

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

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

JavaScript

写注释

整功能模块注释

/** *   列表筛选 *   @param {Array} xxxxx              保存所选省份 *   @param {String} xxxxxxxxxx        保存所选年代 *   @method xxxx                      保存所选部分，用于筛选 *   @method xxxx                      删除筛选中所选条件 *   ...... */

整功能模块内部小功能代码注释也需要写

// 列表分页xxxx// 重置筛选条件xxxx

驼峰命名

/* yes */let searchVal = '';function getUserInfo() {}/* no */let searchval = '';function getuserinfo() {}......

加空格让代码更优雅

= == === > < % + * / , ...

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

if else for while switch try catch function ...

/* yes */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}/* no */if(i===0){    // do}else{    // do}for(let i=0,len=arr.length;i
        
         {    // do}function fn(){    // do}......

对象 : 右边加上一个空格

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

禁止代码断层（可读性非常差）

/* yes */let fetchData = async (url, method, data) => {    let options;    let dataStr = '';    const headers = {      'Accept': 'application/json',      'Content-Type': 'application/x-www-form-urlencoded'    };    // get 请求    if (method === 'get') {        if (typeof data === 'object') {            Object.keys(data).forEach(key => {                dataStr += `${key}=${data[key]}&`            });            if (dataStr) {                dataStr = dataStr.substring(0, dataStr.length - 1)            };            url = `${url}?${dataStr}`;        }        options = {            method: 'GET',            headers,        }    } else {        let formData = new FormData();        for (let key in data) {            formData.append(key, data[key])        }        options = {            method: 'POST',            body: formData        }    }    let response = await fetch(url, options);    let res = await response.json();    return res;}/* very poor very poor very poor */let fetchData = async (url, method, data) => {    let options;    let dataStr = '';    const headers = {      'Accept': 'application/json',      'Content-Type': 'application/x-www-form-urlencoded'    };    // get 请求    if (method === 'get') {        if (typeof data === 'object') {            Object.keys(data).forEach(key => {                dataStr += `${key}=${data[key]}&`            });                        if (dataStr) {                dataStr = dataStr.substring(0, dataStr.length - 1)                            };            url = `${url}?${dataStr}`;        }        options = {            method: 'GET',            headers,        }    } else {        let formData = new FormData();                for (let key in data) {            formData.append(key, data[key])                    }        options = {            method: 'POST',            body: formData        }    }        let response = await fetch(url, options);    let res = await response.json();    return res;}

一行代码不要过多

/* yes */import {    List,    InputItem,    WingBlank,    WhiteSpace,    Button,    Radio,    Toast} from 'antd-mobile'/* no */import { List, InputItem, WingBlank, WhiteSpace, Button, Radio, Toast } from 'antd-mobile'

使用''，而非""

/* yes */import HelloWorld from './components/HelloWorld'methods: {    delItem(index) {        this.$emit('delItem', index)    }}/* no */import HelloWorld from "./components/HelloWorld"methods: {    delItem(index) {        this.$emit("delItem", index)    }}

简洁清晰

模板字符串替代 ++ 字符串拼接

结构赋值

/* yes */this.state = {    name: 'xxx',    age: 'xxx'}const { name, age } = this.state;/* no */const name = this.state.name;const age = this.state.age;

属性名属性值相同简写

/* yes */components: {    Header,    Footer}/* no */components: {    Header: Header,    Footer: Footer}

函数

/* yes */methods: {    delItem(index) {        this.$emit('delItem', index)    }}/* no */methods: {    delItem: function(index) {        this.$emit('delItem', index)    }}

......