FinalHome

最初的梦想

前端编码规范

没有规矩,不成方圆

写在前面

规范目的

为提高团队协作效率, 便于添加功能及前端后期优化维护, 输出高质量的文档。遵循和约定的代码书写规范,意在提高代码的规范性和可维护性。本文档适用于Banner项目开发,仅供参考。

文件规范

文件夹命名规范

  • 项目命名采用英文,长度一般不超过20个字符,命名采用字母加下划线。一般格式如下:F150_std_300x50SuperDuty_rm_300x250_expand_500x300

  • 一些常见的文件夹命名使用简短的名称,不超过5个字符,不要使用复数命名,采用单数格式,如:
    image, stylescript

文件命名规范

命名原则的指导思想:

  1. 使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义.
  2. 当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作 。

规则:

  • 文件名称统一用小写的英文字母数字中划线的组合。
  • 资源文件命名规则分为头尾两部分, 头部分表示此图片的大类性质例如标志、菜单、按钮等,尾部表示描述信息。几个范例: logo-ford.gif 、text-.png。
  • 动态语言文件命名规则:性质(页面是什么)-描述(该页面是做什么的),范例:reset.css,candidate-search.js, register-form.php

HTML规范

注释方式

HTML中注释方式只有一种:<!-- -->

基本结构

  • 文件应以“<!DOCTYPE ……>”首行顶格开始,推荐使用“<!DOCTYPE html>”。
  • 必须申明文档的编码charset,且与文件本身编码保持一致,推荐使用UTF-8编码
  • 根据页面内容和需求填写适当的keywords和description。
  • 页面title是极为重要的不可缺少的一项。
  • 使用link将css文件引入,并置于head中。
  • 使用script将js文件引入,并置于body底部。
  • 书写链接地址时, 必须避免重定向,例如:href=”http://itaolun.com/”, 即须在URL地址后面加上“/”
  • 必须为含有描述性表单元素(input, textarea)添加label。
  • 结构顺序和视觉顺序基本保持一致
  • class用于定义样式, id和data-xxx用于JS调用
  • 特殊符号使用 符号实体

代码格式化

  • 每一个块级元素都另起一行,每一行都使用Tab缩进对齐(head和body的子元素不需要缩进)。删除冗余的行尾的空格。
  • 使用4个空格代替1个Tab(大多数编辑器中可设置)。
  • 你也可以在大的模块之间用空行隔开,使模块更清晰。
  • 如果嵌套复杂,应该在div结束的地方,加上注释,标明那层嵌套结束。比如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<div class="m-side">
<div class="side">
<div class="sidein">
<div class="sideblk">
<div class="m-hd3"><h3 class="tit">热门标签</h3> </div>
</div>
<div class="sideblk">
<div class="m-hd3"><h3 class="tit">最热TOP5</h3> <a href="#" class="s-fc02 f-fr">更多»</a></div>
</div>
</div><!-- end sidein -->
</div>
</div><!-- end m-side -->
</body>

CSS规范

注释

文件信息注释:

1
2
3
4
5
/*
* @description: Super_Duty_rm_300x500
* @author: Leo Hui <leohxj@gmail.com>
* @update: 2013-9-3 13:49:20
*/

区块注释:

1
2
/*============= Module =============*/
/*============= End Module =============*/

单行/多行注释,每行宽度不超过80字符。

1
2
3
4
5
6
/* This is for IE8 CSS3 future */
/*
* This is one comment,
* This is another comment
*/

基本规范

  • 命名使用中划线连接
  • 分析并提取可复用的内容,可以按照OO的方式,把元素通用样式和单独样式分开。
  • 适当值缩写, 适用background, animation, transition这样的属性。
  • 选择器应该尽量简短,不要超过三级。
  • 背景图片请尽可能使用sprite技术, 减小http请求。
  • 必须为大区块样式添加注释, 小区块适量注释;
  • 用CSS控制交互和视觉变化,使用JS改变其className。

代码格式化

  • 所有标示全部使用小写字母
  • 省略为0的单位,比如margin: auto 0;而不是margin: auto 0px;
  • 颜色使用十六进制,rgba除外
  • 私有在前,标准在后,先写带有浏览器私有标志的,后写W3C标准的。
  • css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性.

    布局定位属性主要包括: margin & padding & float(包括clear) & position(相应的 top,right,bottom,left) & display & visibility & overflow等; 自身属性主要包括: width & height & background & border; 文本属性主要包括: font & color & text-align & text-decoration & text-indent等;其他属性包括: list-style(列表样式) & vertical-vlign & cursor & z-index(层叠顺序) & zoom等. 我所列出的这些属性只是最常用到的, 并不代表全部;

JavaScript规范

注释

单行注释:

1
// 这是单行注释
1
2
3
4
/*
* 这是多行注释1,
* 这是多行注释2
*/

函数注释, 参考JsDoc:

1
2
3
4
5
6
7
8
/**
* [getValue description]
* @param {[type]} x [description]
* @return {[type]} [description]
*/
function getValue(x) {
return;
}

基本规范

  • 文件编码统一为utf-8。
  • 永远不要在同一个项目中混用两种引号,选择一种,并保持一致。推荐单引号。
  • 变量定义永远放在作用域的开头。函数内部定义局部变量一定要使用var
  • 命名语义化, 尽可能利用英文单词或其缩写;
    • 变量命名: 驼峰式命名, 首字母须小写, 如:firstName
    • 常量命名: 全部使用大写, 如:PI
    • 类命名: 首字母大写, 驼峰式命名. 如:Person
    • 函数命名: 首字母小写驼峰式命名. 如:clearTimeline()

代码格式化

  • 赋值语句
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 在一个作用域(函数)内只使用一个 `var` 有助于提升可读性
// 并且让你的声明列表变得有条不紊 (还帮你省了几次键盘敲击)
// 不推荐
var foo = "";
var bar = "";
var qux;
// 推荐
var foo = "",
bar = "",
quux;
// 或者..
var // 对这些变量的注释
foo = "",
bar = "",
quux;
// 函数内部定义变量
function foo() {
var bar = "",
qux;
// 所有语句都在变量之后
}
  • 函数定义
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 命名函数声明
function foo( arg1, argN ) {
}
// 函数表达式
var square = function( number ) {
// 返回有价值的、相关的内容
return number * number;
};
// 带标识符的函数表达式
// 这种首选形式有附加的功能让其可以调用自身
// 并且在堆栈中有标识符
var factorial = function factorial( number ) {
if ( number < 2 ) {
return 1;
}
return number * factorial( number-1 );
};
// 构造函数声明
function FooBar( options ) {
this.options = options;
}
// 使用方法
var fooBar = new FooBar({ a: "alpha" });
fooBar.options;
// { a: "alpha" }
  • for循环
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
for (var i = 0, length = xxx.length; i < length; i++ ) {
// 语句
}
// 或者...
var i = 0,
length = xxx.length;
for ( ; i < length; i++ ) {
// 语句
}
for (var prop in object) {
// 语句
}
// 或者
var prop;
for ( prop in object ) {
// 语句
}
  • if/else判断
1
2
3
4
5
if ( true ) {
// 语句
} else {
// 语句
}
  • switch代码
1
2
3
4
5
6
7
8
9
10
11
12
13
// switch 语句示例
switch( foo ) {
case "alpha":
alpha();
break;
case "beta":
beta();
break;
default:
// 默认分支
break;
}

工具推荐

推荐几个sublime插件:

  • Emmet(模板)
  • Tag(HTML格式化)
  • jsFormat(JavaScript格式化)
  • CodeFormatter(CSS格式化)
  • cssComb(CSS美化)

参考资料

Proudly powered by Hexo and Theme by Hacker
© 2016 Leo Hui