為什麼我要垂直對齊代碼(你也要如此!)

2020-12-17 開源中國

英文原文:Why I vertically align my code (and you should too!)

上周在 HackerNews,關於 Linux Kernel 代碼風格展開了有趣的討論。

在討論中,我就應不應該垂直對齊代碼發起了一場小小的聖戰。我完全支持!讓我細說端詳。

什麼是垂直對齊?

舉個小例子:

int robert_age = 32;int annalouise_age = 25;int bob_age = 250;int dorothy_age = 56;

下面的代碼更易於閱讀:

int robert_age     = 32;int annalouise_age = 25;int bob_age        = 250;int dorothy_age    = 56;

我掃一眼就能看到」bob_age」有點兒不正常。我不用多費事,就輕鬆地看出來它們都是整數。

這條意見還沒被廣為分享,因此我打算解釋一下,為什麼很多人認為這是一種有用的風格指南。

理解

90% 的編程工作是為了解決問題,剩下的 10% 的工作需要再用 90% 的時間用來理解問題是怎樣被解決的。注1

閱讀代碼和閱讀散文,有著極大的不同。我們期望作者能夠清晰地解釋他們的語句,而不是用他們選中的語言過於冗長地說些不相干的東東,我們都期待普通的語法風格。

的確,Kernel 代碼風格著重強調了這一點。你選擇變量命名的方式,和代碼的用途一樣重要。

考慮下面的代碼:

var thinG=doIt (thestuff,MORE_sTuff); /* LOL! */

即便你對代碼庫有深入理解,它也不是特別易讀的代碼行。

var totalBill = apply_tax (initialBill, taxRate);

對於清晰的應用程式,要藉助命名習慣、間隔和大寫,從而讓代碼更易於閱讀。這意味著,接手我們代碼的可憐傢伙,將用更少的時間來解密代碼,把更多時間放在理解上面。

為什麼使用等寬字體?

在所有著名的、老生常談的舌戰中,有兩個實力基本相當的陣營,即等寬字體 注2VS 比例字體注3 的爭論。

某些異教徒會對你說,比例字體是最棒的——無視這些異教徒吧。另一些異教徒則在他們爭論比例字體所具有的上等純潔度時,給你的心靈留下了不和諧——這些可憐的、受譴責的靈魂呀。

最終,還要歸結到可讀性。你覺得,什麼東西能夠最容易地幫助你理解代碼?為什麼 IDE 有著色方案——因此你能一眼看出「foo」是函數、常量、變量還是注釋。只要能讓你更快地理解這段代碼的用途,它就是好的東西!

這也是電子表格如此受歡迎的原因之一。列提高了可讀性。你可以快速地順著一列掃視,並能注意到某行和其它行是否存在明顯不同。

我們沒有工具

有趣的是,在 HackerNews 上的討論中,我面臨的最大批評與垂直對齊是否有用無關,而是我們的工具有多麼糟糕。

「這破壞了 diff 的可讀性和可用性。比如你修改了某個常量,需要快速追蹤因此引起的嚴重 bug。對於水平排列的代碼,diff 或許包含了所有修改過的行,從而掩蓋了關鍵修改。有一些忽視空格的變通方案,以及基於單詞的 diff,不過依本人愚見,不值得這麼麻煩。

——Andreas van Cranenburgh

……還有……

假如你有 50 行賦值語句,你把所有值都和最大的那個對齊了,那麼增加一個賦值語句,將迫使你更新 50 行代碼。我已經遇到過這些情形了,每當那時候,我就明白了,不要那樣對齊值是多麼地重要。

——scrollaway

這些論點在某些語境中是合理的,但是說明了需要更好的工具。

我想起了 Elastic Tabstops ——自動排列代碼塊的方法。

By Nick Gravgaard

工具能夠輕鬆容納這種工作方式。計算機就是為我們做單調、重複工作的,CPU 周期「浪費」在讓代碼更可讀方面的代價,已經足夠便宜了。

在 Linux Kernel 中,還有大量的例子,垂直排列讓代碼更便於人類分析。

垂直排列不適用於每個場景,但是對於快速評估代碼,其可讀性是無與倫比的。

代碼是具有創造性的平臺,我們通過這個平臺來表達想法。如果工具增加了理解這些想法的難度,那麼,需要改變的就是工具、而非我們。


注釋

  1. 90-90 法則(ninety-ninety rule,九九定律,99 定律)是計算機編程和軟體工程領域的一個有名的法則,出自於一句幽默的格言:(開發軟體時)前 90% 的代碼要花費 90% 的開發時間,剩餘的 10% 的代碼要再花費 90% 的開發時間。https://zh.wikipedia.org/wiki/90-90%E6%B3%95%E5%88%99

  2. 等寬字體(Monospaced Font)是指字符寬度相同的電腦字體。與此相對,字符寬度不盡相同的電腦字體稱為比例字體。在等寬字體中,字母i,j顯得兩側餘白較多,而字母w,m等的筆畫顯得相當擁擠。但是隨著圖形用戶界面主流的更新和電腦技術的提高,處理比例字體的局限性得到了突破,因此現在排版上顯得比較自然的比例字體的使用已經相當普及。另外,代碼也經常使用等寬字體。https://zh.wikipedia.org/wiki/%E7%AD%89%E5%AE%BD%E5%AD%97%E4%BD%93

  3. 比例字體(Proportional Font)是指字符寬度不盡相同的電腦字體。與此相對,字符寬度相同的電腦字體稱為等寬字體。https://zh.wikipedia.org/wiki/%E6%AF%94%E4%BE%8B%E5%AD%97%E4%BD%93

相關焦點

  • vertical-align表單元素垂直對齊
    wheatlee在他的文章中關於垂直居中提到了這樣幾個關鍵點:1、vertical-align:middle的時候,是該元素的中心對齊周圍元素的中心。2、這裡「中心」的定義是:圖片當然就是height的一半的位置,而文字應該是基於baseline往上移動0.5ex,亦即小寫字母「x」的正中心。
  • 你要的Excel對齊方式,全在這裡了
    ,那你對於Excel對齊了解多少呢?- 01 -基礎對齊方式所謂的基礎對齊,就是本期要講的開始選項卡下的對齊方式,如下圖所示:這裡主要講的是水平文本對齊方式,另外還有垂直文本對齊方式,用法類似,感興趣的小夥伴可以自己研究一下。
  • 敲敲黑板 | 文字垂直方向對齊這樣設置!
    前面與大家分享了技巧|快速對齊中文姓名,主要講解了在同一行中,如何使用制表位來對多個字符串設置行方向上的指定位置對齊。另外,關於文本段落的對齊方式,Word共提供了五種:左對齊、居中對齊、右對齊、兩端對齊和分散對齊,平時常用的文本段落對齊方式是兩端對齊。原因嘛,大家可以去不可不知的段落屬性之——對齊方式這篇推送中第1部分中去看。
  • WPS如何在表格中垂直居中對齊?
    wps如何在表格中垂直居中對齊?我們在wps中合併單元格的時候,文字並不在中間如何解決?下面就來教大家如何解決。1.當前我們打開文檔插入表格,然後選中一些表格。6.然後找到垂直對齊方式中的居中,點擊確定。
  • HTML網頁中的圖形是如何對齊的?有什麼方法可以使它們對齊?
    因此,在本文中,我將展示一些最常用的方法,即通過使用不同的CSS屬性在水平和垂直方向上居中圖像。水平居中讓我們開始使用3個不同的CSS屬性將圖像水平居中。垂直居中放置圖像1、Display: Flex對於垂直對齊,使用display:flex確實很有幫助。
  • HTML技巧篇:實現元素水平與垂直居中的幾種方式
    1)單行文本的居中主要實現css代碼:水平居中:text-align:center;垂直居中:line-height:XXpx; /*line-height與元素的height的值一致*/我們先來看這樣一個例子,加入我們這裡有一個
  • CSS:把Flex布局的代碼全部展示出來,你難道還不會?
    進入我的主頁,查看更多CSS的分享!首先呢,先去看文檔,了解flex是什麼,這裡不做贅述。當然,可以看下面的代碼示例,輔助你理解。3.垂直方向靠頂部,水平方向兩端對齊.row-lsb { display: flex; flex-direction: row; align-items: flex-start; justify-content:
  • 用CSS如何實現單行圖片與文字垂直居中
    今天又在群中看到一些朋友問單行圖片文字垂直居中問題了,於是寫了這篇文章。以下選自(CSS權威指南) 以下為引用的內容:vertical-align初始值: baseline(預設值)可否繼承:否適用於: 內聯元素說明:vertical-align:baseline使元素的基線同父元素的基線對齊。
  • 只需「對齊」一下,就能讓你的PPT打敗80%的人!
    「對齊」說起來簡單,生活中也很常見,但還是有很多同學因為不會「對齊」,導致做 PPT 效率低還不好看……希望看完今天這篇文章,大家都能學會乖乖對齊,輕鬆做出令人滿意的 PPT!作者:設計甲來源:設計甲(ID:designsjj)對齊原則是指:「任何元素都不能在頁面上隨意安放。每一項都應當與頁面上的某個內容存在某種視覺聯繫。」
  • CSS垂直居中技巧,我只會23個,你會幾個?
    當然沒有理由不能做到多行啊~但是你需要將多個元素或多行元素當成一個行元素來看待,所以我們必須要將這些數據多包一層,並將其設定為inline-block,並在該inline-block對象的外層對象使用inline-block來代替height的設置,如此便可以達到垂直居中的目的了,從使你的數據是包含了標題跟內容在內也可以正常的垂直居中了。
  • CSS的23個垂直居中技巧,你都學會了嗎?
    既然可以使用第一種方式對行元素達成垂直居中的話,當然沒有理由不能做到多行啊~但是你需要將多個元素或多行元素當成一個行元素來看待,所以我們必須要將這些數據多包一層,並將其設定為inline-block,並在該inline-block對象的外層對象使用inline-block來代替height的設置,如此便可以達到垂直居中的目的了,從使你的數據是包含了標題跟內容在內也可以正常的垂直居中了。
  • C語言的那些小秘密之字節對齊
    可能有不少讀者會問,字節對齊有必要拿出來單獨寫一篇博客嘛?我覺得是很有必要,但是它卻是被很多人所忽視的一個重點。那麼我們使用字節對齊的作用和原因是什麼呢?本文引用地址:http://www.eepw.com.cn/article/272734.htm  可能看了上面的講解你還是不太明白,那我們再來看一次什麼是字節對齊呢?
  • 代碼改變我的命,我要用代碼改變100萬女性的命
    相信很多中國人從沒有聽過她的名字,也很難理解這位黑人女性為什麼胸懷如此大志。也許沒有說出口的是,一位黑人女性到底和中國有什麼關係?阿里巴巴為什麼要支持她?那麼,下面我們就通過回答這三個問題,來解開Marieme Jamme女士的傳奇之謎。
  • Excel對齊方式合集,你要的全在這裡!
    在工作表美化過程中,我們常常會用到表格對齊。那麼,你又對Excel對齊了解多少呢?今天小編就和大家一同分享Excel對齊方式的操作技巧,快快一起來看吧~一、基礎對齊方式基礎對齊,即「開始」選項卡下的對齊方式,如下圖:左對齊、右對齊、居中對齊相信大家已經很熟悉了,此處不再贅述。
  • Excel單元格6種對齊方式,讓你的表格更整潔、美觀
    【溫馨提示】親愛的朋友,閱讀之前請您點擊【關注】,您的支持將是我最大的動力!Excel中,在對齊單元格內容時,漢字我們一般用到居中對齊,數字金額一般右對齊,靈活運用對齊方式可以讓我們的表格更工整、更整潔,閱讀者首先看到的是層次分明。今天小編再分享幾種對齊方式,看看你的表格適合哪種對齊。
  • 為什麼我看不懂你的代碼
    這一切都不再了,明 天是我的最後期限,數小時前我發現了一個bug。當時看起來的簡單和邏輯再也說不通了。可以肯定的是,如果我寫代碼,我應該足以聰明到理解代碼?經過了多次這種經歷以後,我開始認真思考,為什麼我的代碼在我編寫的時候很清楚、而當我數周或數月後回頭看的時候,它們卻那麼費解。
  • 分析問題要垂直思維,解決問題要水平思維
    例如,在人們普遍考慮「人為什麼會得天花」問題時,琴納考慮的則是「為什麼在奶牛場勞動的女工不得天花?」正是採用這種發散式思維法,使他做出了醫學上的重大發現。  戴勃倫博士認為運用水平思考法,應充分運用倆然發生的構想,從多方面觀察,把公思考的結果;傭然產生的構想有互相輔助和印證的作用,可幫助人們產生愈想不到的創意.
  • 23種CSS的垂直居中技巧,你都學會了嗎?
    當然沒有理由不能做到多行啊~但是你需要將多個元素或多行元素當成一個行元素來看待,所以我們必須要將這些數據多包一層,並將其設定為inline-block,並在該inline-block對象的外層對象使用inline-block來代替height的設置,如此便可以達到垂直居中的目的了,從使你的數據是包含了標題跟內容在內也可以正常的垂直居中了。
  • 前端開發必備的CSS命名規範與常用CSS代碼集合
    一、規則說明1)、所有的命名最好採用一種命名規範,比方全部小寫或者駝峰命名2)、屬性的值一定要用雙引號("")括起來,且一定要有值,例如class="web",id="web"3)、每個標籤都要有開始和結束,且要有正確的層次,排版有規律工整4)、表現與結構一定分離,代碼中不涉及任何的表現元素,如style、font、bgColor、border
  • Word排版技巧,參考輔助線幫助你快速對齊
    Word排版技巧對於我們在編輯Word文檔來說是很好用的一個技巧,可以幫助我們快速對齊文檔內容對象,今天給大家分享一個必學的技巧,讓Word中的對象整整齊齊!1、利用參考線對齊在Word中如何將一個文本快速放置在文檔中心位置呢?只需要開啟參考輔助線就能快速的對齊。點擊布局-排列-對齊-使用對齊參考線。這時候拖動文本,出現一條綠色參考線,就能將文本移動到中心位置,或是任意的邊距位置。