還在寫那些讓人頭皮發麻的程式碼嗎？

Yosi發表於2019-02-13

團隊專案，良好的程式碼習慣非常重要。以下為本人開發專案中的程式碼習慣，或許對你有所幫助

WHY?

團隊專案不是一個人在寫程式碼，自己寫程式碼爽了，也要讓別人看著清晰
減少bug處理，方便bug查詢解決，提高開發效率，減少不必要的精力消耗
方便後期維護

HOW?

基本準則

程式碼縮排嚴格統一，要麼都是2空格，要麼都是4空格，禁止一切空格交叉使用導致程式碼不對齊，看著頭痛的情況出現
禁止程式碼斷層（完整程式碼塊內出現多餘的空行）
註釋必須寫
非工程化專案中css禁止在html程式碼中書寫
登出無用的程式碼一律刪掉
便於開發的程式碼，例如console.log()或alert()在開發完成後一律刪掉

HTML

寫註釋

如果程式碼量少還看的清楚，但是程式碼量多了，看大量沒有註釋的程式碼就沒那麼輕鬆，所以註釋要寫上

<!-- yes -->
<!-- 下一步 -->
<div class="btn-group df-jcc">
  <button class="next-step cp">下一步</button>
  <button class="submit cp">提交</button>
  <button class="exit cp">退出</button>
</div>

<!-- 提示 -->
<div class="prompt-layer">
  <div class="title df-aic df-jcc">
    <h3>溫馨提示</h3>
  </div>
  <div class="prompt-content">
    <img src="xxx.png" alt="xxx">
    <p class="ac"></p>
  </div>
</div>


<!-- no -->
<div class="btn-group df-jcc">
  <button class="next-step cp">下一步</button>
  <button class="submit cp">提交</button>
  <button class="exit cp">退出</button>
</div>
<div class="prompt-layer">
  <div class="title df-aic df-jcc">
    <h3>溫馨提示</h3>
  </div>
  <div class="prompt-content">
    <img src="xxx.png" alt="xxx">
    <p class="ac"></p>
  </div>
</div>
複製程式碼

標籤合理使用

<!-- 頭部 -->
<header></header>
<!-- 主內容 -->
<main></main>
<!-- 尾部 -->
<footer></footer>
<!-- 按鈕 -->
<button></button>
<!-- 導航 -->
<nav></nav>
<!-- 標題 h1-h6 -->
<h3></h3>

......
複製程式碼

<!-- yes -->
<button class="btn"></button>

<!-- no -->
<div class="btn"></div>
複製程式碼

標籤class或id命名語義化

頭部：class="header"

尾部：footer

導航：nav

側邊欄：sidebar

標籤頁：tab

選單：menu

......

<!-- yes -->
<div class="sidebar"></div>

<!-- no -->
<div class="left"></div>
複製程式碼

標籤屬性值使用""包裹，不要使用''

<!-- 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>
複製程式碼

禁止程式碼斷層，出現多餘的空行造成程式碼可讀性很差

<!-- yes -->
<div class="point-type df bg-white mb-20 p-20-30 border-e5">
  <div class="text-title">
    <h3></h3>
  </div>
  <nav class="flex-1">
    <ul class="clearfix"></ul>
  </nav>
</div>

<!-- very poor -->
<div class="point-type df bg-white mb-20 p-20-30 border-e5">

  <div class="text-title">
  
    <h3></h3>
  </div>
  
  <nav class="flex-1">
    <ul class="clearfix"></ul>
    
  </nav>
</div>
複製程式碼

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<len;i++){
    // do
}
......
複製程式碼

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<len;i++){
    // do
}
switch(dataSort){
    // do
}
const fn=username=>{
    // 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 */
/**
 * fetch請求封裝
 */
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)
    }
}
複製程式碼

......

結束語

上述內容為我在專案中遇到過的程式碼規範問題以及本人編碼習慣的部分總結，不可能適用每位開發者，但大部分編碼風格應該是合大眾口味，希望能幫助到大家

嘮叨一句

團隊合作的一個黃金定則：別人看你的程式碼就像看自己程式碼一樣，良好的程式碼習慣 非常重要非常重要非常重要

[Vue進階]為什麼我的程式碼讓別人看起來頭皮發麻？
2018-11-04
Vue
外媒雙重爆料：諾基亞新機可能真有讓人頭皮發麻的「後置五攝」
2019-01-03
讓人疑惑的Java程式碼 – Java那些事兒
2019-03-02
Java
講道理，僅3行核心css程式碼的rate評分元件，我被自己秀到頭皮發麻?‍♂️
2019-08-19
CSS元件
你還在手寫TS型別程式碼嗎
2022-02-21
型別
兄弟們還在繼續寫php嗎？
2023-03-21
PHP
老外也大喊We need English？這國產遊戲秀得我頭皮發麻
2020-09-24
遊戲
還在使用 if else 寫程式碼？試試 “策略模式” 吧！
2020-05-08
模式
一段讓人瑟瑟發抖的ABAP程式碼
2019-11-05
MySQL 創始人：寫程式碼比打遊戲還爽！
2018-10-14
MySql遊戲
如果讓你手寫個棧和佇列，你還會寫嗎？
2020-09-16
佇列
程式設計師可以自己寫測試？還需要測試人員嗎？
2019-06-20
程式設計師
【隨便寫寫】存一下皮膚程式碼
2024-03-25
個人收款碼限額？商家的收款碼還能用嗎
2022-05-12
你還在發愁小程式自定義導航欄嗎？
2019-03-03
「IT運維迷宮」那些讓人頭疼的常見問題與破局之道
2024-04-30
運維
低程式碼/無程式碼的SaaS/CRM還有未來嗎？
2021-05-09
既然測試也要求寫程式碼，那乾脆讓開發兼任測試不就好了嗎？
2024-06-11
開發人員應該害怕低程式碼嗎？
2021-05-31
Github Copilot機器人寫的程式碼引發糾紛
2021-07-08
Github機器人
淺談那些年讓運維掉了大把頭髮的併發統計
2018-08-06
運維
快刀斬亂麻，DevOps讓程式碼評審也自動起來
2024-04-23
dev
Rust能讓我寫出好的程式碼 - Reddit
2022-10-26
Rust
還在拼冗長的WhereIf嗎？100行程式碼解放這個操作
2024-06-11
行程
binlog真的是銀彈嗎？有些時候也讓人頭疼
2021-12-07
你還在這樣寫SQL嗎？趕緊改改吧
2020-12-19
SQL
不寫情書，程式設計師還要學寫作嗎？
2020-04-05
程式設計師
寫了 20-50 年的程式碼，才明白的那些真理
2018-12-05
讓人頭疼的BCProxy許可權
2020-04-04
雲開發中的戰鬥機 Laf，讓你像寫部落格一樣寫程式碼
2022-06-02
那些年讓我們頭疼的CSS3動畫
2019-03-19
CSSS3動畫
現在還有必要學Java開發嗎？前景好嗎？
2021-11-29
Java
程式碼都寫不完，還寫個錘子註釋！
2021-10-21
Apple開發_Xcode內還有幫助程式碼自動排版的工具嗎？
2024-07-05
APPXCode
七個不一樣的Python程式碼寫法，讓你寫出一手漂亮的程式碼
2018-09-05
Python
想讓你的程式碼變得更加優雅嗎？
2021-01-17
有些js庫習慣在程式碼開頭處新增分號有什麼作用呢？除了分號還可以換成別的嗎？
2024-11-27
JS
如何寫出讓同事無法維護的程式碼？
2022-12-05

還在寫那些讓人頭皮發麻的程式碼嗎？

WHY?

HOW?

基本準則

HTML

CSS

JavaScript

結束語

嘮叨一句

相關文章