團隊項目,良好的代碼習慣非常重要。以下為本人開發項目中的代碼習慣,或許對你有所幫助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) } }......
結束語上述內容為我在項目中看見過的代碼規范問題以及本人編碼習慣的總結,不可能適用每位開發者,但大部分編碼風格應該是合大眾口味,希望能幫助到大家嘮叨一句團隊合作的一個黃金定則:別人看你的代碼就像看自己代碼一樣,良好的代碼習慣 非常重要 非常重要 非常重要
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101404.html
摘要:番茄工作法簡約而不簡單,本書亦然。在番茄工作法一個個短短的分鐘內,你收獲的不僅僅是效率,還會有意想不到的成就感。 @author ASCE1885的 Github 簡書 微博 CSDN 知乎本文由于潛在的商業目的,不開放全文轉載許可,謝謝! showImg(/img/remote/1460000007319503?w=728&h=792); 廣而告之時間:我的新書《Android 高...
摘要:其他語言數據結構跟算法一樣是在開始寫代碼的時候用得很少,都有著包裝好的現成東西供你使用,但同樣是面試和崗位上升會用得到,我就不說數據結構對代碼有多少好處,請記住一句話能夠實現個功能和能夠最優地實現個功能,是完全不同級別的要求。 ...
摘要:程序員的思維是嚴謹倒沒錯,但有時候卻不一定開闊。南京傳作為一個新南京人,聽聽老南京人講南京故事就挺好,這本書滿足了我的這個愿望。顧名思義,就是使用非暴力的方式進行溝通。這種感覺對于當下競爭激烈的程序員們來說真的是非常珍貴了。 ...
摘要:能理解線程模型多線程優缺點以及如何避免。多線程的出現主要是為了提高的利用率任務的執行效率。所以要考慮清楚是否真的需要多線程。這一塊的內容可以然我們知道寫大牛處理并發的思路,對我們自己編寫高質量的多線程程序也有很多幫助。 showImg(https://segmentfault.com/img/remote/1460000015980196?w=2048&h=1363); 前言 已經記不...
閱讀 1406·2021-11-19 11:38
閱讀 3562·2021-11-15 11:37
閱讀 803·2021-09-30 09:48
閱讀 946·2021-09-29 09:46
閱讀 893·2021-09-23 11:22
閱讀 1871·2019-08-30 15:44
閱讀 3389·2019-08-26 13:58
閱讀 2380·2019-08-26 13:26