资讯专栏INFORMATION COLUMN

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

defcon / 357人阅读

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

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

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

方便后期维护

HOW? 基本准则

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

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

注释必须写

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

注销无用的代码一律删掉

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

HTML

写注释

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


温馨提示

xxx

温馨提示

xxx

标签合理使用


......




标签classid命名语义化

头部: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;
}

......

写注释

某一区块代码的样式写好注释,比如headerfooter列表搜索返回顶部 ...
/* 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)
    }
}

......

结束语
上述内容为我在项目中看见过的代码规范问题以及本人编码习惯的总结,不可能适用每位开发者,但大部分编码风格应该是合大众口味,希望能帮助到大家
唠叨一句
团队合作的一个黄金定则:别人看你的代码就像看自己代码一样,良好的代码习惯 非常重要 非常重要 非常重要

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101404.html

相关文章

  • Android 研发工程师图书一览(2016年版)

    摘要:番茄工作法简约而不简单,本书亦然。在番茄工作法一个个短短的分钟内,你收获的不仅仅是效率,还会有意想不到的成就感。 @author ASCE1885的 Github 简书 微博 CSDN 知乎本文由于潜在的商业目的,不开放全文转载许可,谢谢! showImg(/img/remote/1460000007319503?w=728&h=792); 广而告之时间:我的新书《Android 高...

    MadPecker 评论0 收藏0
  • 大学四年学计算机最值得看的技术书,要读就读最好的书,程序员精品书单!

    摘要:其他语言数据结构跟算法一样是在开始写代码的时候用得很少,都有着包装好的现成东西供你使用,但同样是面试和岗位上升会用得到,我就不说数据结构对代码有多少好处,请记住一句话能够实现个功能和能够最优地实现个功能,是完全不同级别的要求。 ...

    liangzai_cool 评论0 收藏0
  • 一位程序员社畜的2021闲读书单!

    摘要:程序员的思维是严谨倒没错,但有时候却不一定开阔。南京传作为一个新南京人,听听老南京人讲南京故事就挺好,这本书满足了我的这个愿望。顾名思义,就是使用非暴力的方式进行沟通。这种感觉对于当下竞争激烈的程序员们来说真的是非常珍贵了。 ...

    nanfeiyan 评论0 收藏0
  • 如何成为一位「不那么差」的程序员

    摘要:能理解线程模型多线程优缺点以及如何避免。多线程的出现主要是为了提高的利用率任务的执行效率。所以要考虑清楚是否真的需要多线程。这一块的内容可以然我们知道写大牛处理并发的思路,对我们自己编写高质量的多线程程序也有很多帮助。 showImg(https://segmentfault.com/img/remote/1460000015980196?w=2048&h=1363); 前言 已经记不...

    caspar 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<