用空格還是用 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 更有吸引力。不過無論對這些特定的規則採取何種立場,我們在編寫任何類型的代碼時,唯一的要求就是要保持風格上的一致性。


圖解智慧國家四大關鍵科技,從不同角度帶你了解台灣的科技應用實力

大家都知道台灣有座半導體護國神山,也聽過許多媒體對台灣科技實力的盛讚,但台灣的科技實力到底強不強?我們從四個面向帶你看台灣作為「智慧國家」到底有什麼實力!
評論
評論

大家都知道台灣有座半導體護國神山,也聽過許多媒體對台灣科技實力的盛讚,但台灣的科技實力到底強不強?自己說不如讓國際單位做的調查更客觀顯示。瑞士洛桑管理學院(IMD)每年9月公布的世界數位競爭力(World Digital Competitiveness Ranking)評比,最近一次報告2021年台灣在全球64個主要國家及經濟體當中排名第8,獲得歷年來最佳名次。

而且值得關注的是,支持數位競爭力的核心要素之一,也就是「科技」競爭力。IMD評比報告揭露台灣拿下全球第2的佳績,從2018年的第11名年排名持續上升,顯見台灣無愧於科技強國之名。


科技小百科:
瑞士洛桑管理學院(IMD)是一個長期研究國家與企業競爭力,在國際上具盛名及公信力的評比機構,並自1989年起發布「世界競爭力年報」World Competitiveness Yearbook,其評比報告與調查結果更是各國政府擬定相關政策之參考。IMD每年會定期公布兩份競爭力評比報告,其一是「世界競爭力年報」,每年在6月公布,2022年台灣在63個受評比國家中排名全球第7名。另一份報告為「世界數位競爭力評比」World Digital Competitiveness Ranking,每年在9月底公布,本篇文章引用的資料為這份兩份研究。


也因為科技與國家發展息息相關,有哪些技術是台灣不為人知的優勢?或是未來產業可大力投資布局的領域?我們找出其中四大項與智慧國家最有關的科技,展現台灣具備強勁的科技能量,或許你已經受惠,也或許你能從其中找到發展的機會。

關鍵科技一、融合海陸空領域的多維通訊

隨著國家管理範圍逐漸擴大,通訊範圍多元且彼此關聯,相關科技如低軌衛星、5G通訊、海底電纜等,形成環環相扣的多維通訊聯網。

仔細洞察2021年的IMD報告,台灣在「行動寬頻的用戶比例」這項指標,拿下全球第1的傲人成績。顯見台灣在通訊基礎建設的投資及普及率,是走在全球領先位置。

尤其5G/6G關聯科技更是未來多維通訊的具舉足輕重的地位,原因是5G衍生的價值鏈相當廣泛,舉凡從晶片、模組、終端、邊緣、系統、到應用服務,可形成完整生態圈。為了強健台灣5G專網的自主技術與供應鏈,從2018年先後成立5G產業發展聯盟、5G垂直應用聯盟、以及5G Open Networking平台,逐漸形成5G國家隊。

除了把5G領先國視為戰略目標,當創新技術落地,更能帶來龐大商機。根據工研院的預估,將5G的小基站、邊緣運算、網路虛擬化等關鍵產品、模組、元件加總起來,2025年的市場規模上看2,510億美元(約新台幣7.5兆元),其他國家還在積極推動5G聯網建設,顯見相關商機仍有相當大發展空間。

關鍵科技二、新型態數位經濟與網路服務

邁向Web 3.0的交叉點,元宇宙被視為下一代網際網路的新機會,市調機構Gartner預測,2026年全世界將有25%的人口,每天至少有一小時投入元宇宙虛擬世界,進行工作、社交、教育、購物、娛樂等活動,並藉由虛擬貨幣、NFT進行數位資產的交易,虛擬經濟逐漸成形。

所謂元宇宙,需要以5G/6G高速網路為基礎,透過VR頭盔/眼鏡作為進入3D虛擬世界的載體,在元宇宙的各種互動體驗則需仰賴AI運算、雲端/邊緣儲存、區塊鏈等核心技術支援。人們在元宇宙內可以滿足從現實世界做不到的事情,形成穿梭虛擬、現實之間的生活體驗與商業模式。

近七成投入元宇宙相關應用的企業,認為元宇宙在未來5年一定會蓬勃發展,虛擬音樂會、虛擬時裝秀、媒體及產品聯名展示活動,將是元宇宙優先發生的商業體驗。

那麼台灣要投入元宇宙有何利基?解析元宇宙供應鏈版圖,主要可分為晶片、光電、通訊、AR/VR裝置、內容以及AI技術,台灣科技可從硬體方面,包含晶片、感測IC、光學零組件、伺服器等擅長領域切入。像是大家熟知的半導體大廠台積電,對於相關晶片的供應就至關重要,另外光電產業也有揚明光、玉晶光、中光電等企業,讓投影技術更精緻,再來連接元宇宙的通訊技術,也有聯亞來支援,而裝置軟硬體、AI技術則是有創意、世芯、智原等企業投入,最後想到AR/VR集大成者,就不能遺漏宏達電在這一塊的耕耘,同樣威盛電、佐臻、未來市(XRSPACE)等品牌也積極佈局,可見台灣已有完整的供應鏈,接下來有志於加入元宇宙的廠家,不妨從自身的專長去思考,相信不論是哪個領域的企業,都能有更多的創新、應用內容投入,完善整個元宇宙生態。

關鍵科技三、疫後時代興起的智慧型代理人 

近年因疫情持續延燒,越來越多領域開始導入「智慧型代理人」,像是零售業者引進半自動化機器,協助人力處理訂單、點餐;又或是醫院使用機器人,藉由AI辨識功能分擔部分醫護工作。

所謂智慧型代理人,以它所知的知識範圍內,自主完成人類所給予的指令任務。智慧型代理人發展至今,能協助人類的廣度、深度越來越多,主要是受惠機器學習的技術更為先進,加上其他的自動規劃、互相協調等演算法的成熟,讓智慧型代理人成為下一波產業發展重點。

世界先進國家紛紛把AI納為國家產業重要發展策略,台灣從2018年就推出「台灣AI行動計畫」,全面啟動產業AI化。發展至今,AI應用已從測試階段逐步應用於各式產業,資策會統計發現,掌握AI技術的新創企業在台灣有300家,逐漸摸索出不同的商業策略與獲利模式。

尤其資通訊、醫療照護是台灣兩大擁有頂尖人才的雙軸產業,在疫情之下,就可以看到醫療+科技所衍生的智慧型代理人應用。像是過去為了解決醫療量能不足,開發「5G智慧防疫機器人」,用來隔離病房消毒、運送餐盒及藥品物資,比傳統人力消毒方式有效節省50%時間,還能降低醫護人員感染風險,讓醫事工作更有效率。

關鍵科技四、資訊安全網保護每個人數位資產

我國面臨網路犯罪、駭客入侵政府、機關,甚至竊取個人資料事件持續增加,如何保護國民安心使用數位科技、保障財產安全將是未來重要方向。隨著AI普及所衍生的龐大資料量之隱私及資安問題,成為棘手的挑戰。從國際AI資安發展現況來看,歐盟在2021年提出人工智慧規則草案(Artificial Intelligence Act),鼓勵值得信賴且道德的AI進行研發與應用。微軟更在今(2022)年禁止提供AI推測情緒技術,並制定「負責任AI標準第二版」、Google則停止AI機器人具有自我意識、能與人類溝通等爭議事件,這些做法也都反映美歐在立法之際,業者也在努力自行節制敏感AI技術。

AI資安,是挑戰也是機會。未來,台灣政府與企業也須密切關注美歐相關草案的立法動態,找出AI規範的共同點,以此界定使用AI產品與服務之要求;因此,AI資安不僅需透過科技來防禦,更需要治理與法規,降低AI所帶來的衝擊。

另外,針對5G資安議題,台灣有展開大型科技防禦策略,包含5G資安防護系統、跨機關資安聯防。5G資安防護系統致力確保業者使用的5G系統具備安全、可靠、信賴,與國內5G專網業者進行服務驗證,以強化國產5G系統的整體資安防護能力。跨機關資安聯防的目標放在建立政府與民間的資安聯防體系,藉由橫向整合跨部會,全面提供威脅情資,減少機關隱匿資安事件,降低事件誤報與漏報。

持續提升台灣的科技能量 打造全方位的智慧國家

圖片資料來源:IMD 2022 世界競爭力年報

台灣的科技能量持續提升,從2022年的IMD世界競爭力年報可發現,而且該報告還指出我國擁有高素質勞動力、經濟活力、企業治理能耐、高教育水準等優勢。上述四項與智慧國家高度關聯的新興科技,涵蓋「數位基盤、數位創新、數位包容」等元素,如何借助科技打造創新、包容的社會,在台灣強勁的科技應用產業鏈上,補強創新的能量,並延續發展優勢項目,將是台灣要持續努力的方向。

了解更多智慧國家方案
看更多智慧國家相關報導

行政院科技會報辦公室 廣告