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

代碼重構(gòu)，簡單來講就是把原來的代碼重新構(gòu)建和編寫，讓代碼更加清晰，提升代碼的復用性和性能等。

下面開始拋磚，希望能為在做代碼重構(gòu)和對代碼重構(gòu)有興趣的同學能帶來一些啟發(fā)和幫助。 代碼優(yōu)化 代碼重構(gòu) 前端優(yōu)化

實例：Web彈層（Dialog/LayerBox/LogicBox）

代碼優(yōu)化 代碼重構(gòu) 前端優(yōu)化

代碼一：

代碼優(yōu)化 代碼重構(gòu) 前端優(yōu)化

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

1、如果頁面上找不到為當前ID的對話框，則創(chuàng)建一個新的；

2、設置對話框標題；

3、設置右上角關閉命令菜單的事件；

4、設置對話框內(nèi)容；

5、設置對話框操作按鈕。

思考：

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

2、是否真的需要在右上角加一個關閉命令菜單；

3、……

代碼二：

代碼優(yōu)化 代碼重構(gòu) 前端優(yōu)化

代碼優(yōu)化 代碼重構(gòu) 前端優(yōu)化

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

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

1、將多例改成單例，降低了對實例的維護，并且更方便的對實例進行管理；

2、事件機制的改成，減少事件綁定和維護；

3、將HTML結(jié)構(gòu)解耦，JS代碼不需要關心頁面結(jié)構(gòu)的維護；但是會帶來頁面上的維護工作；

思考：

還有沒有其它更靈活和簡潔一點的方式呢？

代碼三：

代碼優(yōu)化 代碼重構(gòu) 前端優(yōu)化

上面是最近的一個演進版本，這個是一個公共的邏輯彈層（表單操作等），這里較上一次去調(diào)了事件鉤子，直接采用callback傳遞的方式，并采用鏈式的方式進行處理，頁面上調(diào)用更加簡單。

調(diào)用示例：

代碼優(yōu)化 代碼重構(gòu) 前端優(yōu)化

較之前相比：

1、不需要先去set對應的事件鉤子；

2、方法分離，各司其職。如：show/hide 只負責其可見性，其它的由對應的方法處理，使接口方法的職責更清晰；

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

OK，拋磚結(jié)束。

最后一句話，代碼優(yōu)化無止境，只有更多的思考、重構(gòu)。讓自己的代碼更具可用性、靈活性。也為團隊降低學習成本 本文來源于成都網(wǎng)站建設公司與成都網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)站標題：如何讓網(wǎng)站的代碼更優(yōu)美和簡潔：代碼重構(gòu)
網(wǎng)站路徑：http://jinyejixie.com/news46/316896.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、靜態(tài)網(wǎng)站、電子商務、網(wǎng)站設計、營銷型網(wǎng)站建設、關鍵詞優(yōu)化

廣告

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