前端代码相关规范

总结一下目前在用的前端代码规范,可作为开发参考

Code Guide by VsurPano Team

[TOC]

 

最佳原则

  • 坚持指定整齐划一的代码规范。
  • 无论团队人数多少,代码应该同出一门。
  • 本文档如有不对或者不合适的地方请及时的提出,经过讨论后方可更改

    命名规则

    项目命名

    全部采用小写方式,以下划线分隔。
    例:vsur_pano

    目录命名

    参照项目命名规则;
    有复数结构时,要采用复数命名法。
    例:scripts,styles,images,data_models

    JS文件命名

    参照项目命名规则;
    例:在baseMap文件夹下的csstool.js需要命名为baseMap_csstool.js

    CSS文件命名

    参照项目命名规则;
    例:basemap_color.css,basemap_layout.css,basemap_typograpy.css

    HTML文件命名

    参照项目命名规则;
    例:basemap_index.html

    HTML

    语法

  • 缩进使用table(四个空格);

  • 嵌套的节点应该缩进;
  • 在属性上,使用双引号,不要使用单引号;
  • 属性名全小写,用中划线做分隔符;
  • 不能忽略关闭标签,例:</li></body>

    Page title Company

    Hello,world

一、基础规范

HTML5 doctype

在页面开头使用doctype来启用标准模式,使其在每个浏览器中尽可能一致的展现按照惯例,doctype大写

<!DOCTYPE html>
<html>
    ...
</html>

开发规范

项目目录和文件的命名使用小写字母,避免使用大写或驼峰,多个单词以下划线 _ 分隔  如:my_project/cast_detail.js

目录有复数意义的时候,使用复数命名  如 scripts  images

某些第三方插件可直接使用中划线 - 作为文件名单词的间隔 如 bootstrap-datepicker

某些特殊文件可以使用点号 . 作为文件名单词的间隔 如  webpack.config.dev.js  jquery.cookie.min.js

使用有意义的英文单词式命名,避免使用拼音式(如 tupian.png )命名

 

编辑器设置文件保存格式为 utf-8,以四个空格作为缩进(包括HTML,CSS,JS等),文件末尾空一行,行尾去掉空格

单个函数行数,以不超过一个屏幕为宜(50行左右),超出一个屏幕的,就要考虑拆分成更少的函数

每行代码量不要太长,要适当进行分行(自己也可以在编辑器设置超长自动换行)

字符编码

通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式,通常指定为'UTF-8'。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
</html>

在 sublime 中的配置

{
    "default_encoding": "UTF-8",
    "ensure_newline_at_eof_on_save": true,
    "trim_trailing_white_space_on_save": true,
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "word_wrap": "auto"
}

尽量做到代码的整齐美观

 

引入CSS,JS

  • 根据HTML5规范,通常在引用CSS和JS时不需要指明 type,因为 text/csstext/javascript 分别是他们的默认值;
  • 根据结构,显示,控制分层的原则,CSS,JS尽量使用外部文件。CSS文件通过文档的 <head>部分用一个 <link>标签引用这个文件 <script>标签放到HTML文档的最后,</body>标签之前。

    Just a test ...

HTML规范

属性顺序

属性应该按照特定的顺序出现以保证易读性

  • class
  • id
  • name
  • data-*
  • src,for,type,href,value,max-length,max,min,pattern
  • placeholder,title,alt
  • aria-*,role
  • required,readonly,disable
    class 是为高可复用组件设计的,所以应处在第一位;
    id 更加具体,针对性更强,原则上应该减少使用,所以放在第二位。

    Example link

    ...

在页面开头使用DOCTYPE声明启用标准模式

不要忘了设置语言 language 和编码 charset格式

各层元素应该换行,嵌套的元素节点应该缩进,缩进使用4个空格

属性名统一使用小写,使用中划线 - 作为单词的分隔;属性值统一使用双引号,避免使用单引号

不要在自动闭合标签结尾处使用斜线(HTML5规范 指出他们是可选的,如 <img >)

不要忽略可选的闭合标签(如 </li> )

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Page title</title>
        <!-- 选择性地使用IE兼容模式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    </head>
    <body>
        <img src="images/company_logo.png" alt="Company">

        <h1 class="hello-world">Hello, world!</h1>
    </body>
</html>

JS生成标签

在JS文件中生成标签让内容变得更难查找,更难编辑,性能更差。
除了动态生成标签功能外,原则上应该尽量避免这种情况的出现。

引入CSS和JS时不需要指名type属性

因为 text/css 和 text/javascript 已经是它们的默认值
另外,时刻牢记应该在 <head>中引入外部CSS,在<body>末尾引入外部JS

<!-- External CSS -->
<link rel="stylesheet" href="code_guide.css">

<!-- In-document CSS -->
<style>
    ...
</style>

<!-- External JS -->
<script src="code_guide.js"></script>

<!-- In-document JS -->
<script>
    ...
</script>

减少标签数量

在编写HTML代码时,需要尽量避免多余的父节点;
很多时候,需要通过迭代和重构来使HTML变得更少。

<!-- Not well -->
<div class="avatar">
    <img src="...">
</div>

<!--Better-->
<img class="avatar" src="...">

boolean值的属性,不需要声明值的属性

在HTML5中,该属性存在即为true,不存在即为false

<!-- 不建议 -->
<input type="text" disabled="disabled">
<!-- 建议 -->
<input type="text" disabled>

<!-- 不建议 -->
<input type="checkbox" value="1" checked="checked">
<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

实用高于完美

尽量遵循HTML标准和语义,但是不应该以浪费实用性为代价;
任何时候都要用尽量小的复杂度和尽量小的标签解决问题。

语义化,避免使用不需要的标签,使用有意义的标签

<!-- Not well -->
<p class="title">我是标题</p>

    <img src="...">


<!-- Better -->
<h3>我是标题</h3>
<img class="avatar" src="...">

CSS

不要省略表格table 的 thead  tbody

<table>
    <thead>
        <tr>
            <th>ABC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc</td>
        </tr>
    </tbody>
</table>

缩进

使用soft tab(4个空格)

.element {
    position: absolute;
    top: 10px;
    left: 10px;

    border-radius: 10px;
    width: 50px;
    height: 50px;
}

尽量使用HTML实体符而不是直接使用符号

分号

每个属性末尾都要加分号。

.element {
    position: absolute;
    top: 10px;
    left: 10px;
}

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

因为设置了href之后的<a>标签才具有默认 cursor: pointer 的样式,才能支持Tab切换;

防止点击跳转可以使用 href="#",但页面锚点hash会改变;可以使用 javascript:void(0) 但稍长;可以使用事件处理 return false;  event.preventDefault() 但略微麻烦

<!-- Not well -->
<a href="#">more>></a>

<!-- Better -->
<a href="javascript:;">more&gt;&gt;</a>

空格

以下几种情况不需要空格:

  • 属性名后
  • 多个规则的分隔符','前
  • !important'!'后
  • 属性值中'('后和')'前
  • 行末不要有多余的空格

以下几种情况需要空格:

  • 属性值前
  • 选择器'>','+','~'前后
  • '{'前
  • !important '!'前
  • @else 前后
  • 属性值中的','后
  • 注释'/*'后和'*/'前

    / not good / .element {

    color :red! important;
    background-color: rgba(0,0,0,.5);
    

    }

    / good / .element {

    color: red !important;
    background-color: rgba(0, 0, 0, .5);
    

    }

    / not good / .element , .dialog{

    ...
    

    }

    / good / .element, .dialog {

    }

    / not good / .element>.dialog{

    ...
    

    }

    / good / .element > .dialog{

    ...
    

    }

    / not good / .element{

    ...
    

    }

    / good / .element {

    ...
    

    }

    / not good / @if{

    ...
    

    }@else{

    ...
    

    }

    / good / @if {

    ...
    

    } @else {

    ...
    

    }

属性应该按照特定的顺序来保证易读性

  • class
  • id
  • name
  • data-*
  • srcfortypehrefvalue , max-lengthmaxminpattern
  • placeholdertitlealt
  • aria-*role
  • requiredreadonlydisabled

class是为高可复用组件设计的,所以应处在第一位;

id更加具体且应该尽量少使用,所以将它放在第二位。

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

<input class="form-control" type="text">

<img src="..." alt="...">

空行

以下几种情况需要空行:

  • 文件最后保留一个空行
  • '}'后最好跟一个空行
  • 属性之间需要适当的空行

使用Smarty,Handlebars模板时,注意代码的整洁美观

尽量使用Map映射的结构,而不是条件判断

<!-- Not well -->
<{if $title == 'one'}>
<h2>标题一</h2>
<{elseif $title == 'two'}>
<h2>标题二</h2>
<{elseif $title == 'three'}>
<h2>标题三</h2>
<{/if}>

<!-- Better -->
<{assign var="titleText" value=[
    'one' => '标题一',
    'two' => '标题二',
    'three' => '标题三'
]}>
<h2><{$titleText[$title]}></h2>

模板里面符号两端适当地加空格(逗号前不用)

<!-- 逗号后面有空格 -->
<li <{if in_array($beforeAction.currentUrl, $url)}>class="active"<{/if}> 列表 </li>

<!-- 等号两边有空格 -->
<{if $abc == 'cdf'}>
<{/if}>

换行

以下情况不需要换行:

  • '{'前

以下几种情况需要换行:

  • '{'后和'}'前
  • 每个属性独占一行
  • 多个规则的分隔符','后

    /* not good */
    .element
    {color: red; background-color: black;}
    
    /* good */
    .element {
        color: red;
        background-color: black;
    }
    
    /* not good */
    .element, .dialog {
        ...
    }
    
    /* good */
    .element,
    .dialog {
        ...
    }
    

自定义属性统一使用 data- 前缀

CSS属性顺序

1 显示属性;
2 元素位置;
3 元素属性;
4 元素内容属性;
5 css书写顺序:

.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
}

一行标签代码不宜过长,超长时需要适当地按照属性进行分行

但也不是说每个属性都分行

<a class="r-btn r-btn-blue eva-content-btnSave" href="javascript:;"
   data-commentID="{{commentID}}"
   data-commentType="{{commentType}}"
   data-evaID="{{evaID}}"
   data-roleStaffID="{{roleStaffID}}"
>确认提交</a>

注释

注释统一用'/**/',具体写法参照下面的示例;
缩进与下一行代码保持一致;
可位于一个代码行的末尾,与代码间隔一个空格。

    /* Modal header */
    .modal-header {
        ...
    }

    /*
     * Modal header
     */
    .modal-header {
        ...
    }

    .modal-header {
        /* 50px */
        width: 50px;

        color: red; /* color red */
    }

CSS规范

引号

最外层统一使用双引号;
url的内容要用引号;
属性选择器中的属性值需要引号。

样式文件头部加上编码规则 统一使用 UTF-8

@charset "UTF-8";

z-index

自己写的z-index的值不能超过 100 (通用组的除外);
页面中的元素内容的z-index不能超过10(popup poptip除外),需要按照内容定义1 2 3 4不允许直接使用如1000,9999;
popup poptip的z-index需要按照内容使用 99以下,10以上的值(11,12,13,也可以小于10),不允许直接使用1000,9999之类大值;

使用四个空格的缩进

命名

类名使用小写字母,以中划线分隔;
id采用驼峰式命名
scss中的变量、函数、混合、placeholder采用驼峰式命名

    /* class */
    .element-content {
        ...
    }

    /* id */
    #myDialog {
        ...
    }

每个属性声明末尾都要分号

属性简写

属性简写需要你非常清楚属性值的正常顺序,而且在大多数情况下并不需要设置属性简写中包含的所有值,所以建议尽量分开声明会更加清晰;
marginpadding 相反,需要使用简写;
常见的属性简写包括:

  • font
  • background
  • transition
  • animation

    /* not good */
    .element {
        transition: opacity 1s linear 2s;
    }
    
    /* good */
    .element {
        transition-delay: 2s;
        transition-timing-function: linear;
        transition-duration: 1s;
        transition-property: opacity;
    }
    

关于空行

  • 文件最后保留一个空行
  • '}'后最好跟一个空行,包括scss中嵌套的规则
  • 属性之间需要适当的空行

    / not good / .element {

    ...
    

    } .dialog {

    color: red;
    &:after {
        ...
    }
    

    }

    / good / .element {

    ...
    

    }

    .dialog {

    color: red;
    
    &:after {
        ...
    }
    

    }

杂项

不允许有空的规则;
元素选择器用小写字母;
去掉小数点前面的0;
数字不必要的小数点和末尾的0;
同个属性不同前缀的写法需要在垂直方向保持对齐,具体参照下面的写法;
无前缀的标准属性应该写在有前缀的属性后面;
不要在同一个规则例出现重复的属性,如果重复的属性是连续的则没关系;
不要在一个文件里出现两个相同的规则;
broder:0; 代替 broder:none;
选择器不要超过4层
尽量少用'*'选择器。

    /* good */
    li {
        ...
    }

    /* not good */
    .element {
        color: rgba(0, 0, 0, 0.5);
    }

    /* good */
    .element {
        color: rgba(0, 0, 0, .5);
    }

    /* not good */
    .element {
        width: 50.0px;
    }

    /* good */
    .element {
        width: 50px;
    }

    /* not good */
    .element {
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;

        background: linear-gradient(to bottom, #fff 0, #eee 100%);
        background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
        background: -moz-linear-gradient(top, #fff 0, #eee 100%);
    }

    /* good */
    .element {
        -webkit-border-radius: 3px;
           -moz-border-radius: 3px;
                border-radius: 3px;

        background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
        background:    -moz-linear-gradient(top, #fff 0, #eee 100%);
        background:         linear-gradient(to bottom, #fff 0, #eee 100%);
    }

    /* not good */
    .element {
        color: rgb(0, 0, 0);
        width: 50px;
        color: rgba(0, 0, 0, .5);
    }

    /* good */
    .element {
        color: rgb(0, 0, 0);
        color: rgba(0, 0, 0, .5);
    }

关于换行

以下几种情况不需要换行:

  • '{' 前

以下几种情况需要换行:

  • '{' 后和 '}' 前
  • 每个属性独占一行
  • 多个规则的分隔符 ',' 后

    / not good / .element {color: red; background-color: black;}

    / good / .element {

    color: red;
    background-color: black;
    

    }

    / not good / .element, .dialog {

    ...
    

    }

    / good / .element, .dialog {

    ...
    

    }

JavaScript

关于空格

以下几种情况不需要空格:

  • 属性名后
  • 多个规则的分隔符','前
  • !important '!' 后
  • 属性值中 '(' 后和 ')' 前
  • 行末不要有多余的空格

以下几种情况需要空格:

  • 属性值前
  • 选择器 '>',  '+',  '~' 前后
  • '{' 前
  • !important '!' 前
  • @else 前后
  • 属性值中的 ',' 后
  • 注释 '/*' 后和 '*/' 前

    / not good / .element {

    color :red! important;
    background-color: rgba(0,0,0,.5);
    

    }

    / good / .element {

    color: red !important;
    background-color: rgba(0, 0, 0, .5);
    

    }

    / not good / .element , .dialog{

    ...
    

    }

    / good / .element, .dialog {

    }

    / not good / .element>.dialog{

    ...
    

    }

    / good / .element > .dialog{

    ...
    

    }

    / not good / .element{

    ...
    

    }

    / good / .element {

    ...
    

    }

    / not good / @if{

    ...
    

    }@else{

    ...
    

    }

    / good / @if {

    ...
    

    } @else {

    ...
    

    }

缩进

使用soft tab(4个空格)。

    var x = 1,
        y = 1;

    if (x < y) {
        x += 10;
    } else {
        x += 1;
    }

属性选择器的属性值需要引号,url 里的内容需要引号

.element:after {
    content: "";
    background-image: url("logo.png");
}

li[data-type="single"] {
    ...
}

单行长度

单行长度不要超过80,但如果编辑器开启word wrap可以不考虑单行长度

类名参考 BEM命名规范

分号

以下几种情况后需加分号:

  • 变量声明
  • 表达式
  • return
  • throw
  • break
  • continue
  • do-while

    /* var declaration */
    var x = 1;
    
    /* expression statement */
    x++;
    
    /* do-while */
    do {
        x++;
    } while (x < 10);
    

ID以及SASS中相关的变量命名使用小驼峰

/* class */
.form-content {
    ...
}

/* id */
#myDialog {
    ...
}

/* 变量 */
$colorBlack: #000;

/* 函数 */
@function pxToRem($px) {
    ...
}

/* 混合 */
@mixin centerBlock {
    ...
}

/* placeholder */
%myDialog {
    ...
}

空格

以下几种情况不需要空格:

  • 对象属性名后
  • 前缀一元运算符
  • 后缀一元运算符
  • 函数调用括号前
  • 无论是函数声明还是函数表达式,'('前不要空格
  • 数组的'['后和']'前
  • 对象的'{'后和'}'前
  • 运算符的'('后和')'前

以下几种情况需要空格

  • 二元运算符前后
  • 三元运算符'?:'前后
  • 代码块'{'前
  • 下列关键字前:else, while, catch, finally
  • 下列关键字后:if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof
  • 单行注释'//'后(若单行注释和代码同行,则'//'前也需要),多行注释'*'后
  • 对象的属性值前
  • for循环,分号后留有一个空格,前置条件如果有多个,逗号后留一个空格
  • 无论是函数声明还是函数表达式,'{'前一定要有空格
  • 函数的参数之间

    // not good
    var a = {
        b :1
    };
    
    // good
    var a = {
        b: 1
    };
    
    // not good
    ++ x;
    y ++;
    z = x?1:2;
    
    // good
    ++x;
    y++;
    z = x ? 1 : 2;
    
    // not good
    var a = [ 1, 2 ];
    
    // good
    var a = [1, 2];
    
    // not good
    var a = ( 1+2 )*3;
    
    // good
    var a = (1 + 2) * 3;
    
    /*
     * no space before '(', one space before '{', 
     * one space between function parameters
     */
    var doSomething = function(a, b, c) {
        // do something
    };
    
    // no space before '('
    doSomething(item);
    
    // not good
    for(i=0;i<6;i++){
        x++;
    }
    
    // good
    for (i = 0; i < 6; i++) {
        x++;
    }
    

颜色16进制用小写字母,且尽量使用简写形式

/* not good */
.element {
    color: #ABCDEF;
    background-color: #001122;
}

/* good */
.element {
    color: #abcdef;
    background-color: #012;
}

空行

以下几种情况需要空行:

  • 变量声明后(当变量声明在代码块的最后一行时,则无需空行)
  • 注释前(当注释在代码块的第一行时,则无需空行)
  • 语法意义相互独立的代码块后(在函数调用、数组、对象中则无需空行)
  • 文件最后保留一个空行

    // need blank line after variable declaration
    var x = 1;
    
    // not need blank line when variable declaration is last expression in the current block
    if (x >= 1) {
        var y = x + 1;
    }
    
    var a = 2;
    
    // need blank line before line comment
    a++;
    
    function b() {
        // not need blank line when comment is first line of block
        return a;
    }
    
    // need blank line after blocks
    for (var i = 0; i < 2; i++) {
        if (true) {
            return false;
        }
    
        continue;
    }
    
    var obj = {
        foo: function() {
            return 1;
        },
    
        bar: function() {
            return 2;
        }
    };
    
    // not need blank line when in argument list, array, object
    func(
        2,
        function() {
            a++;
        },
        3
    );
    
    var foo = [
        2,
        function() {
            a++;
        },
        3
    ];
    
    var foo = {
        a: 2,
        b: function() {
            a++;
        },
        c: 3
    };

不要为 0 指定单位,去掉小数点前后的 0

/* not good */
.element {
    color: rgba(0, 0, 0, 0.5);
}

/* good */
.element {
    color: rgba(0, 0, 0, .5);
}

/* not good */
.element {
    width: 50.0px;
}

/* good */
.element {
    width: 50px;
}

/* not good */
.element {
    width: 0px;
}

/* good */
.element {
    width: 0;
}

换行

换行的地方,行末必须有','或者运算符;
以下几种情况不需要换行:

  • 下列关键字后:else, catch, finally
  • 代码块'{'前

以下几种情况需要换行:

  • 代码块'{'后和'}'前
  • 变量赋值后

    // not good
    var a = {
        b: 1
        , c: 2
    };
    
    x = y
        ? 1 : 2;
    
    // good
    var a = {
        b: 1,
        c: 2
    };
    
    x = y ? 1 : 2;
    x = y ?
        1 : 2;
    
    // no need line break with 'else', 'catch', 'finally'
    if (condition) {
        ...
    } else {
        ...
    }
    
    try {
        ...
    } catch (e) {
        ...
    } finally {
        ...
    }
    
    // not good
    function test()
    {
        ...
    }
    
    // good
    function test() {
        ...
    }
    
    // not good
    var a, foo = 7, b,
        c, bar = 8;
    
    // good
    var a,
        foo = 7,
        b, c, bar = 8;
    

避免使用CSS中的@import ,应使用 <link>方式引入CSS文件

<!-- Not well -->
<style>
    @import url("more.css");
</style>

<!-- Better -->
<link rel="stylesheet" href="core.css">

单行注释

双斜线后,必须跟一个空格;
缩进与下一行代码保持一致;
可位于一个代码行的末尾,与代码间隔一个空格。

if (condition) {
    // if you made it here, then all security checks passed
    allowed();
}

var zhangsan = 'zhangsan'; // one space after code

@import 引入的文件不需要开头的 '_' 和结尾的'.scss';

/* 引入 _variable.scss */

/* not good */
@import "_variable.scss";

/* good */
@import "variable";

多行注释

最少三行, '*'后跟一个空格,具体参照右边的写法;
建议在以下情况下使用:

  • 难于理解的代码段
  • 可能存在错误的代码段
  • 浏览器特殊的HACK代码
  • 业务逻辑强相关的代码
/*
 * one space after '*'
 */
var x = 1;

尽量将媒体查询的规则靠近与他们相关的规则

不要将他们一起整个放到一个独立的样式文件中,或者丢在文档的最底部

文档注释

各类标签@param, @method等请参考 [usejsdoc][] 和 [JSDocGuide][] ;
[usejsdoc]: http://usejsdoc.org/about-getting-started.html
[JSDocGuide]: http://yuri4ever.github.io/jsdoc/
建议在以下情况下使用:

  • 所有常量
  • 所有函数
  • 所有类
/**
 * @func
 * @desc 一个带参数的函数
 * @param {string} a - 参数a
 * @param {number} b=1 - 参数b默认值为1
 * @param {string} c=1 - 参数c有两种支持的取值</br>1—表示x</br>2—表示xx
 * @param {object} d - 参数d为一个对象
 * @param {string} d.e - 参数d的e属性
 * @param {string} d.f - 参数d的f属性
 * @param {object[]} g - 参数g为一个对象数组
 * @param {string} g.h - 参数g数组中一项的h属性
 * @param {string} g.i - 参数g数组中一项的i属性
 * @param {string} [j] - 参数j是一个可选参数
 */
function foo(a, b, c, d, g, j) {
    ...
}

使用前缀属性时,应通过缩进使取值垂直对齐

且私有属性在前,标准属性在后

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

引号

最外层统一使用单引号。

// not good
var x = "test";

// good
var y = 'foo',
    z = '<div id="test"></div>';

注意属性简写的使用,避免滥用导致覆盖某些样式

如果使用简写,需保证清楚相应顺序的影响,且不会导致其他问题

  • padding
  • margin
  • background
  • border
  • border-radius
  • transition
  • animation
  • font

变量命名

变量命名遵循以下标准:

  • 标准变量采用驼峰式命名(除了对象的属性外,主要是考虑到cgi返回的数据)
  • 'ID'在变量名中全大写
  • 'URL'在变量名中全大写
  • 常量全大写,用下划线连接
  • 构造函数,大写第一个字母
  • jquery对象必须以'$'开头命名
var thisIsMyName;

var goodID;

var reportURL;

var MAX_COUNT = 10;

function Person(name) {
    this.name = name;
}

// not good
var body = $('body');

// good
var $body = $('body');

选择器嵌套层数不宜过长

/* not good */
.table > thead > tr > th { … }
.table > thead > tr > td { … }

/* good */
.table > thead > tr {
    > th { … }
    > td { … }
}

变量声明

一个函数作用域中所有的变量声明尽量提到函数首部,用一个var声明,不允许出现两个连续的var声明。

function doSomethingWithItems(items) {
    // use one var
    var value = 10,
        result = value + 10,
        i,
        len;

    for (i = 0, len = items.length; i < len; i++) {
        result += 10;
    }
}

本文由金沙官网线上发布于Web前端,转载请注明出处:前端代码相关规范

您可能还会对下面的文章感兴趣: