前端开发 - 开发规范

总规范

忽略协议

以方便http与https协议切换，除非必须使用某个协议，否则都忽略。

# HTML
<link rel="stylesheet" href="//static.sample.com/index.css">
<title>Sample</title>
<script src="//static.sample.com/index.js"></script>
<link rel="shortcut icon" href="//static.sample.com/favicon.ico">
...

# CSS
body {
  background-image: url(//static.sample.com/a-1.png);
}

# Javascript
window.location.href = '//www.sample.com'

缩进使用两个空格，不要使用 `tab`

当我们进行文本粘贴代码的时候，当使用 tab 很容易导致 tab 无法对齐，直接使用空格的兼容性最强。

  Hello world!!!
__Hello world!!!

标签属性均使用小写

<div id="sample"></div>

尾部不要留有空格，以防 `diff`

空格容易造成 git,svn 等版本管理工具新增一个版本，该版本没有任何作用。

<!-- 推荐 -->
<div></div>__

<!-- 不推荐 -->
<div></div>

确保编辑器全部都使用 `utf-8` 编码

通过 <meta charset="utf-8"> 指定 HTML 模板和文档的编码。不再要指定样式，脚本等编码类型。

# 设定字符编码是通过 <meta> 标签进行
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

# HTML5，我们只需要这样写
<meta charset="utf-8">

标记 TODO

# HTML
<!-- TODO: 添加列表 -->
<ul></ul>

# CSS
/* TODO: 添加样式 */
body {}

# Javascript
// TODO(David Jones): 添加弹框
alert('Hello world!!!')

HTML 篇

HTML 编写规范

定义 Document Type

使用 html5 的规范 <!DOCTYPE html>，因为 HTML 已经被 HTML5 统一规范采用并满足 web 应用的需求。因此我们可以不再使用 XHTML 定义文档头了。

<!DOCTYPE html>

请确保 HTML 标签有效性

<!-- 不推荐 -->
<article>This is a text.
<!-- 推荐 -->
<article>This is a text.</article>

注意 HTML 标签语义

例如: p 代表段落， a 代表链接等。

<!-- 不推荐 -->
<a onclick="goSample()">sample</a>

<!-- 推荐 -->
<a href="sample/">sample</a>

多媒体标签向后兼容，记得加上 alt 属性

<!-- 不推荐 -->
<img src="./sample.png">

<!-- 推荐 -->
<img src="./sample.png" alt="sample image">
<canvas>Fuck, your brower is not support canvas.</canvas>

由于 `utf-8` 编码的使用，某些记号无需转码

如 —(—), ”(”), 或者 ☺(☺)，当然 < 与 & 那些是必须要转码。

<!-- 不推荐 -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.

<!-- 推荐 -->
The currency symbol for the Euro is “€”.

减少不必要的标签

<!-- 不推荐 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

<!-- 推荐 -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

type 属性为默认时，直接不写

如果 HTML5 已经有默认值，则我们可以直接忽略使用默认值。

<!-- 不推荐 -->
<input type="text" name="nickname">
<script src="//static.sample.com/a.js" type="text/javascript"></script>

<!-- 推荐 -->
<input name="nickname">
<script src="//static.sample.com/a.js"></script>

标签要完整 (建议不要跟 Google 规范)

部分标签可以省略结束标签，例如 li, p, thead, tbody, tr, td 等

<!-- 不推荐 -->
<table>
  <thead>
    <tr>
      <th>Taxes
  <tbody>
    <tr>
      <td>$ 4.50
</table>

<!-- 推荐 -->
<table>
  <thead>
    <tr>
      <th>Taxes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$ 4.50</td>
    </tr>
  </tbody>
</table>

HTML 编写格式规范

为 `block` 标签应该另起一行

<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>

<ul>
  <li>Moe</li>
  <li>Larry</li>
  <li>Curly</li>
</ul>

<table>
  <thead>
    <tr>
      <th scope="col">Income</th>
      <th scope="col">Taxes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$ 5.00</td>
      <td>$ 4.50</td>
    </tr>
  </tbody>
</table>

所有属性均用双引号

<!-- 不推荐 -->
<a class='btn btn-cyan'>Sign in</a>

<!-- 推荐 -->
<a class="btn btn-cyan">Sing in</a>

CSS 篇

CSS 样式规范

尽可能请使用有效的 CSS 样式

请确保 CSS 有效。无效的样式就不要写到样式表里面。

ID 与 CLASS 命名要有意义。

<!-- 不推荐: 完全不知道是什么东西 -->
#yee-1901 {}

<!-- 不推荐: 太表象，太笼统 -->
.button-green {}
.clear {}

<!-- 推荐: 具体 -->
#gallery {}
#login {}
.video {}

<!-- 推荐: 通用 -->
.aux {} # 辅助
.alt {} # 代替

ID 与 Class 命名规范

<!-- 不推荐 -->
#navigation {}
.atr {}

<!-- 推荐: 通用的可以缩写，否则尽量详细 -->
#nav {}
.author {}

如果拥有 ID 或 Class 则不使用元素选择器

<!-- 不推荐 -->
ul#sample {}
div.error {}

<!-- 推荐 -->
#sample {}
.error {}

CSS 样式中尽可能压缩样式

<!-- 不推荐 -->
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
border-top-style: none;
line-height: 1.6;
font-family: palatino, georgia, serif;
font-size: 100%;

<!-- 推荐 -->
padding: 0 1em 2em;
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;

0 的时候去除单位

margin: 0;
padding: 0;

少于 1 的数量把 0 省去

font-size: 0.8em;

压缩 HEX 值

<!-- 不推荐 -->
color: #aabbcc;

<!-- 推荐 -->
color: #abc;

前缀或链接

前缀统一使用 - 链接，非 _ 或驼峰。

<!-- 不推荐 -->
.btndisabled {}
.btn_disabled {}
#mediaBody {}

<!-- 推荐 -->
.btn-disabled {}
#media-body {}

尽量少用 `hack`

尝试另外一种方式去完成样式，而不是一开始就用 hack 手段。

CSS 编写格式规范

根据盒子模型 (google 是根据 a-z 顺序编写，建议使用 Google 推荐的方式)

按照盒子模型由外到内的顺序来编写样式:

类型 (display)
浮动 (float)
定位 (position)
- top
- right
- bottom
- left
边距 (marign)
边 (border)
内边距 (padding)
宽，高 (width/height)
样式 (shadow, ouline, cursor等)
文本样式 (line-hgiht等)
颜色，字体 (color/font等)

记住某些属性一定要添加浏览器前缀(-o-, -webkit-, -ms-, -moz-)

margin: 0;
border: 1px solid #ccc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 0;
width: 100px;
height: 100px;

块内容缩进

@media screen {
  html {
    background: #fff;
    color: #444;
  }
}

确保样式后面都加上 `;`。

<!-- 不推荐 -->
body {
  color: #333;
  font-size: 14px
}

<!-- 推荐 -->
body {
  color: #333;
  font-size: 14px;
}

样式名字与值之间应该留一空格

<!-- 不推荐 -->
body {
  color:#333;
}

<!-- 推荐 -->
body {
  color: #333;
}

样式块内容与样式名之间应留一空格，且不换行

<!-- 不推荐 -->
.error{
  color: red;
}
.error
{
  color: red;
}

<!-- 推荐 -->
.error {
  color: red;
}

多个选择器或多个样式之间应该换行，而非同一行

<!-- 不推荐 -->
a:focus, a:active {
  position: relative; top: 1px;
}

<!-- 推荐 -->
h1,
h2,
h3 {
  color: #333;
  font-size: 14px;
}

声明两个样式之间应该留空一行

html {
  color: #333;
}

body {
  font-size: 14px;
}

合理使用单引号

url 的值均不使用任何引号，而如果确实要使用 @charset 请使用双引号，而其他情况均用单引号。 single quotation marks are not permitted(什么情况下不允许单引号)

@charset "ISO-8859-1";

<!-- 不推荐 -->
background: url("//static.sample.com/a.png");
font-family: "open sans", arial, sans-serif;

<!-- 推荐 -->
background: url(//static.sample.com/a.png);
font-family: 'open sans', arial, sans-serif;

CSS Meta 规则

各个主体的合理备注

/* Header */
#header {}

/* Footer */
#footer {}

/* Gallery */
#gallery {}

Javascript 篇

变量声明必须使用 `var`，若要声明全局变量请使用 `window`

var arr = [];
window.arr = [];

声明静态变量

声明静态变量使用全大写，用下划线链接。不适用 const 关键字

var TIMEOUT_IN_MILLISECONDS = 60;
g.TIMEOUT_IN_MILLISECONDS = 60;
window.TIMEOUT_IN_MILLISECONDS = 60;

结尾记得使用分号

var q = function() {
  return 24;
}

(function() {})()
# Throw: (intermediate value)(...) is not a function

var x = {}
[function(){}][0]()
# Throw: Cannot read property '0' of undefined

var q = 1
-1 == 0 ? alert('equal') : alert('no equal')
# Alert: euqal

使用嵌套函数

function q() {
  return a();

  function a() {
    return 1;
  }
}

块级域中不用使用函数声明形式

<!-- 不推荐 -->
if (x) {
  function qq() {

  }
}

<!-- 推荐 -->
if (x) {
  var qq = function() {

  }
}

<!-- 优化 -->
var qq;

if (x) {
  qq = function() {

  }
}

随意使用自定义 exception

throw 'oh my god, dead loop, dead...'

原生类型不要使用 `new`

typeof Boolean(1) === 'boolean';
typeof new Boolean(1) === 'object';

闭包，内存泄露 (重点)

当 dom 元素对 function 有引用时，该a, b 将不会被回收，IE 内存泄露就是这个原因

循环引用(Circular References) — IE浏览器的COM组件产生的对象实例和网页脚本引擎产生的对象实例相互引用，就会造成内存泄漏。这也是Web页面中我们遇到的最常见和主要的泄漏方式；
内部函数引用(Closures) — Closures可以看成是目前引起大量问题的循环应用的一种特殊形式。由于依赖指定的关键字和语法结构，Closures调用是比较容易被我们发现的；
页面交叉泄漏(Cross-Page Leaks) — 页面交叉泄漏其实是一种较小的泄漏，它通常在你浏览过程中，由于内部对象薄计引起。下面我们会讨论DOM插入顺序的问题，在那个示例中你会发现只需要改动少量的代码，我们就可以避免对象薄计对对象构建带来的影响；
伪泄露(Pseudo-Leaks) — 这个不是真正的意义上的泄漏，不过如果你不了解它，你可能会在你的可用内存资源变得越来越少的时候极度郁闷。为了演示这个问题，我们将通过重写Script元素中的内容来引发大量内存的"泄漏"。

<!-- 不推荐 -->
function foo(element, a, b) {
  element.onclick = function() {
    return a + b;
  }
}

<!-- 推荐 -->
function foo(element, a, b) {
  element.onclick = bar(a, b);
}

function bar(a, b) {
  return function() {
    return a + b;
  }
}

尽量不适用 `eval`

eval 仅使用于 rpc 解码 json, 若要使用类此方法，可选择 new Function('arg1', '...')

eval('{"name": "David Jones"}');

尽量不适用 `with`

一般很少使用 with

除了在模板引擎中使用，一般很少使用 with

遍历

不要使用 for in 来遍历 array, 它只能遍历对象

不要改变内置对象的 `prototype`

命名规范

varName         # 声明名
funcName        # 函数名
ClassName       # 类名
CONSTANT_NAME   # 静态变量
_privateName    # 私有成员
protectName     # 保护成员
var_args        # 可变参数

文件名命名规范

统一使用小写包括扩展名，'.js' 使用 - 而非 _

index.js
text-overflow.js

代码规范

var a = 1
    , b = 2
    , c
    , d
    , e = 1 ? 1 : 0
    , f = fucnNameA()
      ? 1 - 1
      : 2 - 1
    , g = (function() {
        return 1;
      })()
    ;

if (funcNameA() || funcNameB()) {
  funcName()
  ? funcName()
  : funcName();
}

Files

前端开发 - 开发规范.md

Latest commit

History