前端代码规范

发表于 2019-03-25 更新于 2023-01-31 阅读次数：本文字数： 3.2k 阅读时长 ≈ 12 分钟

HTML

语法

用四个空格来代替制表符（tab） – IDE可设置一个Tab四个空格
嵌套元素应当缩进一次（即四个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要在自闭合（self-closing）元素的尾部添加斜线。
不要省略可选的结束标签（closing tag）（例如，</li>或 </body>）。

HTML5 doctype

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。

语言属性

根据 HTML5 规范：

强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。

IE 兼容模式

IE 支持通过特定的标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。

字符编码

通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。

引入 CSS 和 JavaScript 文件

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。
在head标签的结束标签前引入css，在body标签的结束标签前引入js。目的是在渲染dom前加载css，防止展示不带样式的dom，并且在渲染dom后再加载js，防止加载过慢。

属性顺序

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
框架相关属性

class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。

属性命名

class 使用短横线全小写，不超过三个单词的长度如 block, one-block, block-with-border
id 使用小驼峰书写方式，不超过三个单词的长度，并准确表达该元素如 topCarousel controlPanel
bannerImageWrapper

布尔（boolean）型属性

布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。

元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。

如果一定要为其赋值的话，请参考 WhatWG 规范：

如果属性存在，其值必须是空字符串或属性的规范名称，并且不要在首尾添加空白符。

简单来说，就是不用赋值。

CSS

语法

用四个空格来代替制表符（tab） – IDE可设置一个Tab四个空格
为选择器分组（逗号）时，将单独的选择器单独放在一行。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
每条声明语句的 : 后应该插入一个空格。
为了获得更准确的错误报告，每条声明都应该独占一行。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
为选择器中的属性添加双引号，例如，input[type=”text”]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

Positioning 定位相关属性 display,list-style,position,top,right,bottom,left,float,clear ……
Box model 盒模型相关属性 width,height,margin,padding,border,……..
Typographic 印刷样式属性 background,color,font-size,font-family………
Other 其他：content,cursor,z-index,zoom,overflow……
CSS3属性（需要加前缀的属性）：transform,transition,animation,box-shadow,border-radius……

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。
如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照-webkit-/-moz-/-ms-/-o-/std的顺序进行添加，标准属性写在最后
链接的样式请严格按照如下顺序添加：a:link -> a:visited -> a:hover -> a:active

不要使用 @import

与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

使用多个元素
通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例。

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

限制简写形式的属性声明

在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：

padding
margin
font
background
border
border-radius

大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。

注释

代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。

对于较长的注释，务必书写完整的句子；对于一般性注解，可以书写简洁的短语。

class 命名

class 名称中只能出现小写字符和破折号（dash）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
class 名称应当尽可能短，并且意义明确。
使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
基于最近的父 class 或基本（base） class 作为新 class 的前缀。
使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

选择器

对于通用元素使用 class ，这样利于渲染性能的优化。
选择器要尽可能短，并且尽量限制组成选择器的元素个数，单个建议不要超过 3 个选择器。
只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 – 前缀类似于命名空间）。

JS

语法

用四个空格来代替制表符（tab） – IDE可设置一个Tab四个空格
为了代码的易读性，在每个代码块的左花括号前添加一个空格。
代码块的右花括号应当单独成行。
每条语句的 : , 后应该插入一个空格，+ - * / = 的两侧应该插入空格。
为了获得更准确的错误报告，每条语句都应该独占一行，尽量避免多行语句写在一行。
为了减小文件的大小，尽量减少分号的书写（除了 ==( [ / + - * % , .== 为开头的语句需要在前一句句末加上分号，否则会导致编译错误，一般只需注意 ==(== 开头的语句）。
所有命名最好使用英语表示。
所有变量名应该明确而必要，尽量避免不必要的容易混淆的缩写。
-netease.events.mouse.Handler，而不是 netease.events.mouse.MouseEventHandler。
对应的方法应该使用对应的动词，例如：get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end。
应该避免双重否定意义的变量，例如：bIsNotError, bIsNotFound，不可取。
变量应该在最小的范围内定义，并尽可能的保持最少的活动时间。
循环变量最好在循环中定义。例如for(var i=0,m=10;i
尽量避免复杂的条件语句，可以使用临时的boolean变量代替。
一定要避免在条件中执行语句，例如：if((i=3)>2){}，不可取。
不要在代码中重复使用相同意义的数字，用一个变量代替，比如 nTotal=100; num= total

变量命名规范

变量名包括全局变量，局部变量，类变量，函数参数等等，他们都属于这一类。

基本规范

变量命名都以类型前缀+有意义的单词组成，单词首字母都需要大写。例如：sUserName，nCount。

前缀规范

每个局部变量都需要有一个类型前缀，按照类型可以分为：

s：表示字符串。例如：sName，sHtml;
n：表示数字。例如：nPage，nTotal;
d：表示Date。例如 dTimeNow， dToday
b：表示逻辑。例如：bChecked，bHasLogin;
a：表示数组。例如：aList，aGroup;
r：表示正则表达式。例如：rDomain，rEmail;
f：表示函数。例如：fGetHtml，fInit;
o：表示以上未涉及到的其他对象，例如：oButton，oDate;

*例外情况：

作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。
循环变量可以简写，比如：i，j，k等。

为什么需要这样强制定义变量前缀?正式因为javascript是弱语言造成的。在定义大量变量的时候，我们需要很明确的知道当前变量是什么属性，如果只通过普通单词，是很难区分的。

全局变量以及常量规范

全局变量使用g作为前缀，定义在window下。例如gUserName，gLoginTime。
某些作为不允许修改值的变量认为是常量，全部字母都大写。例如：COPYRIGHT，PI。常量可以存在于函数中，也可以存在于全局。

函数命名规范

统一使用动词或者动词[+名词]形式，例如：fGetVersion()，fSubmitForm()，fInit();涉及返回逻辑值的函数可以使用is，has等表示逻辑的词语代替动词。
如果有内部函数，使用__f+动词[+名词]形式，内部函数必需在函数最后定义。例如：

function fGetNumber(nTotal){    
  if(nTotal<100){    
	  nTotal = 100;    
  }    
  return __fAdd(nTotal);        
      
  function __fAdd(nNumber){    
   nNumber++;    
   return nNumber;    
  }    
}    
alert(fGetNumber(30));//alert 101

对象方法实现

对象方法命名使用 f+对象类名+动词[+名词]形式;例如 fAddressGetEmail

事件响应函数

某事件响应函数命名方式为触发事件对象名+事件名或者模块名+触发事件对象名+事件名，例如：fDivClick()，fAddressSubmitButtonClic k()