前端规范
前端开发规范文档
前端规范
HTML规范
语法
HTML5 doctype – 为每个 HTML 页面的第一行添加标准模式的声明
用两个空格来代替制表符（tab） – 保证在所有环境下展现一致
嵌套元素应当缩进一次（即两个空格）
对于属性的定义，确保全部使用双引号
不要省略可选的结束标签（例如， 或 ）
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
结构顺序和视觉顺序基本保持一致
按照从上至下、从左到右的视觉顺序书写HTML结构。
有时候为了便于搜索引擎抓取，我们也会将重要内容在HTML结构顺序上提前。
<header>
<div class="logo"></div>
<div class="user-box"></div>
</header>
<nav>
<div class="nav-list"></div>
</nav>
IE 兼容模式
IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。
<head>
<meta charset="UTF-8">
</head>
属性顺序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
- class
- id, name
- data-*
- src, for, type, href, value
- title, alt
class 用于标识高度可复用组件，因此应该排在首位。
<a class="..." id="..." data-toggle="modal" href="#">link</a>
<input class="form-control" type="text">
<img src="..." alt="...">
css规范
语法
用两个空格来代替制表符（tab） – 保证在所有环境下展现一致
为选择器分组时，将单独的选择器单独放在一行
为了代码的易读性，在每个声明块的左花括号前添加一个空格
每条声明语句的 : 后应该插入一个空格
声明块的右花括号应当单独成行
每条声明都应该独占一行
所有声明语句都应当以分号结尾
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5代替 0.5；.5px 代替0.5px）
十六进制值应该全部小写，例如，#fff。尽量使用简写形式的十六进制值，例如，用 #fff代替 #ffffff
为选择器中的属性添加双引号，例如，input[type=”text”]
CSS文件的分类和引用顺序
通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。
我们按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用（按需求决定是否添加版本号）。
公共型样式：包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。
特殊型样式：当某个栏目或页面的样式与网站整体差异较大或者维护率较高时，可以独立引用一个样式：“特殊的布局、模块和元件及扩展”、“特殊的功能、颜色和背景”，也可以是某个大型控件或模块的独立样式。
皮肤型样式：如果产品需要换肤功能，那么我们需要将颜色、背景等抽离出来放在这里。
class 命名
class 名称中只能出现小写字符和破折号（-）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
避免过度任意的简写。.btn 代表 button，但是 .s不能表达任何意思。
class 名称应当尽可能短，并且意义明确。
使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
基于最近的父 class 或基本 class 作为新 class 的前缀。
.nav{ ... }
.important { ... }
.nav-item{ ... }
选择器
对于通用元素使用 class ，这样利于渲染性能的优化。
对于经常出现的组件，避免使用属性选择器（例如，[class^="…"]）。浏览器的性能会受到这些因素的影响。
选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过3 。
/* Bad*/
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Good*/
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
声明顺序
相关的属性声明应当归为一组，并按照下面的顺序排列：
Positioning
Box model
Typographic
Visual
由于定位可以从正常的文档流中移除元素，并且还能覆盖盒模型相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部或者是不影响前两组属性，因此排在后面。
.select {
/* Positioning */
position: absolute;
top: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: left;
width: 200px;
height: 200px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
简写形式的属性声明
在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：
padding
margin
font
background
border
border-radius
.element {
margin: 10px 20px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
JavaScript规范
语法
变量命名
强烈建议使用ESlint来进行代码检查
用两个空格来代替制表符（tab） – 保证在所有环境下展现一致
变量, 使用小驼峰命名法
私有属性、变量和方法以下划线 _ 开头
常量采用大写字母，下划线连接的方式
字符常量一般情况下统一使用单引号’’
使用的URL的地方一定全大写, 比如说 reportURL
let loadingModules = {};
const URL = 'www.baidu.com';
const USERNAME = '李二狗';
function getNewNum(num) {
let _newNum = '';
_newNum = num + 5;
return _newNum;
}
空格
对象属性:后应加空格
{大括号前应加一个空格
运算符前后应加空格，如： +, -, %, &&等
if else else前后留有空格
普通for循环, 分号后留有一个空格， 判断条件等内的操作符两边不留空格， 前置条件如果有多个，逗号后留一个空格
var man = {
hair: 'black',
eyes: 'brown'
}
function findNumLessThan5(arr){
let _newArr = [];
for(let i = 0,len = arr.length; i < len; i++; ){
if(arr[i] < 5){
_newArr.push(arr[i]);
} else {
// do nothing
}
}
return _newArr
}
注释
何时使用
难于理解的代码段
可能存在错误的代码段
浏览器特殊的HACK代码
想吐槽的产品逻辑, 合作同事
业务逻辑强相关的代码
注释原则
As short as possible（如无必要，勿增注释）：尽量提高代码本身的清晰性、可读性。
As long as necessary（如有必要，尽量详尽）：合理的注释、空行排版等，可以让代码更易阅读、更具美感。
单行注释 必须独占一行。 // 后跟一个空格，缩进与下一行被注释说明的代码一致。
多行注释 避免使用 /…/这样的多行注释。有多行注释内容时，使用多个单行注释。
函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。
参数和返回值注释必须包含类型信息和说明
当函数是内部函数，外部不可访问时，可以使用 @inner 标识；
/*
* 函数描述
*
* @param {string} p1 参数1的说明
* @param {string} p2 参数2的说明，比较长
* 那就换行了.
* @param {number=} p3 参数3的说明（可选）
* @return {Object} 返回值描述
*/
function foo(p1, p2, p3) {
var p3 = p3 || 10;
return {
p1: p1,
p2: p2,
p3: p3
};
}
文件注释
文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。 应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。如项目交接，新的交接人应把author写到前边。如有多个交接人，应按责任或及时回应速度排序，以便快速找到维护人。
/**
* 前端开发规范文档
* @author liergou(liergou@123.com)
*/
性能优化
优化DOM查询
短时间内多次操作同一DOM节点，要对DOM查询结果进行缓存，避免性能浪费。
动态添加DOM节点，要将HTML代码整合到一起后再进行渲染，以减少reflow和repaint
function foo(data){
let parent = document.getElementById('list');
let dom = [];
for(let i = 0,len = data.length; l < len; i++){
let html= data[i];
dom.push(html);
}
parent.innerHTML = dom.join('');
}
抽象公共方法
对于多次出现的功能或者组件，要进行抽象和封装，提高复用性，提高代码的整洁性，便于以后的维护。
1161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
