代码规范

2016-10-18 本文已影响0人 Jill1231

命名规则

1 全部采用小写的方式，以下划线分隔
eg：my_project_name
2 有复数结构时，要采用复数命名法
eg：scripts 、styles 、 images 、 data_models

HTML

1 缩进使用soft tab (4个空格)
2 在属性上，使用双引号，不要使用单引号
3 不要忽略自动闭合标签结尾处使用斜线和可选的关闭标签
eg：<img /> , <li></li>
4 lang 属性规定加上，常用的有如下
<html lang="en-us"></html>
<html lang="zh-cn"></html>
<html lang="zh-hk"></html>
<html lang="zh-tw"></html>
5 字符编码指定为"UTF-8"
6 IE兼容模式：用<meta>标签指定页面应该用什么版本的IE来渲染，可通过连接链接了解更多
eg：<meta http-equiv="X-UA-Compatible content="IE=Edge"/>

http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e

7 引入css,js：不需要指明type

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

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

 * class
 * id
 * name
 * src ,   value , data-* , href
 * for , type , max-length , max , min , pattern
 * placeholder, title, alt
 * aria-*, role
 * required , readonly , disabled

9 boolean属性：不需要声明取值的属性
eg：<input type="text" disabled />
<input type="checkbox" value="1" checked />
<select>
<option value="1" selected >1</option>
</select>

10 减少标签数量：需要尽量避免多余的父节点

CSS

1 分号空格
以下几种情况不需要空格：

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

以下几种情况需要空格：

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

eg：
      .element,
      .dialog,
      .element > .dialog{
            color: red !important; 
            background-color: rgba(0, 0, 0, .5);
      }

2 空行换行

  以下几种情况需要空行：
  文件最后保留一个空行
  '}'后最好跟一个空行，包括scss中嵌套的规则
  属性之间需要适当的空行

  以下几种情况不需要换行：
   '{'前

  以下几种情况需要换行：
  '{'后和'}'前
  每个属性独占一行
  多个规则的分隔符','后

   eg：
        .element,
        .dialog,
        .element > .dialog{
              color: red !important; 
              background-color: rgba(0, 0, 0, .5);
        }

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

3 属性声明顺序

// 下面是推荐的属性的顺序
[
    [
        "display",
        "visibility",
        "float",
        "clear",
        "overflow",
        "overflow-x",
        "overflow-y",
        "clip",
        "zoom"
    ],
    [
        "table-layout",
        "empty-cells",
        "caption-side",
        "border-spacing",
        "border-collapse",
        "list-style",
        "list-style-position",
        "list-style-type",
        "list-style-image"
    ],
    [
        "-webkit-box-orient",
        "-webkit-box-direction",
        "-webkit-box-decoration-break",
        "-webkit-box-pack",
        "-webkit-box-align",
        "-webkit-box-flex"
    ],
    [
        "position",
        "top",
        "right",
        "bottom",
        "left",
        "z-index"
    ],
    [
        "margin",
        "margin-top",
        "margin-right",
        "margin-bottom",
        "margin-left",
        "-webkit-box-sizing",
        "-moz-box-sizing",
        "box-sizing",
        "border",
        "border-width",
        "border-style",
        "border-color",
        "border-top",
        "border-top-width",
        "border-top-style",
        "border-top-color",
        "border-right",
        "border-right-width",
        "border-right-style",
        "border-right-color",
        "border-bottom",
        "border-bottom-width",
        "border-bottom-style",
        "border-bottom-color",
        "border-left",
        "border-left-width",
        "border-left-style",
        "border-left-color",
        "-webkit-border-radius",
        "-moz-border-radius",
        "border-radius",
        "-webkit-border-top-left-radius",
        "-moz-border-radius-topleft",
        "border-top-left-radius",
        "-webkit-border-top-right-radius",
        "-moz-border-radius-topright",
        "border-top-right-radius",
        "-webkit-border-bottom-right-radius",
        "-moz-border-radius-bottomright",
        "border-bottom-right-radius",
        "-webkit-border-bottom-left-radius",
        "-moz-border-radius-bottomleft",
        "border-bottom-left-radius",
        "-webkit-border-image",
        "-moz-border-image",
        "-o-border-image",
        "border-image",
        "-webkit-border-image-source",
        "-moz-border-image-source",
        "-o-border-image-source",
        "border-image-source",
        "-webkit-border-image-slice",
        "-moz-border-image-slice",
        "-o-border-image-slice",
        "border-image-slice",
        "-webkit-border-image-width",
        "-moz-border-image-width",
        "-o-border-image-width",
        "border-image-width",
        "-webkit-border-image-outset",
        "-moz-border-image-outset",
        "-o-border-image-outset",
        "border-image-outset",
        "-webkit-border-image-repeat",
        "-moz-border-image-repeat",
        "-o-border-image-repeat",
        "border-image-repeat",
        "padding",
        "padding-top",
        "padding-right",
        "padding-bottom",
        "padding-left",
        "width",
        "min-width",
        "max-width",
        "height",
        "min-height",
        "max-height"
    ],
    [
        "font",
        "font-family",
        "font-size",
        "font-weight",
        "font-style",
        "font-variant",
        "font-size-adjust",
        "font-stretch",
        "font-effect",
        "font-emphasize",
        "font-emphasize-position",
        "font-emphasize-style",
        "font-smooth",
        "line-height",
        "text-align",
        "-webkit-text-align-last",
        "-moz-text-align-last",
        "-ms-text-align-last",
        "text-align-last",
        "vertical-align",
        "white-space",
        "text-decoration",
        "text-emphasis",
        "text-emphasis-color",
        "text-emphasis-style",
        "text-emphasis-position",
        "text-indent",
        "-ms-text-justify",
        "text-justify",
        "letter-spacing",
        "word-spacing",
        "-ms-writing-mode",
        "text-outline",
        "text-transform",
        "text-wrap",
        "-ms-text-overflow",
        "text-overflow",
        "text-overflow-ellipsis",
        "text-overflow-mode",
        "-ms-word-wrap",
        "word-wrap",
        "-ms-word-break",
        "word-break"
    ],
    [
        "color",
        "background",
        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
        "background-color",
        "background-image",
        "background-repeat",
        "background-attachment",
        "background-position",
        "-ms-background-position-x",
        "background-position-x",
        "-ms-background-position-y",
        "background-position-y",
        "-webkit-background-clip",
        "-moz-background-clip",
        "background-clip",
        "background-origin",
        "-webkit-background-size",
        "-moz-background-size",
        "-o-background-size",
        "background-size"
    ],
    [
        "outline",
        "outline-width",
        "outline-style",
        "outline-color",
        "outline-offset",
        "opacity",
        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
        "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
        "-ms-interpolation-mode",
        "-webkit-box-shadow",
        "-moz-box-shadow",
        "box-shadow",
        "filter:progid:DXImageTransform.Microsoft.gradient",
        "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
        "text-shadow"
    ],
    [
        "-webkit-transition",
        "-moz-transition",
        "-ms-transition",
        "-o-transition",
        "transition",
        "-webkit-transition-delay",
        "-moz-transition-delay",
        "-ms-transition-delay",
        "-o-transition-delay",
        "transition-delay",
        "-webkit-transition-timing-function",
        "-moz-transition-timing-function",
        "-ms-transition-timing-function",
        "-o-transition-timing-function",
        "transition-timing-function",
        "-webkit-transition-duration",
        "-moz-transition-duration",
        "-ms-transition-duration",
        "-o-transition-duration",
        "transition-duration",
        "-webkit-transition-property",
        "-moz-transition-property",
        "-ms-transition-property",
        "-o-transition-property",
        "transition-property",
        "-webkit-transform",
        "-moz-transform",
        "-ms-transform",
        "-o-transform",
        "transform",
        "-webkit-transform-origin",
        "-moz-transform-origin",
        "-ms-transform-origin",
        "-o-transform-origin",
        "transform-origin",
        "-webkit-animation",
        "-moz-animation",
        "-ms-animation",
        "-o-animation",
        "animation",
        "-webkit-animation-name",
        "-moz-animation-name",
        "-ms-animation-name",
        "-o-animation-name",
        "animation-name",
        "-webkit-animation-duration",
        "-moz-animation-duration",
        "-ms-animation-duration",
        "-o-animation-duration",
        "animation-duration",
        "-webkit-animation-play-state",
        "-moz-animation-play-state",
        "-ms-animation-play-state",
        "-o-animation-play-state",
        "animation-play-state",
        "-webkit-animation-timing-function",
        "-moz-animation-timing-function",
        "-ms-animation-timing-function",
        "-o-animation-timing-function",
        "animation-timing-function",
        "-webkit-animation-delay",
        "-moz-animation-delay",
        "-ms-animation-delay",
        "-o-animation-delay",
        "animation-delay",
        "-webkit-animation-iteration-count",
        "-moz-animation-iteration-count",
        "-ms-animation-iteration-count",
        "-o-animation-iteration-count",
        "animation-iteration-count",
        "-webkit-animation-direction",
        "-moz-animation-direction",
        "-ms-animation-direction",
        "-o-animation-direction",
        "animation-direction"
    ],
    [
        "content",
        "quotes",
        "counter-reset",
        "counter-increment",
        "resize",
        "cursor",
        "-webkit-user-select",
        "-moz-user-select",
        "-ms-user-select",
        "user-select",
        "nav-index",
        "nav-up",
        "nav-right",
        "nav-down",
        "nav-left",
        "-moz-tab-size",
        "-o-tab-size",
        "tab-size",
        "-webkit-hyphens",
        "-moz-hyphens",
        "hyphens",
        "pointer-events"
    ]
]

4 媒体查询：尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。
5 不要在一个文件里出现两个相同的规则
eg：用 border: 0; 代替 border: none;

JS

1 分号

以下几种情况后需加分号：
变量声明
表达式
return
throw
break
continue
do-while

2 引号：最外层统一使用单引号。

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

3 变量命名

标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）
'ID'在变量名中全大写
'URL'在变量名中全大写
'Android'在变量名中大写第一个字母
'iOS'在变量名中小写第一个，大写后两个字母
常量全大写，用下划线连接
构造函数，大写第一个字母
jquery对象必须以'$'开头命名

4 括号

下列关键字后必须有大括号（即使代码块的内容只有一行）：
if, 
else,
for,
while,
do,
switch,
try,
catch,
finally,
with,

5 null

适用场景：
      初始化一个将来可能被赋值为对象的变量
      与已经初始化的变量做比较
      作为一个参数为对象的函数的调用传参
      作为一个返回对象的函数的返回值
不适用场景：
      不要用null来判断函数调用时有无传参
      不要与未初始化的变量做比较

6 undefined

//永远不要直接使用undefined进行变量判断；
//使用typeof和字符串'undefined'对变量进行判断。
if (typeof person === 'undefined') { ...}

7 jshint

1、用'===', '!=='代替'==', '!='；
2、for-in里一定要有hasOwnProperty的判断；
3、不要在内置对象的原型上添加方法，如Array, Date；
4、不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量；
5、变量不要先使用后声明；
6、不要在一句代码中单单使用构造函数，记得将其赋值给某个变量；
7、不要在同个作用域下声明同名变量；
8、不要在一些不需要的地方加括号，例：delete(a.b)；
9、不要使用未声明的变量（全局变量需要加到.jshintrc文件的globals属性里面）；
10、不要声明了变量却不使用；
11、不要在应该做比较的地方做赋值；
12、debugger不要出现在提交的代码里；
13、数组中不要存在空元素；
14、不要在循环内部声明函数；
15、不要像这样使用构造函数，例：new function () { ... }, new Object；

if (a === 1) { 
      a++;
}
for (key in obj) { 
      if (obj.hasOwnProperty(key)) { 
            // be sure that obj[key] belongs to the object and was not inherited
            console.log(obj[key]); 
      }
}
var person = new Person();

代码规范

命名规则

HTML

CSS

JS

猜你喜欢

热点阅读