重構(gòu)，這個(gè)詞在前端這塊讓人想到的更多的是頁(yè)面制作（html/css）這塊的工作。然后在前端中還有一塊更重要的地方 —— 那就是代碼的重構(gòu)；學(xué)軟件工程的同學(xué)應(yīng)該會(huì)比較清楚。

代碼重構(gòu)，簡(jiǎn)單來(lái)講就是把原來(lái)的代碼重新構(gòu)建和編寫(xiě)，讓代碼更加清晰，提升代碼的復(fù)用性和性能等。

下面開(kāi)始拋磚，希望能為在做代碼重構(gòu)和對(duì)代碼重構(gòu)有興趣的同學(xué)能帶來(lái)一些啟發(fā)和幫助。

實(shí)例：web彈層（dialog/layerbox/logicbox）

代碼一：

這里創(chuàng)建一個(gè)對(duì)話(huà)框（多例）的基本代碼，這里主要做了以下幾件事

1、  如果頁(yè)面上找不到為當(dāng)前id的對(duì)話(huà)框，則創(chuàng)建一個(gè)新的；

2、  設(shè)置對(duì)話(huà)框標(biāo)題；

3、  設(shè)置右上角關(guān)閉命令菜單的事件；

4、  設(shè)置對(duì)話(huà)框內(nèi)容；

5、  設(shè)置對(duì)話(huà)框操作按鈕。

思考：

1、  是否真的需要多例形式的組件；

2、  是否真的需要在右上角加一個(gè)關(guān)閉命令菜單；

3、  ……

代碼二：

經(jīng)過(guò)之前的實(shí)踐，將多例改成單例，這里也去除掉了右上角的關(guān)閉按鈕，為了增加其擴(kuò)展和靈活性，這里采用了事件注入（鉤子）的方式進(jìn)行回調(diào)處理。

對(duì)于這次重構(gòu)后，得到以下改進(jìn)：

1、  將多例改成單例，降低了對(duì)實(shí)例的維護(hù)，并且更方便的對(duì)實(shí)例進(jìn)行管理；

2、  事件機(jī)制的改成，減少事件綁定和維護(hù)；

3、  將html結(jié)構(gòu)解耦，js代碼不需要關(guān)心頁(yè)面結(jié)構(gòu)的維護(hù)；但是會(huì)帶來(lái)頁(yè)面上的維護(hù)工作；

思考：

還有沒(méi)有其它更靈活和簡(jiǎn)潔一點(diǎn)的方式呢？

代碼三：

上面是最近的一個(gè)演進(jìn)版本，這個(gè)是一個(gè)公共的邏輯彈層（表單操作等），這里較上一次去調(diào)了事件鉤子，直接采用callback傳遞的方式，并采用鏈?zhǔn)降姆绞竭M(jìn)行處理，頁(yè)面上調(diào)用更加簡(jiǎn)單。

調(diào)用示例：

較之前相比：

1、不需要先去set對(duì)應(yīng)的事件鉤子；

2、方法分離，各司其職。如：show/hide 只負(fù)責(zé)其可見(jiàn)性，其它的由對(duì)應(yīng)的方法處理，使接口方法的職責(zé)更清晰；

3、頁(yè)面結(jié)構(gòu)回歸到了js代碼，考慮多產(chǎn)品的應(yīng)用場(chǎng)景，減少頁(yè)面結(jié)構(gòu)的維護(hù)

ok，拋磚結(jié)束。

最后一句話(huà)，代碼制作無(wú)止境，只有更多的思考、重構(gòu)。讓自己的代碼更具可用性、靈活性。也為團(tuán)隊(duì)降低學(xué)習(xí)成本。

名稱(chēng)欄目：如何讓你網(wǎng)站的代碼更簡(jiǎn)潔
網(wǎng)站網(wǎng)址：http://www.rwnh.cn/news/106238.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、搜索引擎優(yōu)化、響應(yīng)式網(wǎng)站、網(wǎng)站策劃、網(wǎng)站導(dǎo)航、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)