程序是写给人读的,只是偶尔让计算机执行一下 -- Donald Knuth
以下代码风格仅供参考,没有明确规定那种书写方式好,那种书写方式一定就不好,代码风格的统一,目的就是提高代码的可读性。
一、HTML
1、基本原则
-
html
(结构)、css
(样式)、js
(样式)分离 - 标签具有语义化
-
2个空格字符为一个缩进层级,设置敲入
Tab
键时插入2个空格 -
标签名使用一律小写字母,
vue
组件名必须使用小写 -
标签需闭合,自闭合(
self-closing
)标签,无需闭合 ( 例如:img
input
br
hr
等 ); -
不要使用
id
选择器,class
命名多个单词采用中划线-
连接 -
属性按照特定的顺序出现保证易读性,
id
、class
、name
、src
、for
、type
、href
、title
和alt
- 禁止行内元素嵌套块级元素
-
<!--放注释内容-->
独占一行
2、class 命名规则
- 不能出现中文
- 以字母开头,不能使用其他格式开头
- 以名见义 命名需要有规范,有含义、可以快速的理解这个标签的具体意义
很早以前收藏的表格,具体出处自己记不清了,如有侵权,可与本人联系,谢谢
命名 | 说明 |
---|---|
.wrapper | 页面外围控制整体布局宽度 |
.container或.content | 容器,用于最外层 |
.layout | 布局 |
.head, .header | 页头部分 |
.foot, .footer | 页脚部分 |
.nav | 主导航 |
.subnav | 二级导航 |
.menu | 菜单 |
.submenu | 子菜单 |
.sideBar | 侧栏 |
.sidebar_a, .sidebar_b | 左边栏或右边栏 |
.main | 页面主体 |
.tag | 标签 |
.msg .message | 提示信息 |
.tips | 小技巧 |
.vote | 投票 |
.friendlink | 友情连接 |
.title | 标题 |
.summary | 摘要 |
.loginbar | 登录条 |
.searchInput | 搜索输入框 |
.hot | 热门热点 |
.search | 搜索 |
.searchBar | 搜索条 |
.search_results | 搜索结果 |
.copyright | 版权信息 |
.branding | 商标 |
.logo | 网站LOGO标志 |
.siteinfo | 网站信息 |
.siteinfoLegal | 法律声明 |
.siteinfoCredits | 信誉 |
.joinus | 加入我们 |
.partner | 合作伙伴 |
.service | 服务 |
.regsiter | 注册 |
arr/arrow | 箭头 |
.guild | 指南 |
.sitemap | 网站地图 |
.list | 列表 |
.homepage | 首页 |
.subpage | 二级页面子页面 |
.tool, .toolbar | 工具条 |
.drop | 下拉 |
.dorpmenu | 下拉菜单 |
.status | 状态 |
.scroll | 滚动 |
.tab | 标签页 |
.left .right .center | 居左、中、右 |
.news | 新闻 |
.download | 下载 |
.banner | 广告条(顶部广告条) |
二、CSS
1、基本规则
- 使用 2 个空格作为缩进
-
不要使用
id
选择器,class
命名多个单词采用中划线-
连接 -
在左大括号
{
前加上一个空格, 右大括号}
独占一行 -
在属性的冒号
:
后面加上一个空格,前面不加空格
2、注释
-
建议使用行注释 (在
Sass
中是//
) 代替块注释。 - 建议注释独占一行。避免行末注释。
3、边框
在定义无边框样式时,使用
0
代替
none
// bad
.nav {
border: none;
}
// good
.nav {
border: 0;
}
复制代码
4、Sass
-
使用
.scss
的语法,不使用.sass
原本的语法。 -
变量名使用驼峰命名
$borderLine
三、JavaScript
1、基本格式化
1.1 缩进层级
2个空格字符为一个缩进层级,设置敲入
Tab
键时插入2个空格
1.2 语句结尾
语句结尾使用分号
1.3 行的长度
单行代码长度不超过80个字符
vscode配置如下:
{
"editor.wordWrap": "wordWrapColumn",
"editor.wordWrapColumn": 80
}
复制代码
1.4 换行
当一行长度达到了单行最大字符数限制时,就需要手动将一行拆成两行。通常我们会在运算符后换行,下一行会增加两个层级的缩进。
1.5 命名
命名长度应尽可能短,并抓住重点,尽量在变量名中体现出值的数据类型。比如,命名
count
、
length
和
size
表明数据类型是数字,而命名
name
、
title
和
message
表明数据类型是字符串。但用单个字符命名的变量诸如i、j、和k通常在循环中使用。使用这些能够体现出数据类型的命名,可以让你的代码容易被别人和自己读懂。
不要使用下划线
_
结尾或开头来命名属性和方法。
1.5.1 变量和函数
变量:遵守驼峰大小写命名法,并且命名前缀应当是名词。
let count = 0;
let myName = 'sheng';
let visible = true;
复制代码
函数:遵守驼峰大小写命名法,并且命名前缀应当是动词。
function getName() {};
function setName() {};
复制代码
使用动词常见约定
动词 | 含义 |
---|---|
can | 函数返回一个布尔值 |
has | 函数返回一个布尔值 |
is | 函数返回一个布尔值 |
get | 函数返回一个非布尔值 |
set | 函数用来保存一个值 |
1.5.2 常量
常量: 必须使用
const
定义常量
const count = 10;
const url = 'http://baidu.com';
复制代码
1.5.3 函数
-
在控制语句(
if
、while
等)的小括号前放一个空格。在函数调用及声明中,不在函数的参数列表前加空格。
// bad
function getName () {
return userName;
}
// good
function getName() {
return userName;
}
复制代码
- 别保存 this 的引用。使用箭头函数或 Function#bind。
// bad
function getName() {
const self = this;
return function() {
console.log(self);
}
}
// bad
function getName() {
const that = this;
return function() {
console.log(that);
};
}
// good
function getName() {
return () => {
console.log(this);
};
}
复制代码
1.5.3 构造函数
在
JavaScript
中,构造函数只不过是前面冠以new运算符的函数,用来创建对象
构造函数:遵照大驼峰命名法(Pascal Case)
function Person(name) {
this.name = name
}
复制代码
2、注释
2.1 单行注释
- 缩进层级与下一行代码保持一致
- 双斜杠后敲入一个空格, 保持注释文本有一定的偏移
- 在代码行的尾部注释,代码结束到注释之间有一个缩进,超过单行最大字符限制,应移动当前代码行的上方。
// bad
//这是一个Person构造函数
function Person(name) {
this.name = name
}
// good
// 这是一个Person构造函数
function Person(name) {
this.name = name
}
// bad
const MAX_COUNT = 10; //这是一个常量
// good
const MAX_COUNT = 10; // 这是一个常量
复制代码
2.2 多行注释
// bad 注释之前无空格
if (condition) {
/**
* 如果代码执行到这里
* 说明判断条件成立,可以执行下面程序
*/
console.log('Hello world!');
}
// bad 星号后无空格
if (condition) {
/**
*如果代码执行到这里
*说明判断条件成立,可以执行下面程序
*/
console.log('Hello world!');
}
// bad 错误的缩进
if (condition) {
/**
* 如果代码执行到这里
* 说明判断条件成立,可以执行下面程序
*/
console.log('Hello world!');
}
// good
if (condition) {
/**
* 如果代码执行到这里
* 说明判断条件成立,可以执行下面程序
*/
console.log('Hello world!');
}
复制代码
3、语句和表达式
3.1 所有的块语句都应当使用花括号,包括
-
if
-
for
-
while
-
do...while...
-
try...catch...finally
// bad
if (condition) console.log('Hello world!');
// good
if (condition) {
console.log('Hello world!');
}
复制代码
3.2 语句和表达式 前后加空格
// bad 前后无空格
if(condition){
doSomething();
}else{
doElseSomething();
}
// good
if (condition) {
doSomething();
} else {
doElseSomething();
}
复制代码
3.2 switch 语句
// bad
switch (condition) {
case 0:
console.log(0);
break;
case 1:
console.log(1);
break;
default:
console.log('default');
}
// good
switch (condition) {
case 0:
console.log(0);
break;
case 1:
console.log(1);
break;
default:
console.log('default');
}
复制代码
3.3 with 语句
禁止使用with语句
3.4 for 循环
尽可能避免使用
continue
// bad
for (let i = 0; i < array.length; i++) {
if (i === 2) {
continue; // 跳过本次迭代
};
doSomething();
}
// good
for (let i = 0; i < array.length; i++) {
if (i !== 2) {
doSomething();
};
}
复制代码
3.5 for-in 循环
-
必须使用
hasOwnProperty()
方法来为for-in
循环过滤出实例属性,除非想查找原型链 -
禁止使用
for-in
遍历数组
// bad
for (let k in obj) {
console.log(obj[k]);
}
// good
for (let k in obj) {
if (obj.hasOwnProperty(k)) {
console.log(obj[k]);
}
}
复制代码
4、汇总
4.1 对象
- 使用字面量创建对象
// bad
const obj = new Object();
// good
const obj = {};
复制代码
- 创建有动态属性名对象时,使用可被计算的属性名称
function