將設計學知識應用於寫代碼

源於一本書

這本書叫《寫給你們看的設計書》。身爲一個前端，想着懂一點設計也不錯。這對咱們的工做是有幫助的。假如此時沒有美工幫忙，產品給你個簡單的原型圖，你也能夠經過本身掌握的設計知識，寫出不那麼難看的界面。

在生活中，懂一點設計學知識，還能提高咱們的審美。懂得什麼樣的設計是好的，甚至能看懂一點其中的門道。

你們熟知的Ant Design。在它的文檔中致敬了這本書。且它的設計語言原則中的前四點，親密性，對齊，對比，重複。就是《你們看的設計書》中提出並着重介紹的設計原則。

因此我推薦這本書給你們，有空能夠讀一讀，頗有意思。

應用於寫代碼

將設計學知識應用於寫代碼。也是可行的，能使咱們代碼更工整一些。咱們的代碼寫在文件中，也要講究佈局。把代碼看成是文章段落，把代碼文件看成一種特殊的新聞簡報。

接下來就闡述四項基本設計原則，以及在代碼中的應用。

設計四項基本原則

1. 親密性
2. 對齊
3. 對比
4. 重複

親密性

親密性的思想並非說全部一切都要更靠近，其真正的含義是：若是某些元素在理解上存在關聯，或者相互之間存在某種關係，那麼這些元素在視覺上也應當有關聯。

看上面這兩張圖片，第一張圖片的女人和小孩，不太肯定是什麼關係，第二張圖片的兩人，更像母子，她們更加親密。 咱們也可讓代碼有這種親疏關係，來表達它們直接的關聯程度。

我在Ramda的源碼裏找到一個find函數，做爲咱們的例子：

function find(fn, list) {
  var idx = 0;
  var len = list.length;
  while (idx < len) {
    if (fn(list[idx])) {
      return list[idx];
    }
    idx += 1;
  }
}
複製代碼

如今咱們利用親密性，對其進行改造：

function find(fn, list) {
  var idx = 0;
  var len = list.length;
  var result;
  
  while (idx < len) {
    if (fn(list[idx])) {
      result = list[idx];
      break;
    }
    idx += 1;
  }
  
  return result;
}
複製代碼

改造完畢，發現有什麼區別了嗎？一個方法讓咱們用兩個回車分紅了三個區域。變量聲明的區域，中間操做過程的區域，返回值的區域。代碼就有了它們親疏關係。在視覺上更清晰。

固然使用衛句的方法也能夠這樣作：

function manToilet(person){
    if(isLady(person)) return;
    
    // dosomething
    
    return lighterPerson;
}
複製代碼

只要是不一樣的邏輯區域，咱們均可以利用回車表達親疏關係。

不止在方法內部，在方法外，在咱們的類內部，一樣能夠經過回車表達親密性。

一個react的頁面類：

class HomePage extends Component {
    
    onComfirm = () => {}
    
    onCancel = () => {}
    
    
    renderNavbar() { ... }
    
    renderContent() { ... }
    
    render() { ... }
}
複製代碼

從方法的分佈能夠看出，渲染方法更親密，在一塊，響應方法更親密，在一塊。

我我的更習慣使用代碼摺疊塊來區分類內部的不一樣成員

class HomePage extends Component {
    
    // #region 響應方法
    
    onComfirm = () => {}
    
    onCancel = () => {}
    
    // endregion
     
    
    // #region render
    
    renderNavbar() { ... }
    
    renderContent() { ... }
    
    render() { ... }
    
    // endregion
}
複製代碼

項目級別的親密性，就更加明顯了，咱們喜歡將同類型的代碼文件，放在相同的目錄下，如頁面文件放在view文件夾下，工具文件放在util文件夾下。

對齊

對齊原則是指：「任何元素都不能在頁面上隨意安放。每一項都應當與頁面上的某個內容存在某種視覺聯繫」。

對齊會讓元素產生視覺聯繫。咱們一直在用這原則，就是代碼的縮進，縮進使咱們同級別的代碼元素，產生對齊。

那麼咱們怎麼更好的利用對齊這個特性呢？我以爲在方法內，能夠適當的減小嵌套。讓同一級別的邏輯，儘可能保持對齊。

過多嵌套會讓代碼的對齊不那麼明顯，如：

if (...) {
    if (...) {
        if (...) {
            if (...) {
            }
            else {
                if (...) {
                    if (...) {
                        
                    }
                }
            }
        }
    } else {
        if (...) {
        }
    }
}
複製代碼

很顯然，多層的if嵌套，會讓代碼邏輯不清晰，若是再向其中假如些循環嵌套，更糟了。對齊的特性，也消失不見。咱們很難找到代碼之間的關聯。

減小嵌套的方法。

1. 使用衛句。
2. 使用switch。（讓咱們的對齊又回來了）
3. 拆分代碼

咱們能夠根據具體狀況選擇不一樣的減小嵌套的方案。

對比

對比的基本思想是，要避免頁面上的元素太過類似。若是元素（字體、顏色、大小、線寬、形狀、空間等）不相同，那就乾脆讓它們大相徑庭。

對比這兩張圖，第二張咱們能明顯區別出白人老頭，和黑人小孩。若是他們不一樣，就讓他們大相徑庭。

在代碼中，咱們不能讓不一樣的代碼字體大小不一致了。咱們能作到的是，顏色和書寫形式有所不一樣。

對於顏色，咱們只須要在編輯器中，搞一下出色的顏色插件便可，讓顏色來區分咱們代碼中的不一樣成員。

在這裏隨便截了一張vue編寫的頁面代碼，人們對顏色是很敏感的，經過不一樣顏色，咱們能夠準確的區分出組件名，組件屬性，組件的屬性值，組件的變量屬性值。

還有一種利用對比的方式，就是變量名的書寫方式了。

這是一段C#代碼，拿它舉例是感受它比較典型，代碼描述了一個方法，方法裏有不少的變量。我爲各類成員變量制定了一種書寫方式。

1. 類的字段。下劃線開頭加駝峯命令法。
2. 類的屬性。帕斯卡命名法。名詞
3. 類的方法。帕斯卡命名法。動詞/動詞+名詞。
4. 局部變量。駝峯命名法。
5. 類名。帕斯卡命名法。名詞

咱們規定了各類成員的規則，再來看咱們的方法。Checkouted、Navigation是帕斯卡命名法，還都是一個動詞，是方法。castPoint是局部變量。_initialPoint是類的字段。RestPoint是類的屬性。

若是你熟悉某一套命名規則，你就能夠經過對比，獲得更多的信息量，進而快速熟悉和理解代碼。

重複

重複原則倡導經過經過視覺元素的重複來更好的組織信息和加強做品的總體性。

上圖第一張中，能明顯看出穿粉衣綠褲的人是一撥人。這就是重複的力量。第二張圖缺乏重複，就略顯雜亂。

重複在代碼中的應用就更多了，剛纔那段C#代碼，也是用了重複的設計原則，經過不斷的重複，表達出具備某種特徵是某種成員類型。

再來回顧一下這段代碼：

class HomePage extends Component {
    
    onComfirm = () => {}
    
    onCancel = () => {}
    
    
    renderNavbar() { ... }
    
    renderContent() { ... }
    
    render() { ... }
}
複製代碼

經過render的重複，來表達帶render字樣的方法，都是渲染方法。經過on的重複，來表達on字樣的方法，都是響應方法。以此來達到咱們想傳達某種信息的目的。

在項目中，我會常用Page，ViewModel等這樣的單詞給文件名做尾綴，宣稱它在框架中處於什麼樣的位置。也是重複的一種用法。

結束語

以上就介紹完成設計原則在代碼中的基本應用了。相信利用好設計原則，也能夠幫助咱們寫出更加工整的代碼。