01.19 Goodbye Clean Code，這是對代碼編寫與重構的新感悟

機器之心報道

參與：思

乾淨的代碼是我們的目標嗎？不，可能冗餘一點的代碼才更好讀。

Clean Code，顧名思義就是整潔的代碼，或者說清晰、漂亮的代碼，相信大多數開發者都希望自己能寫出這種類型的代碼。
那麼我們為什麼需要 Clean Code 呢？這裡需要明確的是，寫代碼並不只是用來跑一跑或實現某些功能，寫代碼更重要的是便於維護。所以從這一點出發，寫代碼就像寫一篇文章，閱讀體驗應該非常流程，邏輯承接應該非常順滑。
現在有兩種文章會讓我們閱讀體驗不難麼好，一種是過度冗餘，有一些簡單的概念經常出現，讓我們會覺得文章不夠精煉。另一種是太精煉了，每一部分之間的邏輯跳躍比較大，或者說我們很難跟上作者的敘述邏輯，那麼這樣的文章看起來會顯得生澀難懂。
代碼也一樣，有些重複使用的方法可以編入相同的函數，同類函數之間的關係可以編入類與對象。這樣代碼整體能顯得更加「乾淨」。但需要注意的是，並不是說最緊湊的代碼就是最好的，例如類的繼承，如果說讀懂當前類需要往上翻好幾個類，這種體驗並不友好，似乎代碼的邏輯跳躍讓人很難跟著走。
所以 Clean Code 到底好不好？

根據列表推導式（first method）精簡代碼（second method）。
React 主要維護者 Dan Abramov 也在考慮這件事，其中 React 是 Facebook 維護的 JavaScript UI 庫。他在博客上寫了一篇對 Clean Code 的反思，這篇文章在 HackNews 上獲得了非常熱烈的反響。下面我們具體看看 Dan Abramov 眼中的代碼編寫準則。
精簡的魅力
已經到了深夜，我的同事正在檢查這一週寫的所有代碼。他們在做的東西可以理解為，通過拉拽圖形邊緣的小控件來變成矩形和橢圓形等形狀，代碼本身是沒有問題的。
但似乎代碼的重複性有點多，每一個形狀都有一組不同的控件，從不同方向拉拽每一個控件都會以不同的方式影響形狀的位置與大小。如果用戶按住了 Shift 鍵，那麼在改變形狀的同時還應該展示各種屬性。實現這些能力需要如下一系列數學計算：

<code>letRectangle={
resizeTopLeft(position,size,preserveAspect,dx,dy){
//10repetitivelinesofmath
},
resizeTopRight(position,size,preserveAspect,dx,dy){
//10repetitivelinesofmath
},
resizeBottomLeft(position,size,preserveAspect,dx,dy){
//10repetitivelinesofmath
},
resizeBottomRight(position,size,preserveAspect,dx,dy){
//10repetitivelinesofmath
}, 

};
letOval={
resizeLeft(position,size,preserveAspect,dx,dy){
//10repetitivelinesofmath
},
resizeRight(position,size,preserveAspect,dx,dy){
//10repetitivelinesofmath
},
resizeTop(position,size,preserveAspect,dx,dy){
//10repetitivelinesofmath
},
resizeBottom(position,size,preserveAspect,dx,dy){
//10repetitivelinesofmath
},
};
letHeader={
resizeLeft(position,size,preserveAspect,dx,dy){
//10repetitivelinesofmath
},
resizeRight(position,size,preserveAspect,dx,dy){
//10repetitivelinesofmath
},
}
letTextBlock={
resizeTopLeft(position,size,preserveAspect,dx,dy){
//10repetitivelinesofmath
},
resizeTopRight(position,size,preserveAspect,dx,dy){
//10repetitivelinesofmath
},
resizeBottomLeft(position,size,preserveAspect,dx,dy){
//10repetitivelinesofmath
},
resizeBottomRight(position,size,preserveAspect,dx,dy){
//10repetitivelinesofmath
},
};
/<code>

我們可以看到上面已經是簡化的代碼了，每一條計算語句下都有 10 條几乎重複的計算過程。這樣的重複性計算代碼看起來就很冗餘，它也不是一種 Clean Code。
我們很容易發現，大多數重複代碼都有相似的屬性。例如 Oval.resizeLeft() 與 Oval 的其它方法都非常相似，因為它們都是橢圓的某些屬性或操作。其它 Rectangle、Header 和 TextBlock 也會有重複，因為文本框都是矩形的。

<code>letDirections={
top(...){
//5uniquelinesofmath
},
left(...){
//5uniquelinesofmath
},
bottom(...){
//5uniquelinesofmath
},
right(...){
//5uniquelinesofmath
},
};
letShapes={
Oval(...){
//5uniquelinesofmath
},
Rectangle(...){
//5uniquelinesofmath
},
}/<code>

組合成各種行為特性：

<code>let{top,bottom,left,right}=Directions;
functioncreateHandle(directions){
//20linesofcode
}
letfourCorners=[
createHandle([top,left]),
createHandle([top,right]),
createHandle([bottom,left]),
createHandle([bottom,right]),
];
letfourSides=[
createHandle([top]),
createHandle([left]),
createHandle([right]),
createHandle([bottom]),
];
lettwoSides=[ 

createHandle([left]),
createHandle([right]),
];
functioncreateBox(shape,handles){
//20linesofcode
}
letRectangle=createBox(Shapes.Rectangle,fourCorners);
letOval=createBox(Shapes.Oval,fourSides);
letHeader=createBox(Shapes.Rectangle,twoSides);
letTextBox=createBox(Shapes.Rectangle,fourCorners);/<code>

上面這種方法只會有一半的代碼量，重複代碼基本都被刪除了，所以它是乾淨的。如果我們想改變圖形方向或形狀等特定屬性，我們只需要修改一段代碼，而不需要到處更新這個函數。
現在代碼過於重複這個問題解決了，我們可以開心地把它提交給代碼庫。並且因為寫了更簡潔的代碼，我們可以帶著成就感上床睡覺了。
事情並不那麼簡單
但是等等，到了第二天，你會發現事情並不簡單。可能老闆會找你談話，委婉地想要你撤回昨晚重構的乾淨代碼。但這出現了什麼問題？重構的代碼非常簡單，它比之前一堆亂麻的代碼漂亮很多。
當時你很可能心不甘情不願，但幾年後，你會發現老闆的觀點才是正確的。
痴迷於「Clean Code」並刪除重複代碼是我們都會經歷的一個過程。當我們對代碼感到不太自信時，我們很容易將自我價值與自信感聯繫到一些可衡量的標準。例如一組嚴格的代碼規則、一個確定的命名策略、一個明確的文件結構和沒有重複的「乾淨」代碼等。

閱讀更多 機器之心Pro 的文章

關鍵字: 維護者 JavaScript 感悟