重構：代碼命名之逆襲女神

魯迅曾經說過: 全部代碼都不是一次性的，不管是變動仍是閱讀，一語中的的名字即是好的設計。

正文

李狗蛋爲了和本身心儀的女神在一塊兒，使上了渾身解數，讓咱們看看他是如何逆襲的。

故事若有雷同純屬巧合，如下命名方式只是參考，沒有真正的標準

變量名

case1：

狗蛋想看女神的詳細我的信息，他調出了官網的代碼：

// list便可能是列表也有多是表格
const configListData；
const configList；
const configData；
const configFormList；
......
複製代碼

WTF!這些變量名根本如出一轍好嗎？我到底該看哪一個？

解析：

讓咱們來看一下elementui的命名:

• 表格: table
  複製代碼

• 表單：form
  複製代碼

• 列表：list
  複製代碼

採用機翻每每會出現同名非同義的狀況，須要對基礎組件置頂一個本身的規範，設想一下，若是多人維護統一套代碼，每一個人風格不統一又沒有註釋，很容易出現神祕變量。

1. 造輪子儘可能讓名字單一，並用統一的命名規則去封裝組件，例如:

   {
          data:'',   //數據
          config:'', //配置
          size:'',   //尺寸
          style:'',  //樣式
          state:'',  //狀態
          show:'',   //展現
          ......
     }
   複製代碼

2. 儘可能避免語義相近的變量，因如今大都使用ui框架的狀況，若是頁面中出現倆種相同類型的組件建議使用這種方式取名：

   studentTable， // 內容-組件模塊 （若是有不少學生的表格，最好說明是什麼學生）
   複製代碼

case2：

狗蛋好不容易理好了表格，打算用爛熟於心的女神三圍作查詢條件，OMG！這查詢條件也太多了吧：

//vue中的data
這裏用了蒼老師的.....
{
    age:'18',
    sex:'female',
    major:'english', //專業
    class:'201',
    bust:'90',        //胸圍
    waistline:'58',   //腰圍
    hips:'83',        //臀圍
    table:'',
}
table.search({waistline,hips,bust});
複製代碼

報錯：正經學校怎麼可能會有三圍啊！

解析：

表格的查詢條件有不少，然而上面這一塊並不全是學生表格中的查詢條件。

狗蛋一怒之下修改告終構:

{
    // 查詢學生條件
    studentSearchData：{
      age:'18',
      sex:'female',
      major:'english', //專業
      class:'201',
    }，
    // 查詢私人條件
    privateSearchData: { 
        bust:'90',        //胸圍
        waistline:'58',   //腰圍
        hips:'83',        //臀圍
    }，
    table:'',
}
table.search(studentSearchData); //少寫幾個變量
複製代碼

這樣經過業務領域來抽象成個對象（類）來區分業務，在複雜的業務場景裏不只能夠確認數據的職責鏈，經過命名讓代碼顯得更加'模塊化'，甚至在一些功能裏能夠更加便利的調用。

函數名

case1：

狗蛋爲了維護女神的形象（佔爲己有）想把隱私條件修改（保存）了：

changeSearchData('privateSearchData');
updateSearchData('privateSearchData');
複製代碼

因此是哪一個是修改函數?

解析：

建議採用 操做(restful)+內容 / 內容+行爲 來命名

searchData();        //獲取 加get畫蛇添足，我的風格大家也能夠加
initSearchData();    //刪除
addSearchData();     //添加
updateSearchData();  //更新
removeSearchData();  //移除某個屬性
deleteSearchData();  //刪除    
searchDataToString()； //轉換數據格式
.....
複製代碼

case2：

幫女神清空購物車，計算她雙11購物車的消費金額:

（數量 * 單價）* 折扣 + 距離 * 運費

function Price（）{
    return (order.quantity * order.itemPrice) * order.discount 
    + distance * shipping 
}
複製代碼

狗蛋想修改購物車的計算邏輯可是無從下手

咱們的項目裏每每會出現這種代碼，這並非什麼錯誤的代碼（需求緊、懶癌），可是咱們必定要重構它。這個函數中的代碼過於複雜，以致於用一個名字沒法解釋它的具體行爲

解析：

用單一職責重構它:

// 基本價格 = 數量 * 單價
 function basePrice (){ 
     return  order.quantity * order.itemPrice;
 }
 // 折後價格 = 基本價格 * 折扣
 function discountPrice (basePrice){ 
     return  basePrice * order.discount;
 }
 // 運費價格 = 千米數 * 運費
 function shippingtPrice (){ 
     return  distance * shipping;
 }
 
 function Price（）{
    return discountPrice(basePrice()) + shippingtPrice();
 }
 ......
複製代碼

寫了個大概，根據具體業務還能優化，重構後的好處是：

1. 每一個計算公式都有它本身的函數和明確的名字
2. 大體流程不會變，每一個函數的內部能夠根據需求變化計算方式
3. 輸出價格的函數是不變的，以後咱們不須要關心他是怎麼實現的

參數名

徹底是我的風格了：

1. 參數不宜過多，超過3個就須要考慮能夠組合成對象的形式參考(變量case2)

2. 參數統一，若是是同一流程中的傳參，建議用同一參數名方便快捷搜索快速定位(ctrl+f)， 以下代碼能夠經過movieName快速定位相關處理流程

   const movie = [];
    
    function updateDesignation(){
        const movieName = 'SSNI-436';
        downLoadMovie(movieName);
    }
    .... 
    此處省略一萬行代碼，可是咱們能夠經過movieName快速定位參數走向  
    ....
   
    function downLoadMovie(movieName){
        movie.push(movieName);
    }
   複製代碼

女神低下頭在狗蛋的耳邊輕聲說道，其實你不用爲我復出那麼多，我就喜歡你寫代碼的樣子，真的好帥。（我就喜歡你人傻錢多）

狗蛋：嘿嘿，女神原來對代碼感興趣，你認爲何語言是世界上最好的語言？

女神：。。。。。。

---

請不要再把代碼寫成推理小說，不是每一個人都是偵探

若是以爲不錯，請素質四連，點贊、關注、轉發、評論，畢竟要恰飯的嘛

瞭解更多，關注技術公衆號：ihap 技術黑洞 ！！！