猎豹移动前端编码规范

一.文件相关

  1. 文件名以英文为主,可以使用下划线(如active.html),在后端开发前的html页面如果数量比较多,为了方便寻找,可以使用数字+中文的形式(直观并且可以自动排序);压缩包以项目名+日期的形式
  2. 一律使用utf-8编码
  3. html、css、js发布到线上都需要压缩
  4. 在追求高度优化的站点,需要对图片也进行无损压缩

二.HTML相关

  1. 统一使用html5的dtd申明,并且title要尽量靠前,keywords和description,一个比较合理的示例
<!doctype html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>金山毒霸 – 最好的免费杀毒软件</title>
<meta name="keywords" content="金山毒霸,金山毒霸 2012,金山毒霸 2012体验版,金山毒霸2012免费下载" />
<meta name="description" content="杀毒软件免费下载 2012之全新金山毒霸2012今天正式发布alpha版本,马上报名体验,先睹为快!" />

`

2.两种合理引入js的方法

  • (1)在head内使用动态创建script标签的方式引入js,实现异步加载
<head>
<script type="text/javascript">
    var s = document.createElement("script"),
    h = document.getElementsByTagName("head")[0];
    s.type = "text/javascript";s.async = true;
    s.src = "min.base.js";h.appendChild(s);
</script>
</head>
  • (2)在底部</body>前使用同步加载的方式
<script src="http://l.tbcdn.cn/apps/top/x/sdk.js?appkey=21555299"></script>
</body>
  • (3)标签语义化;代码简洁化;必要的注释;适当考虑内容的重要程度来安排文档流的先后顺序
  • (4)移动端站点极度追求简洁,比如导航代码通常一个容器内编写一系列a标签即可,不必再写ul、li什么的,如
<div class=”nav”>
<a href=”#”>首页</a>
<a href=”#”>关于我们</a>
</div>
  • (5)允许代码缩进,但须以一个tab等于4个空格来设置
  • (6)可见的内联标签禁止换行书写,避免多人合作内联或者内联块状标签间的空白带来的问题,如下面是不太合理的
<!--不合理的代码-->
<div>
<span>test1</span>
<span>test2</span>
<a href=”#”>test3</a>
</div>

<!--合理的代码-->
<div><span>test1</span><span>test2</span><a href=”#”>test3</a></div>
  • (7)页面中的引号统一使用双引号"

CSS相关

可参考人人网FED CSS规范

常用命名

注释

  1. 文件顶部注释
/*
* @description: xxxxx中文说明
* @author: sunshilang
* @update: 2012-10-17 18:32
*/
  1. 模块注释(推荐使用)
/* module: module1 by sunshilang */

/* module: module2 by sunshilang */
  1. 3.编码风格
  2. (1)一个tab设置为四个空格宽度。
  3. (2)规则可以写成单行,或者多行,但是整个文件内的规则排版必须统一。如果是在html中写内联的css,则必须写成单行。
  4. (3)单行形式书写风格的排版约束 a. 每一条规则的大括号{前后加空格 b. 多个selector共用一个样式集,则多个selector必须写成多行形式 c. 每一条规则结束的大括号 } 前加空格 d. 属性名冒号之前不加空格,冒号之后加空格 e. 每一个属性值后必须添加分号; 并且分号后空格
div.test { width: 100px; height: 200px; }
a:focus, a:hover { position: relative; right: 1px; }
  1. 4.多行形式书写风格的排版约束
  2. (1)每一条规则的大括号 { 前添加空格
  3. (2)多个selector共用一个样式集,则多个selector必须写成多行形式
  4. (3)每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐
  5. (4)属性名冒号之前不加空格,冒号之后加空格
  6. (5)属性值之后添加分号;
  7. 4.其他规范
  8. (1)使用单引号,不允许使用双引号
  9. (2)如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照
-webkit- / -moz- / -ms- / -o- / std

的顺序进行添加,标准属性写在最后,并且属性名称要对齐,例如:

div.animation-demo {
    -webkit-animation: mymove 5s infinite;
       -moz-animation: mymove 5s infinite;
         -o-animation: mymove 5s infinite;
            animation: mymove 5s infinite;
}
  1. 5.书写格式
  2. (1)规则命名中,一律采用小写加中划线的方式,不允许使用大写字母或 _
  3. (2)命名避免使用拼音,应该采用更简明有语义的英文单词进行组合
  4. (3)命名注意缩写,但是不能盲目缩写,具体请参见常用的CSS命名规则
  5. (4)不允许通过1、2、3等序号进行命名
  6. (5)避免class与id重名
  7. (6)id用于标识模块或页面的某一个父容器区域,名称必须唯一,不要随意新建id
  8. (7)class用于标识某一个类型的对象,命名必须言简意赅。
  9. (8)尽可能提高代码模块的复用,样式尽量用组合的方式
  10. (9)避免直接给标签设置样式
  11. 7.属性书写顺序

推荐的样式编写顺序

  1. 显示属性
    display/list-style/position/float/clear
    
  2. 自身属性(盒模型)
width/height/margin/padding/border
  1. 背景

    background
    

    (4)行高

    line-height
    

    (5)文本属性

    color/font/text-decoration/text-align/
    text-indent/vertical-align/white-space/content
    

    (6)其他

    cursor/z-index/zoom
    

    (7)CSS3属性

    transform/transition/animation/box-shadow/border-radius
    

    (8)链接的样式请严格按照如下顺序添加:

    a:link -> a:visited -> a:hover -> a:active(LoVeHAte)
    
  2. css优化

  3. (1)合并margin、padding、border的-left/-top/-right/-bottom的设置,尽量使用短名称。
  4. (2)选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置。
  5. (3)注意选择器的性能,不要使用低性能的选择器,例如:
    div > * {}
    ul > li > a {}
    body.profile ul.tabs.nav li a {}
    
  6. (4)禁止在css中使用*选择符
  7. (5)除非必须,否则,一般有class或id的,不需要再写上元素对应的tag,例如:
    div#test { width: 100px; }
    
  8. (6)0后面不需要单位,比如0px可以省略成0,0.8px可以省略成.8px
  9. (7)如果可以,颜色尽量用三位字符表示,例如#aabbcc写成#abc
  10. (8)如果没有边框时,不要写成border:0,应该写成border:none
  11. (9)尽量避免使用AlphaImageLoader
  12. (10)在保持代码解耦的前提下,尽量合并重复的样式,例如:
    h1 { color: black; }
    p { color: black; }
    h1, p { color: black; }
    `
    
    background、font等可以缩写的属性,尽量使用缩写形式
    background: color image repeat attachment position;
    font: style weight size/lineHeight family;
    
  13. 9.hack使用规范 重要原则:尽量少用hack,能不hack坚决不hack,不允许滥用hack。 如果需要使用hack,请参考以下hack方式:

    padding:10px;
    padding:9px\9; /*IE*/
    padding:8px\0; /*IE8-IE9*/
    *padding:5px; /*IE6-IE7*/
    _padding:4px; /*IE6*/
    firefox    @-moz-document url-prefix() { … }
    

    四.javascript相关

    1.变量名

  14. (1)普通局部变量小写英文,如果需要组合,使用驼峰命名写法

    var siteMap;
    
  15. (2)全局变量,首字母大写
    var SiteMap;
    
  16. (3)全局常量,全部大写
    var SITE_MAP;
    
  17. (4)dom对象,加el前缀
    var elSite = $(‘#site’);
    

    2.类名首字母大写

var Site = {
    init: function() {

}
}

3.空格

标点后面加一个空格,前面不加空格; 操作符前后各加一个空格;

//不规范
for (var i=0;i<l;i++) {
}

//规范
for (var i = 0; i < l; i++) {
}