前端代码规范

tool web

目录

HTML编码规范

语法

  • 用4个空格来代替制表符（tab）
  • 嵌套元素应当缩进一次（即4个空格）。
  • 对于属性的定义，确保全部使用双引号，不要使用单引号。
  • H5页面不需要在自闭合（self-closing）元素的尾部添加斜线(注：xhtml 1.0所有标签尾部都要添加斜线)。
  • 不要省略可选的结束标签（closing tag）
/*自闭合标签*/
	<!DOCTYPE html>
	<html>
		<head>
		<title>Page title</title>
		</head>
		<body>
		<img src="images/company-logo.png" alt="Company">
		<!-- xhtml:1.0 img标签尾部需添加斜线
		<img src="images/company-logo.png" alt="Company"/>
		-->
		<h1 class="hello-world">Hello, world!</h1>
		</body>
	</html>
/*可选闭合标签,这里的</li>省略了*/
<ul>
	<li><a href=""></a>
	<li><a href=""></a>
</ul>
/*完整的代码*/
<ul>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
</ul>

文档类型声明

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。声明之后可以确保浏览器正确的解析我们编写额web页面。

HTML5只需要按如下的方式声明文档类型

<!DOCTYPE html>

HTML 4.01有三种dtd

HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset
该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

从上可以看到H5只有一种声明类型，html 4.01和xhtml 1.0都有三种什么类型，一般情况下我们只需要什么H5 doctype头部即可，如果需要考虑兼容低版本浏览器（ie6/7/8)可使用过渡类型的头部。

过渡类型、严格模式、框架集的差别

<!--HTML5-->
<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
	</body>
</html>
<!--过渡类型-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>
```	
## 字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
```html
<head>
	<meta charset="UTF-8">
</head>
```		
		
## 使用正确的标签，避免标签冗余
* 尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。（尤其勿滥用div标签）
* 避免标签冗余
```html
	<!-- 不规范的写法 -->
	<span class="avatar">
			<img src="...">
	</span>
	<!-- 规范的写法 -->
	<img class="avatar" src="...">

标签属性书写顺序

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

  • class
  • id, name
  • data-*
  • src, for, type, href
  • title, alt
  • aria-*, role

class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，一般提供给JS使用。

CSS编码规范

语法

  • 用四个空格来代替制表符（tab）
  • 为选择器分组时，将单独的选择器单独放在一行。
  • 为了代码的易读性，在每个声明块的左花括号前添加一个空格。
  • 声明块的右花括号应当单独成行。
  • 每条声明语句的 : 后应该插入一个空格。
  • 每条声明都应该独占一行。
  • 所有声明语句都应当以分号结尾。
  • 空格的使用
    • 选择器与 { 之前要有空格
    • 属性名的 : 后要有空格
    • 属性名的 : 前不加空格
  • 十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
  • 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
  • 为选择器中的属性添加双引号，例如，input[type=”text”]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
  • 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
/* 不规范 CSS */
.selector, .selector-second, .selector[type=text] {
	padding:15px;
	margin:0px 0px 15px;
	background-color:rgba(0, 0, 0, 0.5);
	box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF;
}
/* 规范 CSS */
.selector,
.selector-second,
.selector[type="text"] {
	padding: 15px;
	margin-bottom: 15px;
	background-color: rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

属性书写顺序

  • Position
  • Box model
  • Typographic
  • Visual
.declaration-order {
	/* 定位相关 */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	/* 盒模型相关 */
	display: block;
	width: 100px;
	height: 100px;
	/* 文本属性、排版相关 */
	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;
}

class和id的命名

  • class名称中只能出现小写字符和破折号（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
  • id的命名使用驼峰命名法（例如：#newUserName）
  • 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
  • class和id的名称应当尽可能短，并且意义明确。
  • 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（例如左右等位置信息，left-bar、right-bar）的名称。
  • 基于最近的父class或基本class作为新class的前缀。
/* 不规范的写法 */
.m { ... }
.red { ... }
.header { ... }
/* 规范的写法 */
.menu { ... }
.important { ... }
.menu-header { ... }

选择器

  • 对于通用元素使用class这样利于渲染性能的优化。
  • 对于经常出现的组件，避免使用属性选择器（例如，[class^=”…”]）。浏览器的性能会受到这些因素的影响。
  • 选择器层级建议不多余3层。
  • 只有在必要的时候才将class限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的class时 – 前缀类似于命名空间）。

icon

  • 使用雪碧图
  • 使用自定义字体

编辑器配置

  • 用四个空格代替制表符（soft-tab 即用空格代表 tab 符）。
  • 设置文件编码为 UTF-8。

javascript编码规范

命名规范

变量命名

变量命名使用有意义的单词和驼峰式命名。
临时变量简写：str,num,bol,fun,arr。
循环变量简写：i , j , k。

全局变量及常量规范

全局变量使用g作为前缀，如gUserName , gLoginTime。
常量全部字母都大写，如： PI , COPYRIGHT。注:常量可存在于函数中，也可存在于全局。

函数命名规范

  1. 统一使用动词或动词加名词的形式。如getVersion() , submitForm()。
  2. 涉及返回逻辑值的函数可以使用is , has 等表示逻辑的词语代替动词。 内部函数前加上 ‘_‘前缀。
  3. 可选参数以 ‘opt’ 开头.

类的命名

  • 类名首字母大写。
  • 属性名为具有一定意义的名词。私有属性加 “_“。
  • 方法名为有意义的动词[+名词]，首字母小写。私有方法加 ‘_”.

其它

  • 命名无特殊情况，请使用英语表示。切勿用汉语拼音。
  • 变量名应该明确必要，避免容易混淆的缩写。
  • 应该避免双重否定意义的变量，例如：bIsNotError, bIsNotFound，不可取。
  • 变量的生命周期保持可用范围最小。
  • 循环变量在循环中定义。
  • 避免在条件中执行语句。
  • 重复使用的具有相同意义的数字，用变量代替。

注：window对象中只可以定义全局变量，常量，类。

命名空间

为避免全局命名的冲突,在全局作用域上使用一个与项目或文件相关的名字来划分作用域空间.

var calcultor = {};
calcultor.add = function() {
...
};
calcultor.sub = function() {
...
};

类型

  • 原始值：按值传递 string/number/boolean/null/undefined 注:null和undefine是不同的.
  • 复杂类型：按引用传递 object/array/function

对象

使用字面值创建对象

/*bad*/
var item = new Object();
/*good*/
var item = {};

不要使用保留字作为键

/*bad*/
var superman = {
   	class:'superhero',
   	default:{ clark:'kent' },
   	private: true
}
/*good*/
var superman = {
   	klass: 'superhero',
   	defaults:{ clark: 'kent' },
   	hidden: true
};

数组

使用字面量创建数组

/*bad*/
var items = new Array();
/*good*/
var items = [];

数组长度不知时，使用push添加元素

var someStack = [];
/*bad*/
someStack[someStack.length] = 'abcdefg';
/*good*/
someStack.push('abcdefg');
/*使用slice拷贝数组*/
var len = items.length,
     itemsCopy = [],
     i;
/*bad*/
for(i = 0; i < len; i++){
   	itemsCopy[i] = items[i];
}
/*good*/
itemsCopy = items.slice();

函数

不要在一个非函数块里面声明一个函数，应该把那个函数赋给一个变 量。浏览器让你这么做，但是解析的情况是不同的。

/*bad*/
if(currentUser){
    function test(){
        console.log('Nope.');
    }
}
/*good*/
if(currentUser){
    var test = function test(){
        console.log('Yup.');
    };
}

请勿把参数命名为 arguments,这会对函数内的 arguments对象产生影响。

/*bad*/
function nope(name, options, arguments){
   
}
/*good*/
function yup(name, options, args){
    
}

属性

当使用变量访问属性时使用中括号。

var luke = {
    jedi: true,
    age: 28
};
function getProp(prop){
    return luke[prop];
}
var isJedi = getProp('jedi');

条件表达式和等号

适当使用===和！==以及==和！=。

条件表达式的强类型转换规则：

  • 对象被计算为true
  • Undefined被计算为false
  • Null被计算为false
  • 布尔值被计算为布尔的值
  • 数字如果是+0, -0,NaN被计算为false
  • 字符如果是空字符串，则被计算为false，否则为true
  • 字符串如果是空字符串，则被计算为false，否则为true

事件

当给事件附加数据时，传入一个哈希而不是原始值，这可以让后面的贡献者加入更多数据到事件数据 里而不用找出并更新那个事件的事件处理器。

/*bad*/
$(this).trigger('listingUpdated', listing.id);
$(this).on('listingUpdated', function(e,listingId){
   	/*do something with listingId*/
});
/*good*/
$(this).trigger('listingUpdated', {listingId: listing.id});
$(this).on('listingUpdated', function(e, data){
   /*do something with data.listingId*/
});
Prev Next