内容简介：团队项目，良好的代码习惯非常重要。如果代码量少还看的清楚，但是代码量多了，看大量没有注释的代码就没那么轻松，所以注释要写上头部：
团队项目，良好的代码习惯非常重要。 以下为本人开发项目中的代码习惯，或许对你有所帮助
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 } ...... 复制代码 -
ifelseforwhileswitchtrycatchfunction.../* 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) } } 复制代码......
结束语
上述内容为我在项目中遇到过的代码规范问题以及本人编码习惯的部分总结，不可能适用每位开发者，但大部分编码风格应该是合大众口味，希望能帮助到大家
唠叨一句
团队合作的一个黄金定则： 别人看你的代码就像看自己代码一样 ，良好的代码习惯 非常重要 非常重要 非常重要
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
