目錄
Tab 占用更少的空间
Tab 可个性化
Tab 更利于合作
不需依赖特定工具
Tab 易于选择
使用 Tab 缩进的代码更易于复制粘贴
Web 中的 Tab 更宽怎么办!
空格一定不好吗?
关于作者:古鲁伊
首頁 web前端 html教學 为什么代码缩进时用 Tab 超级棒?_html/css_WEB-ITnose

为什么代码缩进时用 Tab 超级棒?_html/css_WEB-ITnose

Jun 21, 2016 am 08:46 AM

【伯乐在线导读】:美化代码(对齐和缩进)时用 Tab 还是空格,这个话题和浏览器和操作系统之战,都是老生常谈的话题,都能让程序员争辩很久的。2015 年程序员 Uku Pattak 分析了 GitHub 上多种语言的热门项目(star 数量高)中使用 Tab 和空格的对比情况。

今天这篇文章出自前端大牛 Lea Verou。


如果你在 Twitter 上关注了我或者你曾听过我的演讲,或许就知道我是极力鄙视用空格来进行代码缩进的。但是我从没在舞台上详细解释过我这个观点,而 Twitter 又不适合用来阐述技术观点,所以我一直都想写篇博文来表明我在这个老生常谈的问题上面的看法,这就是写此文章的原因。

Tab 占用更少的空间

使用 Tab 的文件或许和不使用 Tab 的在 gzip 压缩后并没有明显的区别。但是不使用 Tab 的话,就得多一道程序处理你的代码,以保证文件大小合理。你不得不依赖压缩工具。拿注释举例来说,注释很有用,即使无法压缩代码也要有注释。Tab 可以达到和空格同样的效果,所以不用 Tab 的话,平白无故就会膨胀代码。

Tab 可个性化

每个编辑器都可以调整 Tab 字符的宽度。这通常被认为是 Tab 的缺陷,但是实际上,这正是 Tab 的优势所在。有了 Tab,别人就能以自己觉得方便的格式查看你的代码,而不是用你喜欢的格式。Tab 将代码表现从逻辑中分离出来,就像是 CSS 将页面表现从 HTML 中分离出来一样。Tab 使读者更方便,而不是让编写者掌控一切。用空格就像是在说:“我不管你读代码时方不方便,这是的代码,你就得按照的方式来”。

Tab 更利于合作

每个程序员都有自己不同的想法,在团队合作中这种个性更要重视。有的程序员喜欢缩进 2 个空格宽,有的喜欢缩进 4 个空格宽。使用 Tab,每个程序员可以用自己喜欢的缩进方式编写代码,编辑器会根据所设置的 Tab 宽度自动调整缩进,而不必手动调整或者机械地在pull之后改成自己的缩进风格,而在提交前又改回统一的风格。

不需依赖特定工具

使用空格时,缩进实际上是 N 个字符而不是一个,只不过编辑器展现出来的看起来像是一个字符而已。而使用 Tab,你每次按下 Tab 键,编辑器会插入 N 个空格;每次按回退键或是在缩进处删除字符时,编辑器会自动删除 N 个字符。当你不能用编辑器,而被迫使用其它工具时(例如当在嵌入了像是 codemirror 等工具的 webapp 中写一小段代码时),你会被空格丑哭的。尤其是 codemirror 会将 Tab 转换为空格,别人看你的代码时也会被丑哭。

Tab 易于选择

假设你要选中所有缩进,想把缩进加倍或是将它们换成空格的话,用 Tab 就很容易操作。因为这是正它的意义所在,Tab 就是为了这类情况发明的。而空格的意义就多了,所以你无法简单的查找、替换空格。这种并不是为了发挥某种工具的原本功能而使用它的行为,我们通常称之为 hack。使用空格来进行缩进就是一种 hack。

使用 Tab 缩进的代码更易于复制粘贴

Norbert Süle 在评论中 指出,复制粘贴用空格缩进的代码时,除非别人惯用的缩进宽度恰好和你的一样,否则你就得手动调整缩进。使用 Tab 就不会出现这种问题,因为 Tab 就是 Tab,它会和代码完美的融合在一起。每个人都使用 Tab 的话,世界都会更加美好。

Web 中的 Tab 更宽怎么办!

这是个严重的问题,即使是钟情 Tab 的优秀程序员在上传代码前也会将 Tab 转换成空格。但是,CSS3 的 tab-size 属性 解决了这个问题。目前 Opera、Firefox 支持此属性,Webkit 很快也会支持。这个属性可优雅降级:即使浏览器不支持,呈现出来的代码虽然没有那么美观,但是仍具有良好的可读性。

空格一定不好吗?

空格是对齐的最佳选择,而不是缩进。比如下面这段代码:

var x = 10,    y = 0;
登入後複製

你需要 4 个空格使变量对齐。如果使用 Tab 的话,只有在 Tab 宽度为 4 的时候,变量才会对齐,否则格式就会乱掉。但是如果这段代码是缩进的,仍然应该用 Tab 而非空格。

另一个例子是对齐具有不同厂商前缀的 CSS3 属性。缩进应该使用 Tab,但是对齐应该使用空格。示例如下:

div {	-webkit-transition: 1s;	   -moz-transition: 1s;	    -ms-transition: 1s;	     -o-transition: 1s;	        transition: 1s;}
登入後複製

认真你就输了

好吧,我夸大了空格的缺点。我确实认为空格很糟糕,但是我得承认比起程序员使用空格缩进,其它的问题可能更加严重,比如,程序员不恰当地给变量命名,或是比起 Vim,更喜欢 Emacs。

关于作者:古鲁伊

简介还没来得及写 :) 个人主页 · 我的文章 · 10

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

> gt;的目的是什麼 元素? > gt;的目的是什麼 元素? Mar 21, 2025 pm 12:34 PM

本文討論了HTML< Progress>元素,其目的,樣式和與< meter>元素。主要重點是使用< progress>為了完成任務和LT;儀表>對於stati

< datalist>的目的是什麼。 元素? < datalist>的目的是什麼。 元素? Mar 21, 2025 pm 12:33 PM

本文討論了html< datalist>元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

HTML5中跨瀏覽器兼容性的最佳實踐是什麼? HTML5中跨瀏覽器兼容性的最佳實踐是什麼? Mar 17, 2025 pm 12:20 PM

文章討論了確保HTML5跨瀏覽器兼容性的最佳實踐,重點是特徵檢測,進行性增強和測試方法。

< meter>的目的是什麼。 元素? < meter>的目的是什麼。 元素? Mar 21, 2025 pm 12:35 PM

本文討論了HTML< meter>元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了< meter>從< progress>和前

如何使用HTML5表單驗證屬性來驗證用戶輸入? 如何使用HTML5表單驗證屬性來驗證用戶輸入? Mar 17, 2025 pm 12:27 PM

本文討論了使用HTML5表單驗證屬性,例如必需的,圖案,最小,最大和長度限制,以直接在瀏覽器中驗證用戶輸入。

視口元標籤是什麼?為什麼對響應式設計很重要? 視口元標籤是什麼?為什麼對響應式設計很重要? Mar 20, 2025 pm 05:56 PM

本文討論了視口元標籤,這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互,而濫用可能會導致設計和可訪問性問題。

< iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼? < iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼? Mar 20, 2025 pm 06:05 PM

本文討論了< iframe>將外部內容嵌入網頁,其常見用途,安全風險以及諸如對象標籤和API等替代方案的目的。

Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

See all articles