开发者生计妙技 - 代码范例篇

2024年1月17日 201次阅读来源: 赫子子

团队项目，优越的代码习气异常重要。
以下为本人开辟项目中的代码习气，也许对你有所协助

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
……
```

<div class="sidebar"></div>


<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 */
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://segmentfault.com/a/1190000018020774
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。