前端工程化详解

# 书写风格

# HTML 文件名

全部采用小写方式， 优先选择单个单词命名，多个单词命名以下划线分隔。

|- error_report.html
|- success_report.html

成功
1
2

# 代码缩进

统一使用Tab（两个空格）进行代码缩进

<div>
  <a href="#"></a>
</div>

成功
1
2
3

# HTML代码大小写

HTML标签名、类名、标签属性和大部分属性值统一用小写

<div class="demo"></div>

成功
1

HTML文本、CDATA、JavaScript、meta标签某些属性等内容可大小写混合

<!-- 优先使用 IE 最新版本和 Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<!-- HTML文本内容 -->
<h1>I AM WHAT I AM </h1>

<!-- JavaScript 内容 -->
<script type="text/javascript">
	var demoName = 'demoName';
	...
</script>
	
<!-- CDATA 内容 -->
<script type="text/javascript"><![CDATA[
...
]]></script>

成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 类型属性

不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含

<link rel="stylesheet" href="" >
<script src=""></script>

成功
1
2

# 引入 CSS 和 JavaScript

引入 CSS 必须在 head 标签里引入。对于引入 Javascript，除了基础库等比较基础性的脚本文件，其他都在靠近 body 结束标签前面引入。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>demo</title>
  <link type="text/css" rel="stylesheet" href="code-guide.css" />
  <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
  <div>
    ......
  </div>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 元素属性

元素属性值使用双引号语法

<link rel="stylesheet" href="example.css">

成功
1

Boolean 属性指不需要声明取值的属性。XHTML 需要每个属性声明取值，但是 HTML5 并不需要。

一个元素中 Boolean 属性的存在表示取值 true，不存在则表示取值 false。简而言之，尽量不要为 Boolean 属性添加取值

<input type="text" disabled>
 
<input type="checkbox" value="1" checked>
 
<select>
  <option value="1" selected>1</option>
</select>

成功
1
2
3
4
5
6
7

建议自定义属性必须以 data- 为前缀，便于阅读。

<a data-modal="toggle" href="#">
  Example link
</a>

成功
1
2
3

使用a标签作为JS事件处理时，统一使用 href="javascript:;" 伪协议

<a href="javascript:;">Click button</a>

成功
1

# 避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值，不同浏览器表现如下：

  • IE 向页面所在的目录发送请求；
  • Safari、Chrome、Firefox 向页面本身发送请求；
  • Opera 不执行任何操作。

空 src 产生请求的后果：

  • 给服务器造成意外的流量负担，尤其时日 PV 较大时；
  • 浪费服务器计算资源；
  • 可能产生报错。

空的 href 属性也存在类似问题。用户点击空链接时，浏览器也会向服务器发送 HTTP 请求，可以通过 JavaScript 阻止空链接的默认的行为

# 代码嵌套

每个块级元素独立一行

行内元素换行时，会自动产生间距，行内元素并列显示

<div>
  <h1></h1>
  <p></p>
</div>	
<p>
  <span></span><a href="#"></a>
</p>

成功
1
2
3
4
5
6
7

行内元素不能嵌套块元素

a标签不能嵌套a

<h1>
  <span></span>
</h1>
<p>
  <span></span><a href="#"></a>
</p>

成功
1
2
3
4
5
6

ul、li/ol、li/dl、dt、dd拥有父子级关系的标签；ul、ol下都只能跟li，dl下只能跟dt.dd

<ul>
  <li></li>
  <li></li>
  <ol></ol>
  <ol></ol>
</ul>
<dl>
  <dt></dt>
  <dt></dt>
  <dd></dd>
  <dd></dd>
</dl>

成功
1
2
3
4
5
6
7
8
9
10
11
12

← 注释规范 →