最流行的JavaScript代碼規范

senntyou 發布于2019-08-21 12:10 / 477人閱讀

摘要：什么是最佳的代碼編程規范這可能是一個眾口難調的問題。那么，不妨換個問題，什么代碼規范最流行通過分析上托管的開源代碼，得出了一些有趣的結果。基于次提交統計。

什么是最佳的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次提交。）

總結

所以說，最流行的代碼規范是:

行末逗號

空格縮進

函數名稱后無空格

函數參數與括號間無空格

對象字面量的冒號后加空格，冒號前不加

條件語句關鍵字后加空格

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

編撰 SegmentFault

GPU云服務器云服務器最流行的編程語言 java最流行的框架最流行的開源分布式存儲系統最流行

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87474.html

精讀《js 模塊化發展》

摘要：我是這一期的主持人黃子毅本期精讀的文章是。模塊化需要保證全局變量盡量干凈，目前為止的模塊化方案都沒有很好的做到這一點。精讀本次提出獨到觀點的同學有流形，黃子毅，蘇里約，，楊森，淡蒼，留影，精讀由此歸納。這次是前端精讀期刊與大家第一次正式碰面，我們每周會精讀并分析若干篇精品好文，試圖討論出結論性觀點。沒錯，我們試圖通過觀點的碰撞，爭做無主觀精品好文的意見領袖。我是這一期的主持人 ——...

Freelander 2019-08-22 17:00 評論0 收藏0
重讀《學習JavaScript數據結構與算法-第三版》-第2章 ECMAScript與TypeScr

摘要：第二種接口的概念和面向對象編程相關接口視為一份合約，在合約里可以定義這份合約的類或接口的行為接口告訴類，它需要實現一個叫做的方法，并且該方法接收一個參數。定場詩八月中秋白露，路上行人凄涼；小橋流水桂花香，日夜千思萬想。心中不得寧靜，清早覽罷文章，十年寒苦在書房，方顯才高志廣。前言洛伊安妮·格羅納女士所著的《學習JavaScript數據結構與算法》第三版于2019年的5月份...

TZLLOG 2019-08-26 10:44 評論0 收藏0
關于BOOTSTRAP的整理和理解

摘要：規范名稱定義，便于維護。譬如關于的定義在格式化的中會聲明為，而在基本樣式的中又可能會聲明所以在中會出現多次定義。盡量減少連接數和的大小。基于版本的使用目前使用較廣的是版本和，其中的最新版本是的最新版本。隨著CSS3和HTML5的流行，我們的WEB頁面不僅需要更人性化的設計理念，而且需要更酷的頁面特效和用戶體驗。作為開發者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...

amc 2019-08-29 16:10 評論0 收藏0
關于BOOTSTRAP的整理和理解

摘要：規范名稱定義，便于維護。譬如關于的定義在格式化的中會聲明為，而在基本樣式的中又可能會聲明所以在中會出現多次定義。盡量減少連接數和的大小。基于版本的使用目前使用較廣的是版本和，其中的最新版本是的最新版本。隨著CSS3和HTML5的流行，我們的WEB頁面不僅需要更人性化的設計理念，而且需要更酷的頁面特效和用戶體驗。作為開發者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...

Tony_Zby 2019-07-01 10:23 評論0 收藏0