The art of readable code ( pdf )

易讀程式之美學

痞客邦前端組分享 - 徐如林 2015 / 11 / 20

Code should be Easy to Understand

- 降低後⼈人的怒氣值 - 最⼩小化後⼈人理解的時間 ( "後⼈人" 包括隔天 / 三天後的⾃自⼰己 )

1

- Appropriate Naming - Aesthetics - Comments - Simplify Loops and Logic - Simplify Expressions - Variables and Readability - Reorganizing - Summary

2


3

4Appropriate Naming

X - thisPlant O - manEaterPlant

pack information into the names

5Appropriate Naming

Be Specific

size() width()、height()、memory()

stop() pause()、kill()

Avoid Generic Names

tmp、result、retval

i、j、k

Prefer Concrete Names ( over Abstract Names )

severCanStart canListenOnPort

6Appropriate Naming

Values with Units

duration durationMs

Attach Details

password plaintextPassword

comment commentUnescaped

html htmlUtf8

Shorter Names for Shorter Scope PLEASE

7Appropriate Naming

8Appropriate Naming

filter() select()、exclude()

var cartTooBigLimit = 10; if (cart.num > cartTooBigLimit) { var maxItemsInCart = 10; if (cart.num > maxItemsInCart) { … }

[ min, max ] [ first, …last ] [ begin, …end )

Name of Boolean

readPw needPw、isAuth

disableClick = true; ableClick = false;

Match Expectations

getMean() computeMean()


9

10Aesthetics

10Aesthetics

Make similar code look similar


11

12Comments

13Comments

- director commentary - 這段程式法的 summary - 為什麼以這個⽅方法處理? - 有代表性的範例

- 註解程式碼的問題 - TODO、FIXME、HACK、XXX

- magic number

- 註解可能的陷阱 - eg. // 逾時時間 30 sec


14

Simplify Loops and Logic15

Simplify Loops and Logic

- 尤達表⽰示法

- if / else - 先處理肯定的情況 - 先處理較簡單的情形

- eg. Guard Clause

- 減少使⽤用 ternary operator

- avoid do/while loop

16


17

Simplify Expressions- use explaining variables

- if (line.split(':')[0].strip() === 'root') { … } - var username = line.split(':')[0].strip();

if (username === 'root') { … }

- use De Morgan’s Law - !(a || b) ⇔ !a && !b

- !(a && b) ⇔ !a || !b

- DRY ( don’t repeat yourself )

18


19

Variables and Readability- shrink the scope of variables - use less global variables - prefer write-once variables

20


21

Reorganizing

- 專案專屬的功能

22

Reorganizing

- 專案專屬的功能

- 抽離不相關的⼦子問題 - pure utility - general-purpose - simplify interfaces

22

Reorganizing23

Reorganizing24


25

Summary26

Thanks for your listening

end

The art of readable code ( pdf )

Engineering

Transcript of The art of readable code ( pdf )