動(dòng)態(tài)解說(shuō)重構(gòu)!提煉函數(shù)

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



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



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



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



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



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



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



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



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








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



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



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



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



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



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



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

作者:快跑啊小盧


歡迎關(guān)注微信公眾號(hào) :前端快快跑