前端编码规范

很久没有更新文章了。。。实在是比较忙啊。。。从本身一个iOS开发,现在要兼顾前端、产品、维护等,每天都有不同的事,虽然学到了很多,但是头发也是越来越少了。。。。
今天一个搞前端的哥们问我,有没有前端编码规范,他们公司的太乱了,很尴尬,于是就把我这篇拿出来分享一下,这些也是总结了前辈们的经验教训,和一些大公司的开发规范修改出来的,我们公司三个前端(我是半吊子,不算),用起来感觉还是非常不错的。

如果有什么问题请大家留言指正,我会不断的修正,争取拿出来一份合格的前端编码规范。


1.本规范为前端开发人员编码遵守,方便阅读和后续交接人员快速入手。如有不当请及时向管理人员指出修改。
2.本规范会不断修订,如有好的建议请联系制定人员,评估合理后即做修改;
----2016.12.24 王克


基本准则

符合web标准, 语义化html, 结构、样式、表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.


通用规范

1.所有页面按照统一的格式来写;
2.对所有后台请求的返回结果做判断空处理(保证在后台请求失败的情况下,浏览器控制台不会报错);
3.所有功能模块写注释,详见下面注释规范;
4.处理逻辑一定要尽量简化,抽取公共框架,减少后期维护成本;
5.tab键用两个空格代替或用两个空格缩进(务必);
6.代码行之间尽量不要有空行,重大逻辑转折、语法意义转折,方法分割除外,适当空行增强可读性;
7.可使用 W3C HTML/CSS Validator 来验证你的 HTML/CSS 代码有效性;


文件、资源和目录命名约定(适用于所有前端维护的内容和相关目录,(html, css, js, png, gif, jpg, ico)等)

1.字母一律小写,必须是英文单词或者汉语拼音,以英语单词优先,多个单词以连字符 - 连接。 只能出现小写引文字母,数字和连字符;
2.浏览器广告拦截插件会将含有这些词的作为广告拦截: ad、ads、adv、banner、sponsor、gg、guangg、guanggao等,页面中尽量避免采用以上词汇来命名;
3.文件命名总是以字母开头而不是数字,以特殊字符开头命名的文件,一般都有特殊的含义与用处,慎用。
4.需要对文件增加前后缀或特定的扩展名(比如 .min.js, .min.css),抑或一串前缀(比如 asdasd.main.min.css)。这种情况下,建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。


HTML 规范

1.为每个HTML页面的第一行添加标准模式声明(HTML5 doctype),确保在每个浏览器中拥有一致的展现;

    
    
      
      
    

2.明确声明字符编码,确保浏览器快速判断页面内容的渲染方式,约定一致采用UTF-8编码。
3.IE 兼容模式。除非特殊需求,否则约定设置为edge,从而通知 IE 采用其所支持的最新的模式。

    

4.元素属性顺序。
HTML 属性统一使用双引号,且应当按照以下给出的顺序依次排列,确保代码的易读性:

```
    - class
    - id 、 name
    - data-*
    - src、for、 type、 href
    - title、alt
    - aria-*、 role
```

5.嵌套元素应当缩进一次,即两个空格;
6.确保全部使用双引号,不要使用单引号;
7.不要省略可选的结束标签,如:,,省略标签可能会导致一些问题;自闭合标签则无需闭合(如:img input br hr 等)。
8.脚本引用写在 body 结束标签之前;
9.尽量保证结构、表现、行为三者分离,并尽量使三者之间没有太多的交互和联系。尽量在文档和模板中只包含结构性的 HTML;而将所有表现代码,移入样式表中;将所有动作行为,JS脚本之中。
10.尽量不使用行内样式;

    ;

11.在每一个块状元素,列表元素和表格元素后,加上一新空白行,并对其子孙元素进行缩进。内联元素写在一行内,块状元素还有列表和表格要另起一行。
12.任何时候都要尽量使用最少的标签并保持最小的复杂度,尽量避免多余的父元素。
13.尽量避免通过 JavaScript 生成的标签,它让内容变得不易查找、编辑,并且降低性能。
14.重要图片一定要加上alt属性; 给重要的元素和截断的元素加上title;

  1. heade 模板
    
    
    
        
        
        Style Guide
        
        
        
        
        
        
        
    

css规范

为了便于阅读,css属性书写要遵循本规范。
1.为了保证一致性和可扩展性,每个声明应该用分号结束,每个声明换行;
2.当使用特定浏览器带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。

.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

3.属性名的冒号后使用一个空格。出于一致性的原因,
属性和值(但属性和冒号之间没有空格)的之间始终使用一个空格。
4.每个规则之间始终有一个空行分隔。
5属性选择器或属性值用双引号(””),而不是单引号(”)括起来。
URI值(url())不要使用引号。
6.为了代码的易读性,在每个声明块的左花括号前添加一个空格;右花括号要单独成行。
7.不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格)。
8.对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)。
9.与 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。所以要尽量使用标签引入样式;

css属性顺序

1.结构性属性:
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
2.表现性属性:
background, border etc.
font, text

例子:
    .header {
     /* 显示属性 */
     display || visibility
     list-style
     position
     top || right || bottom || left
     z-index
     clear
     float
    
     /* 自身属性 */
     width
     max-width || min-width
     height
     max-height || min-height
     overflow || clip
     margin 
     padding
     outline
     border
     background
    
     /* 文本属性 */
     color
     font
     text-overflow
     text-align
     text-indent
     line-height
     white-space
     vertical-align
     cursor
     content
    }

JavaScript规范

1.文件命名可读性强。文件夹、文件的命名与命名空间应能代表代码功能,增强可读性。
2.函数命名按照驼峰命名法。

    function funName() {}

3.常量要全部大写,变量驼峰命名:

     var VARIABLENAME  //常量
     var variableName    //变量

4.排版缩进采用统一的缩进方式排版代码。缩进为2个空格。

    If(condition1 || condition2) {
      action1;
    } else if (condition3 && condition4) {
     action2;
    } else if (condition5
           && condition6
           && condition7
           && condition8) {
     action2;
    } else {
     default action;
    }

5.关键词、条件括弧后面使用空格;运算操作符号两侧使用空格;语句分割符‘,’后面使用空格;

    var name[空格]=[空格]value;
    if[空格](a,[空格]b) {
    }

6.左大括号"{"可以居行尾,右大括号"}"单独占一行,居行首

    if (a && b) {
     }
  1. 句末必须使用分好结尾;
    var fn = function () {
    };//这里没有分号的话,脚本解析器会报错!!!
    (function () {
       alert(1);
    })();

8.if、while、for、do语句的执行体总是用"{"和"}"括起来

  1. 总是使用 var 来声明变量。如不指定 var,变量将被隐式地声明为全局变量,这将对变量难以控制。如果没有声明,变量处于什么定义域就变得不清(可以是在 Document 或 Window 中,也可以很容易地进入本地定义域);
  2. 变量声明可以只用一个 var 关键字声明,多个变量用逗号隔开;赋值尽量写在变量声明当中。
  3. 使用 === 精确的比较操作符,避免在判断的过程中,由 JavaScript 的强制类型转换所造成的错误(比较的双方必须是同一类型才会有效);
  4. 在用if作判断的时候。下列表达式统统返回 false:false, 0, undefined, null, NaN, ''(空字符串).
  5. 统一使用单引号(‘),不使用双引号(“)。这在创建 HTML 字符串非常容易辨别;

注释规范

代码注释,永远也不嫌多,特别是在写一些看似琐碎的无关紧要的代码时,由于记忆点不深刻,注释就变得尤为重要了。避免发生过一段时间回头看自己的代码不能立即明白作用;

1.文件注释要标明作者、文件版本、创建/修改时间、重大版本修改记录;
2.函数或者类等都要添加头描述;
3.注释的时候不止写代码都干了些什么,还要加上代码为什么要这么写,背后的考量是什么。当然也可以加入所思考问题或是解决方案的链接地址。
4.代码注释中英文都可以。

    /**
     * 简述
     * 功能详细描述
     *
     * @param  arg1 参数1
     * @param  arg2 参数2,默认为0
     * @return  看xxx是否成功
     */
     function fooFunction (arg1, arg2) {
     }
  1. 单行注释,写在代码上面;多行注释应有描述;
    /*
    * 注释操作说明
    */
    for( var i = 0; i < 100; i++) {
    }

4.为了便于CSS 阅读, css 大模块时间使用区块分割标记;
/****** 注释描述 ********/


制定参考:

  • 极客学院前端规范;
  • 淘宝团队前端规范;

你可能感兴趣的:(前端编码规范)