DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 現如今最流行的JavaScript代碼規范
現如今最流行的JavaScript代碼規范
編輯:JavaScript基礎知識     

什麼是最佳的JavaScript代碼編程規范?這可能是一個眾口難調的問題。那麼,不妨換個問題,什麼代碼規范最流行?

sideeffect.kr通過分析GitHub上托管的開源代碼,得出了一些有趣的結果。一起來看看吧。

行末逗號對行首逗號
行末引號:
復制代碼 代碼如下:
var foo = 1,
    bar = 2,
    baz = 3;

var obj = {
    foo: 1,
    bar: 2,
    baz: 3
};

行首引號:
復制代碼 代碼如下:
var foo = 1
  , bar = 2
  , baz = 3;

var obj = {
    foo: 1
  , bar: 2
  , baz: 3
};

行末,92.345%;行首,7.655%。(基於1,100,251次提交統計。)

空格和Tab
這年頭大家都愛用空格了。使用空格縮進可以保證不同的開發者、不同的編輯器設置下看到的結果是一樣的。

空格,81.1 %;Tab,18.9 %。(基於2,019,550次提交統計。)

函數後是否添加空格
無空格
復制代碼 代碼如下:
function foo() {
  return "bar";
}

有空格
復制代碼 代碼如下:
function foo () {
  return "bar";
}

無空格,67.424 %;有空格,32.576 %。(基於1,212,488次提交統計。)

參數與括號間是否有空格
無空格
復制代碼 代碼如下:
function fn(arg1, arg2) {
//or
if (true) {

有空格
復制代碼 代碼如下:
function fn( arg1, arg2 ) {
  // ...
}

if ( true ) {
  // ...
}

無空格,94.31 %;有空格,5.69 %。(基於1,514,971次提交統計。)

對象字面量中冒號周圍是否有空格
冒號後有空格
復制代碼 代碼如下:
{
  foo: 1,
  bar: 2,
  baz: 3
}

冒號後無空格
復制代碼 代碼如下:
{
  foo:1,
  bar:2,
  baz:3
}

冒號前後均有空格
復制代碼 代碼如下:
{
  foo : 1,
  bar : 2,
  baz : 3
}

後空格,62.955 %;無空格,22.891 %;前後空格,14.154 %。(基於1,300,035次提交統計。)

個人覺得,無空格太擠了,不利於快速分清key和value。前後空格的話,恐怕需要對齊冒號,看起來才美觀,從統計數據來看,大部分程序員懶得對齊冒號(還是說,大部分程序員的IDE或編輯器不夠智能?)

條件語句
有空格
復制代碼 代碼如下:
if (true) {
  //...
}

while (true) {
  //...
}

switch (v) {
  //...
}

無空格
復制代碼 代碼如下:
if(true) {
  //...
}

while(true) {
  //...
}

switch(v) {
  //...
}

有空格,78.276 %;無空格,21.724 %。(基於1,163,316次提交。)

單引號、雙引號
單引號,56.791 %;雙引號,43.209 %。(基於1,705,910次提交。)

總結
所以說,最流行的代碼規范是:

•行末逗號
•空格縮進
•函數名稱後無空格
•函數參數與括號間無空格
•對象字面量的冒號後加空格,冒號前不加
•條件語句關鍵字後加空格

流行的不一定是好的(比如流行性感冒),但是從交流的角度來說,按照流行的風格編寫代碼,可以讓你的代碼在大多數人看起來更習慣。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved