前端代碼相關規範

時間 2019-11-10

標籤前端代碼相關規範简体版

原文原文鏈接

總結一下目前在用的前端代碼規範，可做爲開發參考javascript

1、基礎規範

開發規範

項目目錄和文件的命名使用小寫字母，避免使用大寫或駝峯，多個單詞如下劃線 _ 分隔如：my_project/cast_detail.jscss

目錄有複數意義的時候，使用複數命名如 scripts imageshtml

某些第三方插件可直接使用中劃線 - 做爲文件名單詞的間隔如 bootstrap-datepicker前端

某些特殊文件可使用點號 . 做爲文件名單詞的間隔如 webpack.config.dev.js jquery.cookie.min.jshtml5

使用有意義的英文單詞式命名，避免使用拼音式（如 tupian.png ）命名java

編輯器設置文件保存格式爲 utf-8，以四個空格做爲縮進（包括HTML，CSS，JS等），文件末尾空一行，行尾去掉空格node

單個函數行數，以不超過一個屏幕爲宜（50行左右），超出一個屏幕的，就要考慮拆分紅更少的函數jquery

每行代碼量不要太長，要適當進行分行（本身也能夠在編輯器設置超長自動換行）webpack

在 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"
}

儘可能作到代碼的整齊美觀git

HTML規範

在頁面開頭使用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>

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

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>

語義化，避免使用不須要的標籤，使用有意義的標籤

<!-- Not well -->
<p class="title">我是標題</p>
<span class="avatar">
    <img src="...">
</span>
 
<!-- Better -->
<h3>我是標題</h3>
<img class="avatar" src="...">

不要省略表格table 的 thead tbody

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

儘可能使用HTML實體符而不是直接使用符號

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

屬性應該按照特定的順序來保證易讀性

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

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

自定義屬性統一使用 data- 前綴

一行標籤代碼不宜過長，超長時須要適當地按照屬性進行分行

但也不是說每一個屬性都分行

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

CSS規範

樣式文件頭部加上編碼規則統一使用 UTF-8

@charset "UTF-8";

使用四個空格的縮進

每一個屬性聲明末尾都要分號

關於空行

文件最後保留一個空行
'}'後最好跟一個空行，包括scss中嵌套的規則
屬性之間須要適當的空行

/* not good */
.element {
    ...
}
.dialog {
    color: red;
    &:after {
        ...
    }
}
 
/* good */
.element {
    ...
}
 
.dialog {
    color: red;
 
    &:after {
        ...
    }
}

關於換行

如下幾種狀況不須要換行：

'{' 前

如下幾種狀況須要換行：

'{' 後和 '}' 前
每一個屬性獨佔一行
多個規則的分隔符 ',' 後

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

關於空格

如下幾種狀況不須要空格：

屬性名後
多個規則的分隔符','前
!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 {
    ...
}

屬性選擇器的屬性值須要引號，url 裏的內容須要引號

.element:after {
    content: "";
    background-image: url("logo.png");
}
 
li[data-type="single"] {
    ...
}

類名參考 BEM命名規範

ID以及SASS中相關的變量命名使用小駝峯

/* class */
.form-content {
    ...
}
 
/* id */
#myDialog {
    ...
}
 
/* 變量 */
$colorBlack: #000;
 
/* 函數 */
@function pxToRem($px) {
    ...
}
 
/* 混合 */
@mixin centerBlock {
    ...
}
 
/* placeholder */
%myDialog {
    ...
}

顏色16進制用小寫字母，且儘可能使用簡寫形式

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

不要爲 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;
}

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

<!-- Not well -->
<style>
    @import url("more.css");
</style>
 
<!-- Better -->
<link rel="stylesheet" href="core.css">

`@import` 引入的文件不須要開頭的 '_' 和結尾的'.scss'；

/* 引入 _variable.scss */
 
/* not good */
@import "_variable.scss";
 
/* good */
@import "variable";

儘可能將媒體查詢的規則靠近與他們相關的規則

不要將他們一塊兒整個放到一個獨立的樣式文件中，或者丟在文檔的最底部

使用前綴屬性時，應經過縮進使取值垂直對齊

且私有屬性在前，標準屬性在後

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

注意屬性簡寫的使用，避免濫用致使覆蓋某些樣式

若是使用簡寫，需保證清楚相應順序的影響，且不會致使其餘問題

padding
margin
background
border
border-radius
transition
animation
font

選擇器嵌套層數不宜過長

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

儘可能不要在HTML中經過 style=... 內聯樣式

注意屬性的聲明順序

相關的屬性聲明應當歸爲一組，參考按照下面的順序排列，另參考

Positioning 定位
Box model 盒模型
Typographic 排版
Visual 外觀
其餘

.declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
 
    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;
 
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;
 
    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
 
    /* Other */
    opacity: 1;
}

sublime中可安裝使用 CSSComb 插件進行格式轉換

  1 {
  2     // If plugin has trouble finding Node.js, replace this string with path
  3     // to your `node` bin
  4     "node-path" : ":/usr/local/bin",
  5     // Full list of supported options and acceptable values can be found here:
  6     // https://github.com/csscomb/csscomb.js/blob/master/doc/options.md
  7     "config": {
  8         // Whether to add a semicolon after the last value/mixin.
  9         "always-semicolon": true,
 10         // Set indent for code inside blocks, including media queries and nested rules.
 11         "block-indent": "    ",
 12         // Unify case of hexadecimal colors.
 13         "color-case": "lower",
 14         // Whether to expand hexadecimal colors or use shorthands.
 15         "color-shorthand": true,
 16         // Unify case of element selectors.
 17         "element-case": "lower",
 18         // Add/remove line break at EOF.
 19         "eof-newline": true,
 20         // Add/remove leading zero in dimensions.
 21         "leading-zero": false,
 22         // Unify quotes style.
 23         "quotes": "double",
 24         // Remove all rulesets that contain nothing but spaces.
 25         "remove-empty-rulesets": true,
 26         // Set space after `:` in declarations.
 27         "space-after-colon": " ",
 28         // Set space after combinator (for example, in selectors like `p > a`).
 29         "space-after-combinator": " ",
 30         // Set space after `{`.
 31         "space-after-opening-brace": "\n",
 32         // Set space after selector delimiter.
 33         "space-after-selector-delimiter": "\n",
 34         // Set space before `}`.
 35         "space-before-closing-brace": "\n",
 36         // Set space before `:` in declarations.
 37         "space-before-colon": "",
 38         // Set space before combinator (for example, in selectors like `p > a`).
 39         "space-before-combinator": " ",
 40         // Set space before `{`.
 41         "space-before-opening-brace": " ",
 42         // Set space before selector delimiter.
 43         "space-before-selector-delimiter": "",
 44         // Set space between declarations (i.e. `color: tomato`).
 45         "space-between-declarations": "\n",
 46         // Whether to trim trailing spaces.
 47         "strip-spaces": true,
 48         // Whether to remove units in zero-valued dimensions.
 49         "unitless-zero": true,
 50         // Whether to align prefixes in properties and values.
 51         "vendor-prefix-align": true,
 52         // Sort properties in particular order.
 53         "sort-order": [
 54                 "font",
 55                 "font-family",
 56                 "font-size",
 57                 "font-weight",
 58                 "font-style",
 59                 "font-variant",
 60                 "font-size-adjust",
 61                 "font-stretch",
 62                 "font-effect",
 63                 "font-emphasize",
 64                 "font-emphasize-position",
 65                 "font-emphasize-style",
 66                 "font-smooth",
 67                 "line-height",
 68                 "position",
 69                 "z-index",
 70                 "top",
 71                 "right",
 72                 "bottom",
 73                 "left",
 74                 "display",
 75                 "visibility",
 76                 "float",
 77                 "clear",
 78                 "overflow",
 79                 "overflow-x",
 80                 "overflow-y",
 81                 "-ms-overflow-x",
 82                 "-ms-overflow-y",
 83                 "clip",
 84                 "zoom",
 85                 "flex-direction",
 86                 "flex-order",
 87                 "flex-pack",
 88                 "flex-align",
 89                 "-webkit-box-sizing",
 90                 "-moz-box-sizing",
 91                 "box-sizing",
 92                 "width",
 93                 "min-width",
 94                 "max-width",
 95                 "height",
 96                 "min-height",
 97                 "max-height",
 98                 "margin",
 99                 "margin-top",
100                 "margin-right",
101                 "margin-bottom",
102                 "margin-left",
103                 "padding",
104                 "padding-top",
105                 "padding-right",
106                 "padding-bottom",
107                 "padding-left",
108                 "table-layout",
109                 "empty-cells",
110                 "caption-side",
111                 "border-spacing",
112                 "border-collapse",
113                 "list-style",
114                 "list-style-position",
115                 "list-style-type",
116                 "list-style-image",
117                 "content",
118                 "quotes",
119                 "counter-reset",
120                 "counter-increment",
121                 "resize",
122                 "cursor",
123                 "-webkit-user-select",
124                 "-moz-user-select",
125                 "-ms-user-select",
126                 "user-select",
127                 "nav-index",
128                 "nav-up",
129                 "nav-right",
130                 "nav-down",
131                 "nav-left",
132                 "-webkit-transition",
133                 "-moz-transition",
134                 "-ms-transition",
135                 "-o-transition",
136                 "transition",
137                 "-webkit-transition-delay",
138                 "-moz-transition-delay",
139                 "-ms-transition-delay",
140                 "-o-transition-delay",
141                 "transition-delay",
142                 "-webkit-transition-timing-function",
143                 "-moz-transition-timing-function",
144                 "-ms-transition-timing-function",
145                 "-o-transition-timing-function",
146                 "transition-timing-function",
147                 "-webkit-transition-duration",
148                 "-moz-transition-duration",
149                 "-ms-transition-duration",
150                 "-o-transition-duration",
151                 "transition-duration",
152                 "-webkit-transition-property",
153                 "-moz-transition-property",
154                 "-ms-transition-property",
155                 "-o-transition-property",
156                 "transition-property",
157                 "-webkit-transform",
158                 "-moz-transform",
159                 "-ms-transform",
160                 "-o-transform",
161                 "transform",
162                 "-webkit-transform-origin",
163                 "-moz-transform-origin",
164                 "-ms-transform-origin",
165                 "-o-transform-origin",
166                 "transform-origin",
167                 "-webkit-animation",
168                 "-moz-animation",
169                 "-ms-animation",
170                 "-o-animation",
171                 "animation",
172                 "-webkit-animation-name",
173                 "-moz-animation-name",
174                 "-ms-animation-name",
175                 "-o-animation-name",
176                 "animation-name",
177                 "-webkit-animation-duration",
178                 "-moz-animation-duration",
179                 "-ms-animation-duration",
180                 "-o-animation-duration",
181                 "animation-duration",
182                 "-webkit-animation-play-state",
183                 "-moz-animation-play-state",
184                 "-ms-animation-play-state",
185                 "-o-animation-play-state",
186                 "animation-play-state",
187                 "-webkit-animation-timing-function",
188                 "-moz-animation-timing-function",
189                 "-ms-animation-timing-function",
190                 "-o-animation-timing-function",
191                 "animation-timing-function",
192                 "-webkit-animation-delay",
193                 "-moz-animation-delay",
194                 "-ms-animation-delay",
195                 "-o-animation-delay",
196                 "animation-delay",
197                 "-webkit-animation-iteration-count",
198                 "-moz-animation-iteration-count",
199                 "-ms-animation-iteration-count",
200                 "-o-animation-iteration-count",
201                 "animation-iteration-count",
202                 "-webkit-animation-direction",
203                 "-moz-animation-direction",
204                 "-ms-animation-direction",
205                 "-o-animation-direction",
206                 "animation-direction",
207                 "text-align",
208                 "-webkit-text-align-last",
209                 "-moz-text-align-last",
210                 "-ms-text-align-last",
211                 "text-align-last",
212                 "vertical-align",
213                 "white-space",
214                 "text-decoration",
215                 "text-emphasis",
216                 "text-emphasis-color",
217                 "text-emphasis-style",
218                 "text-emphasis-position",
219                 "text-indent",
220                 "-ms-text-justify",
221                 "text-justify",
222                 "letter-spacing",
223                 "word-spacing",
224                 "-ms-writing-mode",
225                 "text-outline",
226                 "text-transform",
227                 "text-wrap",
228                 "text-overflow",
229                 "-ms-text-overflow",
230                 "text-overflow-ellipsis",
231                 "text-overflow-mode",
232                 "-ms-word-wrap",
233                 "word-wrap",
234                 "word-break",
235                 "-ms-word-break",
236                 "-moz-tab-size",
237                 "-o-tab-size",
238                 "tab-size",
239                 "-webkit-hyphens",
240                 "-moz-hyphens",
241                 "hyphens",
242                 "pointer-events",
243                 "opacity",
244                 "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
245                 "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
246                 "-ms-interpolation-mode",
247                 "color",
248                 "border",
249                 "border-width",
250                 "border-style",
251                 "border-color",
252                 "border-top",
253                 "border-top-width",
254                 "border-top-style",
255                 "border-top-color",
256                 "border-right",
257                 "border-right-width",
258                 "border-right-style",
259                 "border-right-color",
260                 "border-bottom",
261                 "border-bottom-width",
262                 "border-bottom-style",
263                 "border-bottom-color",
264                 "border-left",
265                 "border-left-width",
266                 "border-left-style",
267                 "border-left-color",
268                 "-webkit-border-radius",
269                 "-moz-border-radius",
270                 "border-radius",
271                 "-webkit-border-top-left-radius",
272                 "-moz-border-radius-topleft",
273                 "border-top-left-radius",
274                 "-webkit-border-top-right-radius",
275                 "-moz-border-radius-topright",
276                 "border-top-right-radius",
277                 "-webkit-border-bottom-right-radius",
278                 "-moz-border-radius-bottomright",
279                 "border-bottom-right-radius",
280                 "-webkit-border-bottom-left-radius",
281                 "-moz-border-radius-bottomleft",
282                 "border-bottom-left-radius",
283                 "-webkit-border-image",
284                 "-moz-border-image",
285                 "-o-border-image",
286                 "border-image",
287                 "-webkit-border-image-source",
288                 "-moz-border-image-source",
289                 "-o-border-image-source",
290                 "border-image-source",
291                 "-webkit-border-image-slice",
292                 "-moz-border-image-slice",
293                 "-o-border-image-slice",
294                 "border-image-slice",
295                 "-webkit-border-image-width",
296                 "-moz-border-image-width",
297                 "-o-border-image-width",
298                 "border-image-width",
299                 "-webkit-border-image-outset",
300                 "-moz-border-image-outset",
301                 "-o-border-image-outset",
302                 "border-image-outset",
303                 "-webkit-border-image-repeat",
304                 "-moz-border-image-repeat",
305                 "-o-border-image-repeat",
306                 "border-image-repeat",
307                 "outline",
308                 "outline-width",
309                 "outline-style",
310                 "outline-color",
311                 "outline-offset",
312                 "background",
313                 "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
314                 "background-color",
315                 "background-image",
316                 "background-repeat",
317                 "background-attachment",
318                 "background-position",
319                 "background-position-x",
320                 "-ms-background-position-x",
321                 "background-position-y",
322                 "-ms-background-position-y",
323                 "-webkit-background-clip",
324                 "-moz-background-clip",
325                 "background-clip",
326                 "background-origin",
327                 "-webkit-background-size",
328                 "-moz-background-size",
329                 "-o-background-size",
330                 "background-size",
331                 "box-decoration-break",
332                 "-webkit-box-shadow",
333                 "-moz-box-shadow",
334                 "box-shadow",
335                 "filter:progid:DXImageTransform.Microsoft.gradient",
336                 "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
337                 "text-shadow"
338         ]
339     }
340 }

View json

JavaScript規範

使用四個空格的縮進

不要省略各個狀況的分號

var x = 1;
 
x++;
 
do {
    x++;
} while (x < 10);
 
showTip($tip, function() {
 
});

字符串統一使用單引號 ‘’

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

用'===', '!=='代替'==', '!='；

關於命名

使用有意義的命名，默認使用小駝峯式命名（某些參數因數據庫設計的緣由，也可以使用大駝峯，主要參照接口文檔）
'ID' 在變量名中全大寫
'URL' 在變量名中全大寫
'Android' 在變量名中大寫第一個字母
'iOS' 在變量名中小寫第一個，大寫後兩個字母
常量全大寫，用下劃線鏈接
構造函數，大寫第一個字母
jQuery對象必須以 '$' 開頭命名

var thisIsMyName;
 
var goodID;
 
var reportURL;
 
var AndroidVersion;
 
var iOSVersion;
 
var MAX_COUNT = 10;
 
function Person(name) {
    this.name = name;
}
 
// not good
var body = $('body');
 
// good
var $body = $('body');

關於空格

如下幾種狀況不須要空格：

對象的屬性名後
前綴一元運算符後
後綴一元運算符前
函數調用括號前
不管是函數聲明仍是函數表達式，'(' 前不要空格
數組的 '[' 後和 ']' 前
對象的 '{' 後和 '}' 前
運算符 '(' 後和 ')' 前

如下幾種狀況須要空格：

二元運算符先後
三元運算符 '?:' 先後
代碼塊 '{' 前
下列關鍵字前：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++;
}

關於空行

如下幾種狀況須要空行：

變量聲明後（當變量聲明在代碼塊的最後一行時，則無需空行）
註釋前（當註釋在代碼塊的第一行時，則無需空行）
代碼塊後（在函數調用、數組、對象中則無需空行）
文件最後保留一個空行

// 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
var foo = {
    a: 2,
    b: function() {
        a++;
    },
    c: 3
};

關於換行

換行的地方，行末應有 ',' 或其餘運算符

換行時須要縮進，但屢次換行不須要繼續縮進

如下幾種狀況不須要換行：

下列關鍵字後：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;
 
if (typeof a === "undefined" ||
    typeof a.b === "undefined" ||
    a.c !== true) {
    url = "www.www.www";
} else {
    url = "www.www";
}
 
 
// 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;

代碼註釋參考註釋規範

簡化變量的聲明，避免多個連續的 var let 聲明

// not good
let a = 1;
let b = 2;
let c = 3;
 
// good
let a = 1,
    b = 2,
    c = 3;

關於數組和對象的使用

簡單的條件語句應該轉換爲對象映射，使用字面量聲明而不是實例化聲明

對象屬性名默認不加引號，若是必要（屬性名帶中劃線 - ）時加引號，須要保持統一

對象以縮進的形式書寫，不要寫在一行（ES6的解構視狀況而定，但一行也不宜過長）

末尾一項不要留逗號

// not good
if (a === 1) {
    b = 'a';
} else if (a === 2) {
    b = 'aa';
} else if (a === 3) {
    b = 'aaa';
} else {
    b = 'b';
}
 
// good
var obj = {
    1: 'a',
    2: 'aa',
    3: 'aaa'
};
 
b = obj[a] || 'b';
 
 
// not good
function Book() {
 
}
 
var book = new Book();
 
book.name = 'book1';
book.ages = new Array(1, 2, 3);
 
// good
var book = {
    name: 'book1',
    ages: [1, 2, 3]
};
 
 
// not good
var a = {
    'b': 1
};
 
var a = {
    b: 1,
    'c-d': 2
};
 
var a = {b: 1};
 
var a = {
    b: 1,
    c: 2,
};
 
 
// good
 
var a = {
    'b': 1,
    'c-d': 2
};
var a = {
    b: 1,
    c: 2
};

if while try 等攜帶的括號不可省略

包括 if, else, for, while, do, switch, try, catch, finally, with 等，應該統一使用括號包裹成塊，即便只有一行

// not good
if (condition)
    doSomething();
 
// good
if (condition) {
    doSomething();
}

不要直接使用 undefined 進行變量的判斷

// not good
if (person === undefined) {
    ...
}
 
// good
if (typeof person === 'undefined') {
    ...
}

使用類型轉換，短路斷路運算 || && ，三目運算符

這裏不包括使用 == 的類型轉換

短路斷路和三目僅在簡單的邏輯裏使用，避免嵌套負雜的多層，且應添加適當的註釋說明

// not good
if ($elem.length === 0) {
    showTip();
}
 
// good
if (!$elem.length) {
    showTip();
}
 
// better
!$elem.length && showTip();
 
// not good
if (a) {
    b = a;
    c = 10;
} else {
    b = 100;
    c = 100;
}
 
// good
b = a || 100;
 
c = a ? 10 : 100;

for-in 裏必定要有hasOwnProperty的判斷

for (key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(obj[key]);
    }
}

上下文 this 的別名，僅僅使用 that _this self

避免使用 me

switch 中應該設置 default

若是不設置，須要寫明註釋

// good
switch (condition) {
    case 1:
    case 2:
        ...
        break;
    case 3:
        ...
    // why fall through
    case 4
        ...
        break;
    // why no default
}

jQuery的鏈式調用分層應換行縮進

// not good
$elem.addClass('abc').hide().find('h1').text('abc');
 
// good
$elem.addClass('abc').hide()
    .find('h1').text('abc');

儘可能使用函數聲明，而不是函數表達式

// not good
var foo = function () {
  // do something
}
// good
function foo () {
  // do something
}

關於字符串，HTML元素的拼接

注意換行和縮進，拼接HTML的時候注意性能，ES6環境中應該使用模板字符串

// not good
var str = '<div><p>abc<p><p>aaa<span>sss</span></p></div>';
 
// good
var str = '' +
    '<div>' +
        '<p>abc<p>' +
        '<p>aaa' +
            '<span>sss</span>' +
        '</p>' +
    '</div>';
 
 
// ES6中
 
// not good
for (var i = 0; i < 10; ++i) {
    $('select').append('<option value="' + i + '">選項' + （i + 1）+ '</option>' );
}
 
// good
var $select = $('select');
    option = [];
 
for (var i = 0; i < 10; ++i) {
    option.push(`<option value="${i}">選項${i + 1}</option>`);
}
 
$select.html(option.join(''));

儘可能不設置全局變量

若是設置全局變量，變量名應帶有」全局「相關的字樣

var globalMsg = '';
 
var globalVariable = {
    msg: 'aa',
    number: 12
};

2、CSS命名規範

BEM規範

3、註釋規範

好的註釋不只可以表達」是什麼「，還能表達」爲何「

HTML註釋規範

註釋以字符  結束

註釋獨佔一行，置於代碼上方，左右閉合前保留一個空格

對於模塊（或者某個代碼塊）註釋，須要增長 首（S）尾（E）標識，模塊之間相隔一行

<!-- Comment Text -->
<div>...</div>
 
 
 
<!-- S Comment Text 1 -->
<div class="mod_a">
    ...
</div>
<!-- E Comment Text 1 -->
     
<!-- S Comment Text 2 -->
<div class="mod_b">
    ...
</div>
<!-- E Comment Text 2 -->

Smarty 前端模板註釋規範

註釋以字符 <{* 開始，以字符 *}> 結束

當只是做爲代碼意義標識的時候，統一使用HTML的註釋規則

當須要註釋不執行某個Smarty部分時，須要遵循Smarty的註釋規則（建議首尾獨佔一行，註釋的文字在首行以後，與 <{* 間隔一個空格，以下）

<!-- S 頭部模塊 --> 
<link .....>
<{include file='./header.tpl'}>
<!-- E 頭部模塊 --> 
 
 
<{* 暫不引人
<h1><{block name="page_header"}><{/block}></h1>
*}>

CSS/SASS 註釋規範

註釋以字符 /* 開始，以字符 */ 結束，左右閉合前保留一個空格，建議一行註釋

也可在一行代碼後面，注意與代碼間有空格

/* 某個表單 */
.search-form {
    &__left {
        position: absolute; /* 定位 */
    }
}

JS 註釋規範

單行註釋

使用雙斜線 // ，雙斜線後帶一個空格，雙斜線與下一行縮進一致

可位於代碼行的末尾，需與代碼間隔一個空格

if (condition) {
    // if you made it here, then all security checks passed
    allowed();
}
 
var zhangsan = 'zhangsan'; // one space after code

多行註釋

註釋以字符 /* 開始，以字符 */ 結束，至少三行，參考如下例子

建議在難以理解的代碼塊，邏輯性強，特殊處理的地方使用

/*
 * one space after '*'
 */
var x = 1;

文檔註釋

JSDoc規範 JSDoc用於根據規範的JS註釋自動生成對應的API文檔，若是不須要生成文檔，只需遵循如下經常使用規範

註釋前要空一行，建議在全部函數，類，常量中使用

經常使用的幾個標籤：@author @license @copyright @param @return @example @version @class @constructor @type @constant @todo ，更多標籤參考

@param中的 {[type]} 使用小寫開頭，多個type使用 | 分隔，且儘可能保持各項的對齊

經常使用的type類型有 boolean（布爾值）， number（數字），string（字符串），array（數組）, object（對象）, function（函數），jqueryObject（jQuery對象），htmlObject（HTML元素對象）等，也可自定義

/**
 * 最大次數
 * @constant {number}
 */
const MAX_TIMES = 10;
 
/**
 * 一個自定義類
 * @version 1.0.0
 * @class MyClass
 * @constructor
 */
function MyClass() {
    // 名字
    this.name = 'defaultName';
}
 
MyClass.prototype = {
    constructor: MyClass,
 
    /**
     * 獲取名字
     * @return {string} 名字
     */
    getName: function() {
        return this.name || '';
    },
 
    /**
     * 設置名字
     * @param  {string|array} name 名字，多個名字將以空格分隔
     * @example
     * setName('ppk')
     * setName(['a', 'b'])
     */
    setName: (name) => {
        this.name = typeof name === 'string' ? name : name.join(' ');
    }
};
 
/**
 * 異步獲取
 * @param  {string}     url            鏈接
 * @param  {object}     data           數據
 * @param  {function}   cb             成功的回調
 * @param  {function}   errorCb        失敗的回調
 * @param  {function}   exceptionCb    異常的回調  
 * @param  {boolean}    noLayerLoading 是否顯示加載圖標
 */
function ajax(url, data, cb, errorCb, exceptionCb, noLayerLoading) {
 
}

JSX 模板註釋規範

JSX其實只是JS的語法糖，因此註釋相似JS

通常的註釋爲以字符 {/* 開始，以字符 */} 結束

let Content = (
  <Nav>
    {/* 我是註釋 */}
    <Person name={window.isLoggedIn ? window.name : ''} />
  </Nav>
);

參考 Code Guide by AlloyTeam Aotu.io

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

前端代碼相關規範

1、基礎規範

開發規範

在 sublime 中的配置

HTML規範

在頁面開頭使用DOCTYPE聲明啓用標準模式

引入CSS和JS時不須要指名type屬性

boolean值的屬性，不須要聲明值的屬性

語義化，避免使用不須要的標籤，使用有意義的標籤

不要省略表格table 的 thead tbody

儘可能使用HTML實體符而不是直接使用符號

使用<a>標籤做爲JS事件處理時，統一使用 href="javascript:;" 僞協議。

屬性應該按照特定的順序來保證易讀性

使用Smarty，Handlebars模板時，注意代碼的整潔美觀

自定義屬性統一使用 data- 前綴

一行標籤代碼不宜過長，超長時須要適當地按照屬性進行分行

CSS規範

樣式文件頭部加上編碼規則 統一使用 UTF-8

使用四個空格的縮進

每一個屬性聲明末尾都要分號

關於空行

關於換行

關於空格

屬性選擇器的屬性值須要引號，url 裏的內容須要引號

類名參考 BEM命名規範

ID以及SASS中相關的變量命名使用小駝峯

顏色16進制用小寫字母，且儘可能使用簡寫形式

不要爲 0 指定單位，去掉小數點先後的 0

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

@import 引入的文件不須要開頭的 '_' 和結尾的'.scss'；

儘可能將媒體查詢的規則靠近與他們相關的規則

使用前綴屬性時，應經過縮進使取值垂直對齊

注意屬性簡寫的使用，避免濫用致使覆蓋某些樣式

選擇器嵌套層數不宜過長

儘可能不要在HTML中經過 style=... 內聯樣式

注意屬性的聲明順序

JavaScript規範

使用四個空格的縮進

不要省略各個狀況的分號

字符串統一使用單引號 ‘’

用'===', '!=='代替'==', '!='；

關於命名

關於空格

關於空行

關於換行

代碼註釋參考註釋規範

簡化變量的聲明，避免多個連續的 var let 聲明

關於數組和對象的使用

if while try 等攜帶的括號不可省略

不要直接使用 undefined 進行變量的判斷

使用類型轉換，短路斷路運算 || && ，三目運算符

for-in 裏必定要有hasOwnProperty的判斷

上下文 this 的別名，僅僅使用 that _this self

switch 中 應該設置 default

jQuery的鏈式調用分層應換行縮進

儘可能使用函數聲明，而不是函數表達式

關於字符串，HTML元素的拼接

儘可能不設置全局變量

2、CSS命名規範

3、註釋規範

HTML註釋規範

Smarty 前端模板註釋規範

CSS/SASS 註釋規範

JS 註釋規範

單行註釋

多行註釋

文檔註釋

JSX 模板註釋規範

樣式文件頭部加上編碼規則統一使用 UTF-8

`@import` 引入的文件不須要開頭的 '_' 和結尾的'.scss'；

switch 中應該設置 default