首页 > 代码库 > 前端代码编写规范
前端代码编写规范
前端代码编写规范
规范的目的
前端编程人员书写前端代码遵循一定的规范。按照规范编写代码可以使代码具有统一的风格，既可以提高团队协作效率，规范文件管理，可以减小一些错误风险，也有利于项目的代码维护和后期扩展。
规范的内容
前端代码主要包括html、css和JavaScript代码，分别负责页面的结构、表现和行为，严格保证三者的分离，尽量让三者没有太多的交互和联系，这样有利于代码的维护。
前端代码编写规范主要是对这三者进行，也就是html代码编写规范、css代码编写规范和JavaScript代码编写规范。这三个编写规范也有共性的东西，作为通用规范
一 通用规范
1 资源文件命名
1.1 资源文件用小写字母命名，多个单词组合用中划线分隔。
1.2 资源文件的前后缀或者扩展名或者有明显意义的元数据等用点号分隔。
2 缩进
使用4个空格作为一个缩进层级，不使用tab字符。
3 注释
3.1 详尽注释
解释代码解决问题的方法，解决问题的思路。
3.2 模块注释
一般在主要节点的开始和结束添加注释，在循环的结束位置添加注释。方便阅读和修改。
3.3 待办注释
用TODO标记代办事情，便于后期搜索。<!-- TODO:待办事项 -->
二 html代码编写规范
1 文档类型
推荐使用HTML5的文档类型：<!DOCTYPE html>
2 head部分
2.1 编码
明确编码方式。<meta charset="utf-8">
2.2 标题
title作为head的直接子元素，紧跟在编码后面，<title>标题</title>
2.3 favicon
保证favicon可访问
在网站根目录下放置favicon.icon文件或者使用link指定favicon位置
<link rel="shortcut icon" href="http://www.mamicode.com/images/favicon.ico">
3 CSS和JavaScript文件的引入
3.1 type属性
根据HTML5规范，CSS和JavaScript文件不需要指定type属性，它们的默认值分别是text/css 和 text/javascript。
3.2 CSS文件的引入
CSS文件在head中引入。
<link rel="stylesheet" href="http://www.mamicode.com/code-guide.css">
3.3 JavaScript文件的引入
出于性能的考虑，js使用异步加载，并且在body结束之前的位置加载。
<html>
<head>
<link rel="stylesheet" href="http://www.mamicode.com/main.css">
</head>
<body>
<!-- body goes here -->
<script src="http://www.mamicode.com/main.js" async></script>
</body>
</html>
4属性
4.1 属性顺序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，排在第二位。
4.2 布尔值属性
HTML5 规范规定， disabled、checked、selected 等属性不用设置值。
5 语法规范
5.1 大小写
html对大小写不敏感，但为了代码书写方便和代码整洁，元素的标签和属性名统一小写, 属性值加双引号。
5.2标签闭合
非自闭合标签必须有开始标记和结束标记。
自闭合标签添加符号“/”是可选的，html5不做要求。我们约定自闭合标签结尾不添加“/”。
自闭合标签包括：area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr
三 CSS代码编写规范
1 命名
CSS选择器的命名，遵循简单，易懂的语义化命名方式，而且要注意通用性。
1.1 名称都用小写，用英文，不用拼音。
1.2 使用中划线分隔选择器名的单词。
1.3 名称尽量不用缩写，如果使用缩写，必须是语义明确的。
1.4 常用的选择器名称
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left
right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
2 声明顺序
2.1 结构性属性：
2.1.1 显示(display)
2.1.2 位置(position, left, top, right 等)
2.1.3 浮动(overflow, float, clear 等)
2.1.4 距离(margin, padding)
2.2 表现性属性：
2.2.1背景(background, border等)
2.2.2文字系列(font, line-height, letter-spacing, color- text-align等)
2.3 其他(animation, transition等)
3 选择器
3.1 不使用id选择器
id在页面中是唯一的，不能重复使用。而类选择器可以重复使用，一般id选择器用在JavaScript中，CSS中用类选择器。
3.2 少用标签选择器
考虑HTML和CSS代码分离，提高可维护性，在CSS中尽量使用类选择器，少用或不用标签选择器。
3.3选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
4 代码格式
4.1 空格
4.1.1 选择器与{之间必须包含空格
.selector {
}
4.1.2 属性名后面紧跟冒号，冒号和属性值之间必须包含空格
margin: 0;
4.1.3 属性有多个属性值，属性值后面紧跟逗号，逗号和下一个属性值之间必须包含空格。
font-family: Aria, sans-serif;
4.1.4 >、+、~ 选择器的两边各保留一个空格。
main > nav {
4.2 换行
4.2.1 选择器和{单独占一行，如果是多个选择器，每个选择器占一行。
.post,
.page,
.comment {
line-height: 1.5;
}
4.2.2 每一项声明单独占一行，结尾}单独占一行，有利于调试。
margin: 0;
padding: 0;
}
四 JavaScript代码编写规范
1 命名
1.1 变量命名
变量命名采用驼峰式命名法，第一个单词的首字母小写，其余单词的首字母大写。
1.2 函数命名
使用动词+名词的结构，采用驼峰式命名法。
参考动词
|
动词 |
含义 |
返回值 |
|
can |
判断是否可执行某个动作(权限) |
函数返回一个布尔值。true：可执行；false：不可执行 |
|
has |
判断是否含有某个值 |
函数返回一个布尔值。true：含有此值；false：不含有此值 |
|
is |
判断是否为某个值 |
函数返回一个布尔值。true：为某个值；false：不为某个值 |
|
get |
获取某个值 |
函数返回一个非布尔值 |
|
set |
设置某个值 |
无返回值、返回是否设置成功或者返回链式对象 |
|
load |
加载某些数据 |
无返回值或者返回是否加载完成的结果 |
1.3 常量命名
常量全部采用大写字母，单词之间通过下划线分隔。
2 代码格式
2.1 空格
2.1.1 var与变量名之间，变量名与等号之间，等号与初始值之间都留一个空格，初始值和分号之间不留空格。
2.1.2 function与函数名之间留一个空格，函数名与括号之间不留空格，括号与左大括号之间留一个空格。
2.1.3 函数的各个参数之间留一个空格。
2.1.4
if、while、for与左括号之间留一个空格，以强调关键字；switch与左括号之间不留空格。
2.1.5
二元操作符与左右两个操作数之间留一个空格。
2.2 换行
2.2.1
每行语句占用一行，不要多个语句一行。
2.2.2 if、while、for等块级作用域后的左大括号不要另起一行，就放在关键字同一行，结尾的右大括号单独占一行，并与对应的左大括号对齐。
3 函数注释
JavaScript中的注释，也要有详尽注释和待办注释，模块注释相比html和CSS，应用少一些，但JavaScript中会经常用到函数注释。
相对正式的函数注释
/**
* 函数说明
* @关键字
*/
常用注释关键字：
|
注释名 |
语法 |
含义 |
示例 |
|
@param |
@param 参数名 {参数类型} 描述信息 |
描述参数的信息 |
@param name {String} 传入名称 |
|
@return |
@return {返回类型} 描述信息 |
描述返回值的信息 |
@return {Boolean} true:可执行;false:不可执行 |
|
@author |
@author 作者信息 [附属信息：如邮箱、日期] |
描述此函数作者的信息 |
@author 张三 2015/07/21 |
|
@version |
@version XX.XX.XX |
描述此函数的版本号 |
@version 1.0.3 |
|
@example |
@example 示例代码 |
演示函数的使用 |
@example setTitle(‘测试‘) |
如果函数功能相对简单，可以采用单行注释，简要说明功能
4 其他注意事项
4.1 声明变量的var关键字不能省略，如果没有var关键字，变量为全局变量。
4.2 语句的结尾必须加分号。
参考资料
1 http://www.css88.com/archives/5361，前端代码规范（1-4）
2 http://www.cnblogs.com/y-lin/p/5753302.html，前端设计
3 https://segmentfault.com/a/1190000002460968，CSS编码规范
前端代码编写规范