關於Google發布的JavaScript程式碼規格你要知道哪些

程式碼規格並不是一種編寫正確JavaScript程式碼的規則，而是為了保持原始程式碼編寫模式一致的一種選擇。這篇文章為大家介紹了關於Google發布的JavaScript程式碼規範你要知道哪些，有興趣的朋友一起看看吧

Google為了那些還不熟悉程式碼規格的人發布了一個JS程式碼規格。其中列出了編寫簡潔易懂的程式碼所應該做的最佳實踐。

程式碼規格並不是一種編寫正確JavaScript程式碼的規則，而是為了保持原始程式碼編寫模式一致的一種選擇。對於JavaScript語言尤其如此，因為它靈活且約束較少，允許開發者使用許多不同的編碼樣式。

Google和Airbnb各自佔據著當前最受歡迎的程式設計規範的半壁江山。如果你會在編寫JS程式碼上投入很長時間的話，我強烈建議你通讀一遍這兩家公司的程式設計規格。

接下來要寫的是我個人認為在Google的程式碼規格中，與日常開發密切相關的十三條規則。

它們處理的問題都非常具有爭議性，包括tab與空格、是否強制使用分號等等。還有一些令我感到驚訝的規則，往往最後都改變了我寫JS程式碼的習慣。

對於每一條規則，我都會先給予規範的摘要，然後再引用規範中的詳細說明。我也會舉一些適當的反例論證來遵守這些規則的重要性。

使用空格代替tab

除了每一行的終止符序列，ASCII水平空格符（0x20）是唯一一個可以出現在來源文件中任意位置的空格字元。這也意味著，tab字元不應該被使用，以及被用來控制縮排。

規格接著指出應該使用2個，而不是4個空格帶實作縮排。

// bad
function foo() {
∙∙∙∙let name;
}
// bad
function bar() {
∙let name;
}
// good
function baz() {
∙∙let name;
}

不能省略分號

每個語句必須以分號結尾。不允許依賴JS自動添加分號的功能。

儘管我不明白為什麼有人會反對這個規則，但目前分號的使用問題顯然已經像「空格 vs tab」這個問題一樣產生了巨大的爭議。而Google對此表示分號是必須的，是不可省略的。

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

由於ES6模組的語意尚不完全確定，所以暫時不要使用，例如export和import關鍵字。一旦它們的相關規範制定完成，那麼請忽略這條規則。

// 暂时不要编写下面的代码：
//------ 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';

譯者註：覺得遵守這條規範不大現實，畢竟現在已經有babel了。而且使用React時，最佳實踐就是使用ES6模組吧。

不建議程式碼水平對齊

Google的程式碼規格允許但不建議對程式碼進行水平對齊。即使在先前的程式碼中做了水平對齊的處理，以後也應該避免這種行為。

對程式碼進行水平對齊會在程式碼中添加若干多餘的空格，這讓相鄰兩行的字元看起來處於一條垂直線上。

// bad
{
 tiny:  42, 
 longer: 435, 
};
// good
{
 tiny: 42, 
 longer: 435,
};

杜絕var

#使用const或let來宣告所有局部變數。如果變數不需要被重新賦值，預設​​應該使用const。應該拒絕使用關鍵字var。

我不知道是因為沒有人能說服他們，還是說因為舊習難改。目前我仍能看到許多人在StackOverFlow或其他地方使用var宣告變數。

// bad
var example = 42;
// good
const example = 42;

優先使用箭頭函數

##箭頭函數提供了一個簡潔的語法，並且避免了一些關於this指向的問題。相比較與function關鍵字，開發者應該優先使用箭頭函數來聲明函數，尤其是聲明巢狀函數。

坦白說，我曾以為箭頭函數的作用只在於簡潔美觀。但現在我發現原來它們還有更重要的作用。

// 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;
});

使用模板字串取代連接字串

在處理多行字符串時，模板字串比複雜的拼接字串要表現的更出色。

// 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中， \也代表續行符。 Google的程式碼規範不允許在不管是模板字串還是普通字串中使用續行符。儘管ES5中允許這麼做，但如果在\後面跟著某些結束空白符，這種行為會導致一些錯誤，而這些錯誤在審閱程式碼時很難注意到。

這條規則很有趣，因為Airbnb的規範中有一條與之不相同的規則

Google推薦下面這樣的寫法，而Airbnb則認為應該順其自然，不做特殊處理，多長就多長。

// 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循环。尽管每一种有它的应用场景，但Google仍推荐使用for...of。

真有趣，Google居然会特别指定一种for循环。虽然这很奇怪，但不影响我接受这一观点。

以前我认为for...in适合遍历Object，而for...of适合遍历数组。因为我喜欢这种各司其职的使用方式。

尽管Google的规范与这种使用方式相冲突，但Google对for...of的偏爱依然让我觉得十分有趣。

不要使用eval语句

除非是在code loader中，否则不用使用eval或是Function(...string)结构。这个功能具有潜在的危险性，并且在CSP环境中无法起作用。

MDN中有一节专门提到不要使用eval语句。

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

常量的命名规范

常量命名应该使用全大写格式，并用下划线分割

如果你确定一定以及肯定一个变量值以后不会被修改，你可以将它的名称使用全大写模式改写，暗示这是一个常量，请不要修改它的值。

遵守这条规则时需要注意的一点是，如果这个常量是一个函数，那么应该使用驼峰式命名法。

// bad
const number = 5;
// good
const NUMBER = 5;

每次只声明一个变量

每一个变量声明都应该只对应着一个变量。不应该出现像let a = 1,b = 2;这样的语句。

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

使用单引号

只允许使用单引号包裹普通字符串，禁止使用双引号。如果字符串中包含单引号字符，应该使用模板字符串。

// bad
let directive = "No identification of self or mission."
// bad
let saying = 'Say it ain\u0027t so.';
// good
let directive = 'No identification of self or mission.';
// good
let saying = `Say it ain't so`;

总结

就像我在开头所说那样，规范中没有需要强制执行的命令。尽管Google是科技巨头之一，但这份代码规范也仅仅是用来当作参考罢了。

Google是一家人才汇聚的科技公司，雇佣着出色的程序员来编写优秀的代码。能够看到这样的公司发布的代码规范是一件很有趣的事情。

如果你想要实现一种Google式的代码，那么你可以在项目中制定这些规范。但你可能并不赞成这份代码规范，这时也没有人会阻拦你舍弃其中某些规则。

我个人认为在某些场景下，Airbnb的代码规范比Google的代码规范要出色。但不管你支持哪一种，也不管你编写的是什么类型的代码，最重要的是在脑海中时刻遵守着同一份代码规范。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Ajax发送和接收请求

ajax异步加载图片实例分析

浅析json与jsonp区别及通过ajax获得json数据后格式的转换

以上是關於Google發布的JavaScript程式碼規格你要知道哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！