用空格還是用 Tab 鍵?Google 推出《JavaScript 指南》解答程式白痴問題!

Google 的工程師大大為了幫助剛入手 JavaScript 者寫出乾淨、易懂的代碼,提供了一個獨具特色的教程《JavaScript 指南》,而本文作者丹尼爾西蒙斯,一位 web 開發人員/Java愛好者精心總結了Google 推出的這份指南中最有趣、最有用的十三條規則。
評論
評論

本篇來自合作媒體 36kr,原文來自 Medium 標題「google publishes a javascript style guide here are some key lessons」。

Google 的工程師大大為了幫助剛入手 JavaScript 者寫出乾淨、易懂的 code,提供了一個獨具特色的教學《JavaScript 指南》,而本文作者丹尼爾西蒙斯,一位 web 開發人員/Java 愛好者精心總結了 Google 推出的這份指南中最有趣、最有用的十三條規則。

JS 具有強大的靈活性和包容性,因此,JS 的編寫具有不同的風格,因此如何保證你的原始碼在編寫過程中保持著統一的風格才是編寫 JS 的過程中需要注意的。

Google 和 Airbnb 使用著兩種最流行的編寫規則,它們對細節的把關深深的影響著我,從一個個的標點到頁面的佈局,扣著一個個的小細節,這也深深的影響了我在寫 JS 過程中的一些習慣。以下是我挑選的 Google JS 指南中最有趣、有用的十三條規則。

我將針對每一個規則都會給一個總體的敘述,然後再進行詳細的敘述,結合自身的開發經歷,給出一些實用的介紹,如果條件允許,還有一些相關的例子給大家分享一下。

用空格還是用 Tab 鍵?

除了行終止符之外,ASCII 字符 (0x20) 是在原始檔案中出現的唯一空白字符。這意味著 Tab 鍵不用於縮排。

因此,你應該使用空格來實現你的設計而不是 Tab 鍵,而且只要鍵入兩個空格就可以,而不是四個空格。

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

必不可少的分號

每個語句都必須以分號結束。不要為了省事使用自動分號插入。那會給你帶來後面很多不必要的麻煩的。

// bad let luke = {} let leia = {} [luke, leia].forEach(jedi => jedi.father = 'vader')
// good let luke = {}; let leia = {}; [luke, leia].forEach((jedi) => {   jedi.father = 'vader'; });

雖然我無法想像為什麼有人反對這個想法,但在 JS 中使用分號正在成為一種新的「空格與 Tab 鍵」的爭論。Google 是支援使用分號的,至於剛入行的還是建議跟著潮流走。

不要使用 ES6 模板

不要使用 ES6 模塊 (即導出和輸入關鍵字),因為它們的語義還沒有最終確定。

// Don't do this kind of thing yet:
<em class="markup--em markup--pre-em">//------ lib.js ------</em> export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } <em class="markup--em markup--pre-em">//------ main.js ------</em> import { square, diag } from 'lib';

中立態度的水平對齊

在 Google 提供的模板裡面,水平對齊並沒有提出很高的要求,還是比較隨意的。

水平對齊就是在目標模塊的周邊增加可變量的額外空格,使得目標出現在我們想讓他出現的位置上就可以。

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

不要使用 var 關鍵字

除非需要重新分配一個變量,否則將所有本地變量聲明為 const 關鍵字或 let 型。默認情況下使用 const。但是在使用 var 關鍵字的時候一定要慎重。

其實在平時學習中,我仍然看到人們在 StackOverflow 和其他地方的 code 示例中使用 var 型。我不知道其他人使用 var 是因為什麼,可能這只是一種老習慣垂死掙扎吧。

首選箭頭

個人感覺箭頭函數已經提供了簡潔的語法,並解決了許多困難。所以個人更喜歡箭頭函數而不是函數關鍵字,特別是巢狀函數。

說實話,我認為箭頭不僅功能很好,而且它們更簡潔,更美觀。而且,事實證明,它們也有很重要的作用。、

// 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}?`; }

 

不要對長字符串使用斷行

在普通或模板字符串中不要使用行延續 (也就是說,在字符串結尾以反斜杠結束一行字)。儘管 ES5 允許這樣做,但如果在斜杠之後出現任何尾隨空格,那麼它就會導致棘手的錯誤,而且對新手來說不太明顯。

// bad (sorry, this doesn't show up well on mobile) 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.';

有趣的是,這是 Google 和 Airbnb 意見不同的規則 ( 這是 Airbnb 的規範 )。雖然 Google 推薦連接更長的字符串 (如下所示),但 Airbnb 的風格指南建議基本上什麼都不做,並且允許長字符串在需要的時候繼續使用。

// bad (sorry, this doesn't show up well on mobile) 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”是“for 循環”的首選類型

在 ES6 中,語言現在有三種不同的 for 循環。工程師是可以使用所有的循環,但在可能的情況下應該首選 for-of 循環。

我個人感覺 for 更適合於對象,而 for of 更適合於數組。只是適合不同的風格。雖然 Google 的規範並不一定與這個想法相矛盾,但是,可以看出 Google 對於這個迴圈還是情有獨鍾的。

不要使用 eval()

不要使用 eval 或函數 (…string) 構造函數 (程式碼載入器除外)。這些特性可能是危險的,在 CSP 環境中根本不起作用。

eval() 的 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

常數應該以全部大寫命名,並且以底線分隔。

常數名稱使用類似於 CONSTANT_CASE 的表示方法: 所有大寫字母,用底線隔開。

如果可以絕對確定變量不改變,就可以使用常數來定義,這樣也可以表示某個變量在整個過程中不會發生改變。

這個規則的一個特例就是,如果這個變量是函數特有的話,最好是申名在函數的空間裡面。

每個變量獨立對待

這沒有什麼好介紹的,直接上 code:

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

特別注意使用單引號,而不是雙引號

普通的字符串是用單引號 (‘) 來分隔的,而不是雙引號 (")。

提示: 如果字符串包含單引號字符,請考慮使用模板字符串,以避免誤導。

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

 

最後的總結

正如我一開始所說的,這些不是唯一的標準。Google 只是眾多科技巨頭中的一個,而這些只是眾多工程師總結出來的經驗而已。

看看 Google 這樣的公司提出的風格建議還是比較有意義的,它僱傭了很多聰明的人,他們花了大量時間研究如何編寫優秀的代碼。

如果你想遵循「Google 相容的開源碼」的指導方針,你可以遵循這些規則——但是,你要是有自己的喜好,那很棒,你可以自由地放飛自我。

我個人認為,在很多情況下,Airbnb 的規範比 Google 更有吸引力。不過無論對這些特定的規則採取何種立場,我們在編寫任何類型的代碼時,唯一的要求就是要保持風格上的一致性。


上雲猶如太空探險之旅,iKala Cloud AIOps Services協助企業輕鬆穿梭多雲環境

人類從上個世紀積極探索外太空,為了將太空人送上天際必須克服各式挑戰,而現代企業要從「地端」飛向「雲端」,困難程度有過之而無不及。iKala Cloud AIOps Services 提供多項關鍵服務,幫助 IT 團隊輕鬆悠遊多雲環境。
評論
評論

探索外太空,曾經是國際間的科技競賽,近年 Tesla 創辦人馬斯克更準備把太空旅行當成商業服務,預計 2026 年要帶著人類登陸火星。完成一趟星際旅行,需仰賴嶄新的科技及跨科學精密計算,但你知道嗎?現代企業要從「地端」飛上「雲端」,其實挑戰程度不亞於飛向太空。

對企業資訊管理者來說,有限的 IT 資源無法應付繁重的維運項目,加上同時管理公私有雲架構更顯困難、資安管理複雜,例如需要人工執行過濾警示,各種大大小小挑戰不勝枚舉。換言之,企業想航行雲端,就像打造火箭需要龐大資源及人力。不過,現在有更輕鬆穿梭雲端的方式,就是使用雲端技術服務商 iKala 所提供的 AIOps Services(自動化雲端託管服務)

火箭升空前的全盤規劃:iKala AIOps 擬定系統架構規劃、教育訓練

完成一趟太空之旅,必須做足各種研究,例如精準計算飛行軌道、降落定位點、燃料耗用數、與地球通訊設定…等。

對沒有雲端架構經驗的企業來說,就如同當時的科學家,必須用土法煉鋼的方式檢查數據是否有誤。換言之,企業 IT 在升級之前,就需要有經驗的「雲端顧問」來釐清需求、協助規劃「升雲」之旅。而 iKala 就是企業的最佳雲端顧問,旗下 iKala Cloud AIOps Services 會搭配一位專責的技術客戶經理,協助企業提供即時的技術服務與專業建議。

究竟 IT 升級之前,iKala Cloud AIOps Services 有哪些服務?首先是「系統設計規劃」,涵蓋系統架構規劃書、系統上線/遷移計畫書,可因應客戶產業需求,提供對應的解決方案以及顧問服務。而越來越多企業會使用到 Google 的雲端資源,iKala 也有提供 Google 雲端平台訓練服務。

GCP 教育訓練課程多元,包含 GCP 基礎架構(網路設定規劃、權限控管、計算資源等)、大數據與機器學習(大數據分析 Pipeline、BigQuery、ML 模型訓練與應用)、軟體開發技術與流程(容器化、CI/CD、DevOps)等。因為 iKala 團隊取得 10 多項 Google 專業技術證照,才能在企業規劃雲端轉型的前期就一步到位,規劃出整體藍圖,提供更全面的解決方案建議。

火箭升空中的精密操作:iKala AIOps 輔助即時技術維運、資安管理

當火箭準備就緒、升空倒數之際便是決定這趟太空之旅能否成功的關鍵時刻。從太空人的行前訓練與身體檢查,到火箭的引擎測試完成,如果有靜電或一點火花都可能引發爆炸事故。光是在升空階段,太空總部就要有結構、熱控、姿態控制、資料處理、電能、遙傳指令、推進以及飛行軟體等龐大的系統工程師在旁待命。

換言之,企業 IT 移轉雲端過程就像火箭發射的當下,需要有專業、經驗足夠的工程師,才能即時協助企業順利上雲,甚至快速排除緊急的狀況。對此,iKala Cloud AIOps Services 提供兩大關鍵的幫助:技術維運、資訊安全管理。

iKala Cloud AIOps Services 的技術維運服務內容,提供 7 x 24 的 Help Desk,像是緊急 GCP 問題報修、產品使用技術諮詢;或是事故管理,如搭建監控系統、設定規劃告警政策、規劃日誌收集與留存。每月也會提供企業維運報告,報告書有營運效率檢討、流程優化、新服務項目、營運系統建議等。

至於資訊安全管理方面,除了基本的 GCP 專案權限控管掃描、應用程式 OWASP(Open Web Application Security Project)前 10 大項目資安弱點掃描,同時也針對近年相當受重視的 DDoS 防護,iKala 可協助企業導入 GCP 平台的 DDOS 防禦機制。iKala 掌握多年軟體開發和雲端管理經驗,可分享給客戶 DevOps、AI 第一手實務的作法與經驗。

火箭升空後啟動自動導航:iKala AIOps 提供 AI 自動化監控、帳務管理

當火箭成功升空後,太空人為了執行下一階段任務,這時候火箭就需要轉換成自動駕駛模式,或在探索其他星球時,出動機器人來協助執行人力無法負荷的任務,讓太空人專心處理更關鍵的工作。換言之,上雲後的 IT 架構就像升空後的火箭,應該減少 IT 人員的負擔,甚至不需浪費例行時間,就能夠快速掌握整體資訊系統的運作狀況。

不過要讓 IT 架構像火箭具備自動駕駛功能,勢必需要相當高的技術門檻,而 iKala Cloud AIOps Services 正好有相對應的服務。如此一來,IT 人員的生產力就能投入在更具商業價值的研發專案,讓 IT 部門轉型成可創造產值的單位,而非單純的後勤支援角色。

盤點 iKala Cloud AIOps Services 在此環節共有三大類服務。其中一項是 AI 自動化監控與通報服務,幫助 IT 成員主動監控系統,掌握是否有異常操作狀況。其二是帳務方面的管理,幫助企業產出雲端服務月用量帳務分析報告,針對軟體授權需求,整合出帳至  Marketplace 與第三方服務商,自動化做到 License 採購管理。

第三項則是針對服務級別協定(SLA)iKala Cloud AIOps Services 提供 24 x 7、5 x 8 兩種模式,在重大 GCP 服務異常中斷服務時,提供電話、e-mail 聯繫。而且每月會舉辦 1 次月會(以 on-site 或遠端視訊會議方式)提交書面報告。目前 iKala 的企業客戶服務超過 400 多家、涵蓋數 10 種產業,可說是企業成功上雲,最能安心託付的合作夥伴。 

事實上,雲端託管服務(CMS)是目前最夯的新趨勢,根據市調公司 MarketsandMarkets Research 報告指出,全球雲端託管服務的市場規模,預計從 2020 年的 624 億美元,到 2025 年成長至 1,162 億美元,複合年增長率(CAGR)為 13.3%。代表未來有大量企業採用 CMS,以降低 IT 基礎設施的投資成本及風險,藉此提升企業營運的競爭力。

由此看來,企業的數位轉型,就像上個世紀的太空軍備競賽一樣。「時間就是決勝點」,越晚起步的公司與其他數位能力領先群的企業相比,差距只會越來越大。現在就攜手 iKala 嘗試 iKala Cloud AIOps Services,打造穩定的 IT 系統、邁向數據驅動的商業模式,讓企業在數位世代站穩腳步,輕鬆穿梭多雲之間。

了解更多 iKala Cloud AIOps Services