iT邦幫忙

2022 iThome 鐵人賽

DAY 20
0
Modern Web

一步一腳印,我的前端工程師修煉系列 第 20

Day 20 | 撰寫易讀且好維護的程式,程式設計規範

  • 分享至 

  • xImage
  •  

前言
Web 應用程式佔客戶端 JavaScript 的比重越來越高,增加了使用 JavaScript 開發大型程式的機會。這意味者,開發者不能只是寫完程式就覺得:『好了,完成了!』伴隨開發完成而來的,是應用程式運作中將出現的錯誤修正、功能新增 / 更新等常態性的變更。

再變更程式時,首要任務就是『了解程式!』此時『閱讀』程式,可能比『寫』程式還更花時間:經過一段時間後,回頭再看自己寫的程式,可能都需要花時間回想,若是看他人的程式,當然需要更多時間了解。因此,撰寫漂亮 (易於閱讀) 的程式是很重要的。

何謂『最漂亮』的程式? 這概念可能過於抽象,其實只要遵循所謂程式設計規範,即可達成。程式設計規範從變數的命名規則、附加空白、縮排到註解的撰寫方法…等,都有統一的規則。遵循這些規則,就可達到維持程式『不骯髒』的最低限度目標。

JavaScript style guide (MDN) 的主要規範
下面列舉幾個『JavaScript style guide (MDN)』中的重要規範。要特別注意的是,此處的重點是『規範』而不是『語法規則』。

基本:
單行程式應不超過 80 個字元
於文件結尾處要換行
逗號 / 分號後要有空白
函數、物件等定義區塊前後應有空行
空白:
以 2 個空白表示縮排 (不使用 Tab)
使用空白區隔 2 個運算字
逗號 / 分號與關鍵字後,應有空白 (若在行尾則不用)
命名規則:
變數 / 函數名稱以開頭小寫英文的 cameClass 格式命名
常數名稱以整體大寫與下底線的格式命名
建構子 / 類別名稱以開頭大寫英文的 cameClass 格式命名
私有變數以『 _ 』開頭
事件處理函數以『 on 』開頭
其它:
所有變數都要宣告與初始化
不可重複宣告變數
建立陣列、物件時,以 […]、{…} 等常值語法宣告
不要比較布林值與 true / false
『 Google JavaScript Style Guide 』中有些規範與上面提及的部分重複,以下列出除前述之外,比較重要的項目。

.js 檔案名稱一律小寫
不要省略分號
『’』較『”』優先使用
不使用基本資料型態 (string、number、boolean 等) 的包裹物件
利用命名空間以最小化全域層級的名稱
表示區塊 {…} 的前面不換行
不要複寫內建物件的 prototype
不要使用 with / eval 指令
for…in 指令只用於關聯陣列 / 雜湊
上述規範不只能讓程式較容易閱讀,更必須遵循以撰寫『安全』的程式碼。


上一篇
Day 19 | 運算子和控制語法學習心得
下一篇
Day 21 | 好用的 git stash 相關指令介紹
系列文
一步一腳印,我的前端工程師修煉30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言