拯救一切強迫癥 - 讀《撰寫可維護的 JavaScript》（一）
本文寫于 2020 年 4 月 24 日
我在小學的時候就有接觸過編程，所以讀大一的時候 C 語言還算是輕車熟路，自然會有很多同學給我看他們的代碼，麻煩我幫助他們找一找 bug，
我代碼拿到手的第一件事兒是啥？
重排代碼格式！（相信大家基本上大學學 C 語言都用的是 VC++，并沒有代碼自動格式化功能，現在我極力推薦 prettier 進行自動格式化）
通常我看到的代碼都是這樣的：
if (wl && wl.length) {
for (i = 0, l = wl.length; i < l; ++i) {
p = wl[i]
type = Y.Lang.type(r[p])
if (s.hasOwnProperty(p)) {if (merge && type == 'object') {
Y.mix(r[p], s[p])
} else if (ov || !pinr) {
r[p] = s[p]
}
}
}
}
這種代碼人類幾乎沒有辦法讀懂！
老話說得好：代碼是給人讀的，只是偶爾給機器看一下，
讓我們來重置一下縮進：
if(wl && wl.length){
for(i=0, l=wl.length; i < l; ++i) {
p = wl[i];
type = Y.Lang.type(r[p]);
if(s.hasOwnProperty(p)){
if(merge && type == 'object'){
Y.mix(r[p], s[p]);
} else if (ov || !(pinr)){
r[p] = s[p];
}
}
}
}
代碼瞬間變得易于閱讀了！
01 縮進
接下來我們來看一看書中對于縮進的觀點，
使用制表符縮進
每一個縮進層級都代表一個單獨的制表符，也就是一個制表符一個縮進，兩個制表符兩個縮進，以此類推，
他的好處在于，編輯器可以直接修改制表符的長度，可長可短，隨心所欲，
但是缺點在于系統對于制表符的解釋不一樣，我們在 windows、macOS、Linux 中看到的制表符可能都不一樣，
使用空格縮進
有幾種做法：2 個空格表示一個縮進、4 個空格表示一個縮進、8 個空格表示一個縮進，
很多團隊經常會選擇 4 個空格，因為這是一種折中的方案，
在文本編輯器中，我們可以配置在敲擊 tab 時，自動插入 n 個空格，這樣，不管在哪里打開，代碼都會是一樣的，
我們看一些著名團隊的選擇——
制表符：
- jQuery
- Dojo
空格：
- Dauglas Crockford 使用 4 個空格字符的縮進；
- Sprout Core 使用 2 個空格的縮進；
- Goolge 的 JavaScript 使用 2 個空格的縮進，
作者個人推薦使用四個空格作為一個縮進層級，
無論如何，選擇了其中一種，就一直用下去，千萬不要在一個檔案里混用！
02 陳述句結尾
作者認為應該加分號，但是我個人不喜歡加分號，
JS 又一個叫做 Automatic Semicolon Insertion 機制，叫做自動分號插入機制，但是 ASI 的規則非常非常的復雜，所以我們很難預料他會在哪里插入分號，包括 jQuery、Google、Dojo 都是推薦使用分號結尾，
03 一行的長度
很多很多的編程規范提到過，一行長度不宜超過 80，
這個規則是因為當年的文本編輯器，單行字數限制就是 80，
但是現在，即使我們的螢屏寬了、解析度高了，還是推薦大家使用 80 的長度限制，
看看大公司的規范：
- Java 語言編程規范，80；
- Android 開發者編碼風格指南，80；
- 非官方的 Ruby 編程規范：80；
- python，79，
在超過了 80 的長度之后就需要換行了，比如這樣：
callAFunction(document, element, window, "somestringvalue", true, 123,
navigator);
在換行后應該追加一個縮進
要注意，不要讓運算子或者逗號換行了：
callAFunction(document, element, window, "somestringvalue", true, 123
, navigator);
04 空行
為了保證代碼的可讀性，我們會適當的空上幾行，
if(wl&&wl.length){
for(i = 0, l = wl.length; i<l; ++i) {
p = wl[i];
type = Y.Lang.type(r[p]);
if(s.hasOwnProperty(p)){
if(merge&&type=='object') {
Y.mix(r[p],s[p]);
} else if (ov || !(pinr)) {
r[p]=s[p];
}
}
}
}
if (wl && wl.length) {
for (i = 0, l = wl.length; i < l; ++i) {
p = wl[i]
type = Y.Lang.type(r[p])
if (s.hasOwnProperty(p)) {
if (merge && type == 'object') {
Y.mix(r[p], s[p])
} else if (ov || !pinr) {
r[p] = s[p]
}
}
}
}
（未完待續）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/111877.html
標籤：JavaScript
上一篇：js原型原型鏈