動態(tài)解說重構(gòu)！提煉函數(shù)

前言
這是一段函數(shù)，它的作用是打印這樣一份小票單



這是一段程序，它的作用也是打印這樣一份小票單



可以看到他們的作用是一樣的但是代碼結(jié)構(gòu)有很大的不同，從左邊演變成右邊的這種方法在重構(gòu)中叫做提煉函數(shù)。



提煉函數(shù)
大家好我是小盧，歡迎回到我的頻道，假設(shè)我開了家漢堡店，那么開頭那段代碼就是幫忙打印我的購物小票的？什么？看不懂？看不懂太正常了。



這段代碼把所有要做的事情都集合在一個函數(shù)里面，如果我們要看懂這段函數(shù)做什么的話就要進(jìn)到里面一行行查看，而這種代碼在我們工作中會經(jīng)?？吹剑粌H僅拉低了開發(fā)效率還增加了閱讀成本。



而在重構(gòu)中提到的一個觀點是將意圖與實現(xiàn)分開，也就是如果你需要花時間瀏覽一段代碼才能弄清它到底在干什么，那么就應(yīng)該將其提煉到一個函數(shù)中，并根據(jù)它所做的事為其命名。



我們來看看這段代碼結(jié)構(gòu)，其實仔細(xì)看我們可以很輕易的分成三個部分，先是打印頭部Banner，再構(gòu)造一個購物清單數(shù)組，最后再遍歷這個數(shù)組來輸出對應(yīng)的商品數(shù)量和價格。



那么我們來拆分一下這段函數(shù)，首先第一部分無涉及局部變量所以我們可以很輕易的提取出一段函數(shù)來代替，就叫做printBanner打印橫幅吧。



我們再來看第三段，這一段中我們是拿到了一個detailList數(shù)組進(jìn)行遍歷輸出，根據(jù)priceMap來取出對應(yīng)商品價格，我們?nèi)绻胩崛〕鲞@個函數(shù)的話需要用到這兩個變量。








但值得注意的是我們并沒有修改它，而是使用它，所以這種情況我們也可以輕易提取出一個函數(shù)并以參數(shù)的形式傳入到函數(shù)，這個函數(shù)我們就叫做printDetail吧。



我們再來看第二段，這一段的目的主要是根據(jù)購物清單selectedGoods來計算出一個包含商品和數(shù)量的這么一個detailList數(shù)組用于下面的printDetail進(jìn)行遍歷，我們也可以把它提取出來。



我們看到這里也是用到了兩個變量detailList和selectedGoods，但跟剛剛不同的是，它不僅僅要使用它并且修改它構(gòu)造一個新的值出來，我們可以把它，我們首先可以將這段代碼復(fù)制到一個新的函數(shù)中，我們就叫做calcDetail計算詳情吧。



由于detailList是我們這個函數(shù)中唯一要修改的值，所以我們可以直接返回它，就不需要將它以參數(shù)的形式傳入,在函數(shù)外部我們需要存回原來的變量中。



值得注意的是，在拆分成一些小函數(shù)的時候，我們要習(xí)慣把返回值用result來代替增加代碼可讀性。
這樣我們的結(jié)構(gòu)就拆分完了，是不是比之前清晰很多呢？



寫在最后
在重構(gòu)中我們把這種行為稱為提煉函數(shù),顧名思義也就是提取出代碼并且精煉到函數(shù)中。



而這種方法一般要注意的一個點是提取出來的函數(shù)一般分為有局部變量和無局部變量，無局部變量時我們直接復(fù)制就可提煉，而涉及到局部變量就需要根據(jù)是否「修改」這個變量來做抉擇。
這是一個新坑，重構(gòu)這本書很推薦大家去看，但是很多同學(xué)喜歡看會動的動畫，如果大家喜歡的話我就繼續(xù)做下去，「文中的例子都是很簡單很簡單的例子，為的就是用最簡單的代碼給大家演示這種方法，大佬們不喜勿噴哈～」
這次的文章就分享到這里，感謝大家看到這里，想要了解更多前端內(nèi)容歡迎關(guān)注我，我是小盧，我們下期再見(如果還有下期的話)。

作者：快跑啊小盧


歡迎關(guān)注微信公眾號 ：前端快快跑