武漢互贏網(wǎng)絡(luò)科技股份有限公司
為企業(yè)創(chuàng)品牌·從營(yíng)銷型網(wǎng)站建設(shè)開始·互贏懂技術(shù)·更懂品牌營(yíng)銷
24小時(shí)熱線
159 7210 9576027-89992189
為企業(yè)創(chuàng)品牌·從營(yíng)銷型網(wǎng)站建設(shè)開始·互贏懂技術(shù)·更懂品牌營(yíng)銷
24小時(shí)熱線
159 7210 9576027-89992189
Google為了那些還不熟悉代碼規(guī)范的人發(fā)布了一個(gè)JS代碼規(guī)范。其中列出了編寫簡(jiǎn)潔易懂的代碼所應(yīng)該做的最佳實(shí)踐。
代碼規(guī)范并不是一種編寫正確JavaScript代碼的規(guī)則，而是為了保持源代碼編寫模式一致的一種選擇。對(duì)于JavaScript語言尤其如此，因?yàn)樗`活并且約束較少，允許開發(fā)者使用許多不同的編碼樣式。
Google和Airbnb各自占據(jù)著當(dāng)前最流行的編碼規(guī)范的半壁江山。如果你會(huì)在編寫JS代碼上投入很長(zhǎng)時(shí)間的話，我強(qiáng)烈推薦你通讀一遍這兩家公司的編碼規(guī)范。
接下來要寫的是我個(gè)人認(rèn)為在Google的代碼規(guī)范中，與日常開發(fā)密切相關(guān)的十三條規(guī)則。
它們處理的問題都非常具有爭(zhēng)議性，包括tab與空格、是否強(qiáng)制使用分號(hào)等等。還有一些令我感到驚訝的規(guī)則，往往最后都改變了我編寫JS代碼的習(xí)慣。
對(duì)于每一條規(guī)則，我都會(huì)先給出規(guī)范的摘要，然后引用規(guī)范中的詳細(xì)說明。我還會(huì)舉一些適當(dāng)?shù)姆蠢撟C遵守這些規(guī)則的重要性。
除了每一行的終止符序列，ASCII水平空格符（0x20）是唯一一個(gè)可以出現(xiàn)在源文件中任意位置的空格字符。這也意味著，tab字符不應(yīng)該被使用，以及被用來控制縮進(jìn)。
規(guī)范隨后指出應(yīng)該使用2個(gè)，而不是4個(gè)空格帶實(shí)現(xiàn)縮進(jìn)。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// bad
function foo() {
????let name;
}
// bad
function bar() {
?let name;
}
// good
function baz() {
??let name;
}
|
每個(gè)語句必須以分號(hào)結(jié)尾。不允許依賴于JS自動(dòng)添加分號(hào)的功能。
盡管我不明白為什么會(huì)有人反對(duì)這個(gè)規(guī)則，但目前分號(hào)的使用問題顯然已經(jīng)像“空格 vs tab”這個(gè)問題一樣產(chǎn)生了巨大的爭(zhēng)議。而Google對(duì)此表示分號(hào)是必須的，是不可省略的。
|
1
2
3
4
5
6
7
8
9
10
|
// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')
// good
let luke = {};
let leia = {};
[luke, leia].forEach((jedi) => {
jedi.father = 'vader';
});
|
由于ES6模塊的語義尚不完全確定，所以暫時(shí)不要使用，比如export和import關(guān)鍵字。一旦它們的相關(guān)規(guī)范制定完成，那么請(qǐng)忽略這一條規(guī)則。
|
1
2
3
4
5
6
7
8
9
10
11
|
// 暫時(shí)不要編寫下面的代碼：
//------ lib.js ------
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
|
譯者注：感覺遵守這條規(guī)范不大現(xiàn)實(shí)，畢竟現(xiàn)在已經(jīng)有babel了。而且使用React時(shí)，最佳實(shí)踐就是使用ES6模塊吧。
Google的代碼規(guī)范允許但不推薦對(duì)代碼進(jìn)行水平對(duì)齊。即使之前的代碼中做了水平對(duì)齊的處理，以后也應(yīng)該避免這種行為。
對(duì)代碼進(jìn)行水平對(duì)齊會(huì)在代碼中添加若干多余的空格，這讓相鄰兩行的字符看上去處于一條垂直線上。
|
1
2
3
4
5
6
7
8
9
10
|
// bad
{
tiny: 42,
longer: 435,
};
// good
{
tiny: 42,
longer: 435,
};
|
使用const或let來聲明所有局部變量。如果變量不需要被重新賦值，默認(rèn)應(yīng)該使用const。應(yīng)該拒絕使用關(guān)鍵字var。
我不知道是因?yàn)闆]有人能說服他們，還是說因?yàn)榕f習(xí)難改。目前我仍能看到許多人在StackOverFlow或其他地方使用var聲明變量。
|
1
2
3
4
|
// bad
var example = 42;
// good
const example = 42;
|
箭頭函數(shù)提供了一種簡(jiǎn)潔的語法，并且避免了一些關(guān)于this指向的問題。相比較與function關(guān)鍵字，開發(fā)者應(yīng)該優(yōu)先使用箭頭函數(shù)來聲明函數(shù)，尤其是聲明嵌套函數(shù)。
坦白說，我曾以為箭頭函數(shù)的作用只在于簡(jiǎn)潔美觀。但現(xiàn)在我發(fā)現(xiàn)原來它們還有更重要的作用。
|
1
2
3
4
5
6
7
8
9
10
11
|
// bad
[1, 2, 3].map(function (x) {
const y = x + 1;
return x * y;
});
// good
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});
|
在處理多行字符串時(shí)，模板字符串比復(fù)雜的拼接字符串要表現(xiàn)的更出色。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// bad
function sayHi(name) {
return 'How are you, ' + name + '?';
}
// bad
function sayHi(name) {
return ['How are you, ', name, '?'].join();
}
// bad
function sayHi(name) {
return `How are you, ${ name }?`;
}
// good
function sayHi(name) {
return `How are you, ${name}?`;
}
|
在JS中，
也代表著續(xù)行符。Google的代碼規(guī)范不允許在不管是模板字符串還是普通字符串中使用續(xù)行符。盡管ES5中允許這么做，但如果在后跟著某些結(jié)束空白符，這種行為會(huì)導(dǎo)致一些錯(cuò)誤，而這些錯(cuò)誤在審閱代碼時(shí)很難注意到。
這條規(guī)則很有趣，因?yàn)锳irbnb的規(guī)范中有一條與之不相同的規(guī)則
Google推薦下面這樣的寫法，而Airbnb則認(rèn)為應(yīng)該順其自然，不做特殊處理，該多長(zhǎng)就多長(zhǎng)。
|
1
2
3
4
5
6
7
8
9
10
|
// bad (建議在PC端閱讀)
const longString = 'This is a very long string that
far exceeds the 80 column limit. It unfortunately
contains long stretches of spaces due to how the
continued lines are indented.';
// good
const longString = 'This is a very long string that ' +
'far exceeds the 80 column limit. It does not contain ' +
'long stretches of spaces since the concatenated ' +
'strings are cleaner.';
|
for...of在ES6中，有3種不同的for循環(huán)。盡管每一種有它的應(yīng)用場(chǎng)景，但Google仍推薦使用
for...of。
真有趣，Google居然會(huì)特別指定一種for循環(huán)。雖然這很奇怪，但不影響我接受這一觀點(diǎn)。
以前我認(rèn)為for...in適合遍歷Object，而for...of適合遍歷數(shù)組。因?yàn)槲蚁矚g這種各司其職的使用方式。
盡管Google的規(guī)范與這種使用方式相沖突，但Google對(duì)for...of的偏愛依然讓我覺得十分有趣。
除非是在code loader中，否則不用使用eval或是Function(…string)結(jié)構(gòu)。這個(gè)功能具有潛在的危險(xiǎn)性，并且在CSP環(huán)境中無法起作用。
MDN中有一節(jié)專門提到不要使用eval語句。
|
1
2
3
4
5
6
7
8
|
// bad
let obj = { a: 20, b: 30 };
let propName = getPropName(); // returns "a" or "b"
eval( 'var result = obj.' + propName );
// good
let obj = { a: 20, b: 30 };
let propName = getPropName(); // returns "a" or "b"
let result = obj[ propName ]; // obj[ "a" ] is the same as obj.a
|
常量命名應(yīng)該使用全大寫格式，并用下劃線分割
如果你確定一定以及肯定一個(gè)變量值以后不會(huì)被修改，你可以將它的名稱使用全大寫模式改寫，暗示這是一個(gè)常量，請(qǐng)不要修改它的值。
遵守這條規(guī)則時(shí)需要注意的一點(diǎn)是，如果這個(gè)常量是一個(gè)函數(shù)，那么應(yīng)該使用駝峰式命名法。
|
1
2
3
4
|
// bad
const number = 5;
// good
const NUMBER = 5;
|
每一個(gè)變量聲明都應(yīng)該只對(duì)應(yīng)著一個(gè)變量。不應(yīng)該出現(xiàn)像
let a = 1,b = 2;這樣的語句。
|
1
2
3
4
5
6
|
// bad
let a = 1, b = 2, c = 3;
// good
let a = 1;
let b = 2;
let c = 3;
|
只允許使用單引號(hào)包裹普通字符串，禁止使用雙引號(hào)。如果字符串中包含單引號(hào)字符，應(yīng)該使用模板字符串。
|
1
2
3
4
5
6
7
8
|
// bad
let directive = "No identification of self or mission."
// bad
let saying = 'Say it ainu0027t so.';
// good
let directive = 'No identification of self or mission.';
// good
let saying = `Say it ain't so`;
|
公司名稱：武漢互贏網(wǎng)絡(luò)科技有限公司
公司地址：武漢市武昌區(qū)靜安路6號(hào)創(chuàng)意產(chǎn)業(yè)園408室
客 服QQ：562257562 848467306
咨詢電話：027-89992189
業(yè)務(wù)熱線：15972109576
公司網(wǎng)站：www.whtlnet.com
武漢做網(wǎng)站 武漢網(wǎng)站建設(shè) 武漢網(wǎng)站制作 武漢網(wǎng)絡(luò)公司 武漢網(wǎng)站開發(fā) 武漢建網(wǎng)站
最新動(dòng)態(tài)
生產(chǎn)小工單能給 生產(chǎn)管理帶來哪些好處？
武漢網(wǎng)站制作公司解鎖軟件開發(fā)能做什么？
營(yíng)銷型網(wǎng)站與普通網(wǎng)站有什么區(qū)別？——武漢網(wǎng)站建設(shè)
常見問題百寶箱
A2014，有位學(xué)妹不顧家人反對(duì)，在上海這個(gè)國(guó)際化大都市謀了一個(gè)公眾號(hào)助理的職位。斗志昂揚(yáng)地奮斗了 3 年，我眼看著她的內(nèi)容駕馭能力突飛猛進(jìn)，內(nèi)容質(zhì)量從三流到一流，職位
A文章主要分析了不同的視覺設(shè)計(jì)元素是如何影響網(wǎng)站用戶體驗(yàn)，希望通過文章的解讀能夠?qū)δ愕漠a(chǎn)品設(shè)計(jì)帶來些啟發(fā)。 也許是因?yàn)槲以谝曈X設(shè)計(jì)上沒有太多經(jīng)驗(yàn)，我發(fā)現(xiàn)
A雙贏系統(tǒng)建站系統(tǒng)，三網(wǎng)同步，建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng)，三網(wǎng)同步，建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng)，三網(wǎng)同步，建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng)，三網(wǎng)同步，建站推
027-89992189
掃一掃關(guān)注微信
Copyright 2013-2020 All Rights Reserved 武漢互贏網(wǎng)絡(luò)科技股份有限公司 鄂ICP備19027860號(hào)
