为什么我要垂直对齐代码(你也要如此!)


英文原文: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

文章转载自 开源中国社区[https://www.oschina.net]

时间: 2024-07-31 14:53:21

为什么我要垂直对齐代码(你也要如此!)的相关文章

Web标准学习:未知高度的非表格垂直对齐

web|web标准 非已知高度的垂直对齐的条件: 表格单元格 行内块(inline-block) 第一个比较好理解,第二个很多人可能会忽略.比如,很多人在图片与文本混排的时候想让图片相对于文本垂直居中除了用IE的私有特性 valign="absmiddle"别无他法.记住,默认下图片就是属于inline-block,你只需简单的img {vertical-align:middle;}即可. 那么,我们进入主题.现在我们由于某些特殊需要两个并排的div想实现垂直居中.如前所述,div非表

JS实现控制表格单元格垂直对齐的方法

 这篇文章主要介绍了JS实现控制表格单元格垂直对齐的方法,涉及javascript操作表单元素样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS实现控制表格单元格垂直对齐的方法.分享给大家供大家参考.具体如下: 下面的代码控制指定的单元格靠底部垂直对齐 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html>

JS实现控制表格行内容垂直对齐的方法

 这篇文章主要介绍了JS实现控制表格行内容垂直对齐的方法,通过javascript的getElementById获取元素并设置其相应样式来实现这一功能,需要的朋友可以参考下     本文实例讲述了JS实现控制表格行内容垂直对齐的方法.分享给大家供大家参考.具体分析如下: 下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶.可以居中.可以底部对齐 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 2

android-Android:文本区域中的多行EditText垂直对齐

问题描述 Android:文本区域中的多行EditText垂直对齐 我想在文本区域中设置5行高度的编辑文本框.使用下面的代码: <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:singleLine="false" android:lines=

解决文字和表单元素不能垂直对齐

解决办法: 1.文字大小必须是偶数,比如12PX. 2.将文字加上label标签并且也添加vertical-align:middle样式. 3.然后去除表单元素的边距. 案例: 效果图  代码如下 复制代码 <style> label{vertical-align:middle} .inputcheckbox{vertical-align:middle;} body{font-family:tahoma;font-size:12px;} </style> <input cla

CSS中vertical-align垂直对齐属性介绍

一向以来,我对vertical-align的属性都搞的不是太清楚,今天刚好碰到有朋友问我相关的问题,于是自己潜心研究了一番,发现这玩意还真不是个简单的东西,在此我分享的东西都是抛弃脑残的IE的,如果你用的是脑残的IE,请跳过此篇文章. 一.为什么我设置的vertical-align没用? 相信很多前端开发人员都遇到过这个问题,有的时候自己明明写了vertical-align属性值,但就是没效果,归其原因,是因为vertical-align是个比较奇葩的东西,想要让他起作用,就要投其所好. 我们知

JS实现控制表格行内容垂直对齐的方法_javascript技巧

本文实例讲述了JS实现控制表格行内容垂直对齐的方法.分享给大家供大家参考.具体分析如下: 下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶.可以居中.可以底部对齐 <!DOCTYPE html> <html> <head> <script> function topAlign() { document.getElementById('tr2').vAlign="top"; } </script> <

Word 2013文档如何设置垂直对齐方式

Word2013文档页面默认的垂直对齐方式为"顶端对齐",这种对齐方式使得Word文档内容在节(如果没有分节则是指整篇文档)的顶端对齐,并且适用于大多数情况.用户可以根据实际需要设置垂直对齐方式,操作步骤如下所述: 第1步,打开Word2013文档窗口,切换到"页面布局"功能区.在"页面设置"分组中单击显示"页面设置"对话框按钮,如图2013072809所示. 图2013072809 单击显示"页面设置"对

在Word 2007文档中设置文本框边距和垂直对齐方式

默认情况下,Word2007文档的文本框垂直对齐方式为顶端对齐,文本框内部左右边距为0.25厘米,上下边距为0.13厘米.这种设置符合大多数用户的需求,不过用户可以根据实际需要设置文本框的边距和垂直对齐方式,操作步骤如下所述: 第1步,打开Word2007文档窗口,右键单击文本框,在打开的快捷菜单中选择"设置文本框格式"命令,如图2009010401所示. 图2009010401 选择"设置文本框格式"命令 第2步,在打开的"设置文本框格式"对话