團(tuán)隊(duì)項(xiàng)目，良好的代碼習(xí)慣非常重要。以下為本人開發(fā)項(xiàng)目中的代碼習(xí)慣，或許對(duì)你有所幫助

團(tuán)隊(duì)項(xiàng)目不是一個(gè)人在寫代碼，自己寫代碼爽了，也要讓別人看著清晰

減少bug處理，方便bug查找解決，提高開發(fā)效率，減少不必要的精力消耗

方便后期維護(hù)

代碼縮進(jìn)嚴(yán)格統(tǒng)一，要么都是2空格，要么都是4空格，禁止一切空格交叉使用導(dǎo)致代碼不對(duì)齊，看著頭痛的情況出現(xiàn)

禁止代碼斷層（完整代碼塊內(nèi)出現(xiàn)多余的空行）

注釋必須寫

非工程化項(xiàng)目中css禁止在html代碼中書寫

注銷無用的代碼一律刪掉

便于開發(fā)的代碼，例如console.log()或alert()在開發(fā)完成后一律刪掉

寫注釋

如果代碼量少還看的清楚，但是代碼量多了，看大量沒有注釋的代碼就沒那么輕松，所以注釋要寫上

  下一步
  提交
  退出




  

    
溫馨提示
  
  

    
    

  





  下一步
  提交
  退出


  

    
溫馨提示
  
  

    
    

  

標(biāo)簽合理使用

......

標(biāo)簽class或id命名語義化

頭部：class="header"
尾部：footer
導(dǎo)航：nav
側(cè)邊欄：sidebar
標(biāo)簽頁：tab
菜單：menu
......

標(biāo)簽屬性值使用""包裹，不要使用""

標(biāo)簽屬性書寫順序

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

禁止代碼斷層，出現(xiàn)多余的空行造成代碼可讀性很差

項(xiàng)目初始化樣式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; }/*公共類*/

項(xiàng)目自定義公用樣式統(tǒng)一放在某一指定css中（根據(jù)自身習(xí)慣決定，以下是我編寫css習(xí)慣）

將一些經(jīng)常使用到的樣式統(tǒng)一放到public.css文件中，避免重復(fù)書寫

/* 
 * 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;
}

......

其他公用樣式統(tǒng)一放到base.css中

/* 
 * base.css
 * 凡是多個(gè)頁面會(huì)同時(shí)使用到的樣式全部放入該文件中 
 */
 
body {
    background-color: #f9f9fb;
}
.container {
    width: 1280px;
    margin: auto;
    padding: 0 15px;
}

/* 頭部 */
header {}

/* 主內(nèi)容 */
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;
}

......

寫注釋

某一區(qū)塊代碼的樣式寫好注釋，比如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...

文本內(nèi)容顏色，大小
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寫法

/* 只有一個(gè)值的情況 */
.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選擇器兩邊各保留一個(gè)空格

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

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

寫注釋

整功能模塊注釋

/**
 *   列表篩選
 *   @param {Array} xxxxx              保存所選省份
 *   @param {String} xxxxxxxxxx        保存所選年代
 *   @method xxxx                      保存所選部分，用于篩選
 *   @method xxxx                      刪除篩選中所選條件
 *   ......
 */

整功能模塊內(nèi)部小功能代碼注釋也需要寫

// 列表分頁
xxxx

// 重置篩選條件
xxxx

駝峰命名

/* yes */
let searchVal = "";
function getUserInfo() {}

/* no */
let searchval = "";
function getuserinfo() {}
......

加空格讓代碼更優(yōu)雅

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

/* 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
}
......


對(duì)象 : 右邊加上一個(gè)空格
/* 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 請(qǐng)求
    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 請(qǐng)求
    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)
    }
}


簡(jiǎn)潔清晰

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

結(jié)構(gòu)賦值
/* yes */
this.state = {
    name: "xxx",
    age: "xxx"
}
const { name, age } = this.state;

/* no */
const name = this.state.name;
const age = this.state.age;


屬性名屬性值相同簡(jiǎn)寫
/* yes */
components: {
    Header,
    Footer
}

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


函數(shù)
/* yes */
methods: {
    delItem(index) {
        this.$emit("delItem", index)
    }
}

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




結(jié)束語
上述內(nèi)容為我在項(xiàng)目中看見過的代碼規(guī)范問題以及本人編碼習(xí)慣的總結(jié)，不可能適用每位開發(fā)者，但大部分編碼風(fēng)格應(yīng)該是合大眾口味，希望能幫助到大家
嘮叨一句
團(tuán)隊(duì)合作的一個(gè)黃金定則：別人看你的代碼就像看自己代碼一樣，良好的代碼習(xí)慣 非常重要 非常重要 非常重要