团队项目,良好的代码习惯非常重要。以下为本人开发项目中的代码习惯,或许对你有所帮助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) } }......
结束语上述内容为我在项目中看见过的代码规范问题以及本人编码习惯的总结,不可能适用每位开发者,但大部分编码风格应该是合大众口味,希望能帮助到大家唠叨一句团队合作的一个黄金定则:别人看你的代码就像看自己代码一样,良好的代码习惯 非常重要 非常重要 非常重要
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/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); 前言 已经记不...
阅读 1294·2021-11-19 11:38
阅读 3520·2021-11-15 11:37
阅读 756·2021-09-30 09:48
阅读 902·2021-09-29 09:46
阅读 865·2021-09-23 11:22
阅读 1842·2019-08-30 15:44
阅读 3348·2019-08-26 13:58
阅读 2355·2019-08-26 13:26