程序员写好看的代码,不亚于写一行好看的字
好看的代码总是让人心旷神怡,
不好,不规范的代码,让人看了只想摇头,
那我们就来学习一下规范的代码怎么写的吧
一、命名规范
(一) 项目命名
- 全部采用小写的方式
- 以中划线分割
正确命名:mall-management-system
(商城管理系统)
错误命名:mall-management-system
或 mallManagementSystem
(二) 目录命名
- 全部采用小写的方式
- 以中划线命名
- 复数时,要采用复数结构
正确命名:sctipts / styles / utils / demo-scripts
(三) JS、CSS、SCSS、HTML、PNG等文件命名
- 全部采用小写的方式
- 以中划线命名
正确命名:render-dom.js / signup.css / index.html / company-logo
(四) 命名严谨性
- 严禁使用 拼音和中文混合的方式
- 严禁使用中文、中文拼音
- 正确使用 英文拼写和语法
- 一些特殊的词语可以采用国际通用的名称
如:河南=henan / 人民币=rmb
正确命名:movie(电影) / employee(员工)
错误命名:dianyin(电影) condition --> condi (×)
二、HTML规范
(一) HTML类型
- 推荐使用 HTML5 的文档类型申明
<!DOCTYPE html>
- 规定的字符编码
<meta charset="UTF-8">
- IE兼容模式
<meta http-equiv="X-UA-Compatible" content="IE-Edge">
(二) 缩进
- 一个tab 使用两个空格
- 嵌套的节点应该缩进
(三) 分块注释
在每一个块级元素,列表元素 和 表格元素中,加上一对HTML注释,注释格式
<!-- 英文 中文 start -->
<!-- 英文 中文 end -->
例如:
<!-- header 头部 start -->
<header>
<div>
<a href=""></a>
</div>
</header>
<!-- header 头部 end -->
(四) 语义化标签
HTML5 有很多语义化标签,优先使用这些语义化标签,避免每一个页面都是 div
或者 p
(五) 引号
**使用双引号" "
**而不是单引号''
三、CSS 规范
(一) 命名
- 类名使用小写字母,以中划线分割
.swiper-image { ... }
- id 使用 驼峰式命名
#header { ... }
- scss中的变量、函数、混合、placeholder采用驼峰命名
- class 的命名不要使用 标签名
如:.p .div
(二) 选择器
尽量使用直接子选择器,否则,有时会造成性能损耗
不推荐:
.content .title { ... }
推荐
.content > .title { ... }
(三) 尽量使用缩写的属性
不推荐:
border-style: solid;
border-width: 1px;
border-color: red;
推荐:
border: 1px solid red;
(四) 每个选择器及属性独占一行
不推荐:
img {
width: 100%;box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}
推荐:
img {
width: 100%;
box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}
(五) 省略 0 后面的单位
border-width: 0;
(六) 避免使用 ID 选择器及 全局标签污染全局样式
能不用 id选择器 就不要 使用id选择器,避免不是禁止
四、LESS 规范
(一) 代码组织
- 将公告less文件放置在
style/less/common
文件夹 - 按以下顺序组织
@import
- 变量声明
- 样式声明
@import 'mixins/size.less'
@default-text-color: #333;
.page {
width: 960px;
margin: 0 auto;
}
(二) 避免嵌套等级过多
将嵌套深度限制在 3 级
不推荐:
.main {
.title {
.name {
color: #fff;
}
}
}
推荐:
.main-title {
.name {
color: #fff;
}
}
五、Javascript规范
(一) 命名
- 采用小写驼峰命名
lowerCameCase
,代码命名均不能以下划线开头,也不能以下划线或美元符号结尾
反例:_name / name_ / name$
- 方法名、参数名、成员变量、局部变量统一采用驼峰命名风格
正确命名:localValue / getHttpMessage()
错误命名:localvalue / gethttpmessage()
- 方法名 必须是 动词 或者 动词+名词 形式
- 增删查改,统一使用如下 5 个单词
add / update / delete / get / detail
附:函数常用方法的动词:
get 获取 / set 设置
add 增加 / remove 删除
create 创建 / destory 移除
start 启动 / stop 停止
open 打开 / close 关闭
read 读取 / write写入
load 载入 / save 保存
begin 开始 / end 结束
backup 备份 / restore 恢复
import 导入 / export 导出
split 分割 / merge 合并
inject 注入 / extract 提取
- 常量全部大写,单词之间用下划线隔开,力求语义表达完整清楚,不要嫌名字长
(二) 代码格式
- 使用两个空格进行缩进
if (x < y) {
x += 10;
} else {
x += 1;
}
- 不同逻辑,不同语义,不同业务之间插入一个空行分隔
(三) 字符串
统一使用单引号''
,不使用双引号""
,这对创建HTML字符串非常有好处
let str = 'foo';
let testDiv = '<div id="test"></div>'
(四) 对象声明
- 使用字面量创建对象
推荐:
let user = {};
不推荐:
let user = new Object();
- 使用字面量来代替对象构建器
推荐:
let user = {
age: 0
}
不推荐:
let user = new Object();
user.age = 0;
(五) 优先使用ES6、ES7、ES8的语法
简化程序,使代码更加灵活和可复用
如:箭头函数、await/async、解构、let、for…of 等
(六) 括号
下列关键词必须有大括号(即使代码只有一行):if / else / for / while / try / catch / finally / with
推荐:
if (isTrue) {
doSomeThing();
}
不推荐
if (isTrue) doSomeThing();
(七) undefined判断
永远不要直接使用undefined
进行变量判断;使用typeof
和字符串 'undefined'
对变量进行判断
推荐:
if (typeof person === 'undefined') {
...
}
不推荐
if (person === undefined) {
...
}
(八) 条件判断和循环最多三层
条件判断能使用 三目运算符 和 逻辑运算符的,就不要使用条件判断。
如果超过三层的 ,抽成函数,并写清楚注释
(九) this的转换命名
对上下文 this
的引用只能使用 self
来命名
let self = this;
(十) 慎用 console.log
对 console.log
会有性能问题,生产环境下请清除console.log