The document discusses principles for writing code that is easy to understand and maintain. It recommends using appropriate naming conventions that clearly convey meaning; consistent formatting and layout to improve aesthetics; comments to explain intent and issues; simplifying loops, logic and expressions; minimizing global variables and scope; and refactoring code into well-organized modules. The goal is to reduce frustration and time for future maintainers to understand the code.

1. 易讀程式
之美學
痞客邦前端組分享 - 徐如林
2015 / 11 / 20

2. Code should be Easy to Understand
- 降低後⼈人的怒氣值
- 最⼩小化後⼈人理解的時間
( "後⼈人" 包括隔天 / 三天後的⾃自⼰己 )
1

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

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

5. 4
Appropriate Naming
X - thisPlant O - manEaterPlant
pack information into the names

6. 5
Appropriate 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

7. 6
Appropriate Naming
Values with Units
duration
durationMs
Attach Details
password
plaintextPassword
comment
commentUnescaped
html
htmlUtf8
Shorter Names
for Shorter Scope PLEASE

8. 7
Appropriate Naming

9. 8
Appropriate 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()

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

11. 10
Aesthetics

12. 10
Aesthetics
Make similar code look similar

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

14. 12
Comments

15. 12
Comments

16. 12
Comments

17. 13
Comments
- director commentary
- 這段程式法的 summary
- 為什麼以這個⽅方法處理?
- 有代表性的範例
- 註解程式碼的問題
- TODO、FIXME、HACK、XXX
- magic number
- 註解可能的陷阱
- eg. // 逾時時間 30 sec

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

19. Simplify Loops and Logic
15

20. Simplify Loops and Logic
- 尤達表⽰示法
- if / else
- 先處理肯定的情況
- 先處理較簡單的情形
- eg. Guard Clause
- 減少使⽤用 ternary operator
- avoid do/while loop
16

21. Simplify Loops and Logic
- 尤達表⽰示法
- if / else
- 先處理肯定的情況
- 先處理較簡單的情形
- eg. Guard Clause
- 減少使⽤用 ternary operator
- avoid do/while loop
16

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

23. 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

24. 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

25. 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

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

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

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

29. Reorganizing
- 專案專屬的功能
22

30. Reorganizing
- 專案專屬的功能
22

31. Reorganizing
- 專案專屬的功能
- 抽離不相關的⼦子問題
- pure utility
- general-purpose
- simplify interfaces
22

32. Reorganizing
23

33. Reorganizing
24

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

35. Summary
26

36. Summary
26

37. Thanks for your listening
end