首頁 > SEO優化 > 代碼重構:讓你網站的代碼更優美和簡潔

代碼重構:讓你網站的代碼更優美和簡潔

2015-05-11 admin SEO優化 0人評論 49073

代碼重構:讓你網站的代碼更優美和簡潔  SEO優化  第1張

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

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

下面開始拋磚,希望能為在做代碼重構和對代碼重構有興趣的同學能帶來一些啟發和幫助。

實例:Web彈層(Dialog/LayerBox/LogicBox)

代碼重構:讓你網站的代碼更優美和簡潔  SEO優化  第2張

代碼一:

代碼重構:讓你網站的代碼更優美和簡潔  SEO優化  第3張

3分快3 這里創建一個對話框(多例)的基本代碼,這里主要做了以下幾件事

1、  如果頁面上找不到為當前ID的對話框,則創建一個新的;

2、  設置對話框標題;

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

3分快3 4、  設置對話框內容;

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

思考:

3分快3 1、  是否真的需要多例形式的組件;

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

3分快3 3、  ……

代碼二:

代碼重構:讓你網站的代碼更優美和簡潔  SEO優化  第4張

代碼重構:讓你網站的代碼更優美和簡潔  SEO優化  第5張

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

3分快3 對于這次重構后,得到以下改進:

3分快3 1、  將多例改成單例,降低了對實例的維護,并且更方便的對實例進行管理;

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

3分快3 3、  將HTML結構解耦,JS代碼不需要關心頁面結構的維護;但是會帶來頁面上的維護工作;

思考:

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

代碼三:

代碼重構:讓你網站的代碼更優美和簡潔  SEO優化  第6張

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

調用示例:

代碼重構:讓你網站的代碼更優美和簡潔  SEO優化  第7張

較之前相比:

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

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

3分快3 3、頁面結構回歸到了JS代碼,考慮多產品的應用場景,減少頁面結構的維護

OK,拋磚結束。

3分快3 最后一句話,代碼優化無止境,只有更多的思考、重構。讓自己的代碼更具可用性、靈活性。也為團隊降低學習成本。

 

標簽:

發表評論

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

官方微信公眾號
70755559
09:00 - 22:00
QQ客服: 70755559
客服郵箱: 678128@qq.com
2分快3-推荐 1分快3-官网 好运快3-欢迎您 幸运快3-安全购彩 网投app-Welcome 分分快3app-Home 1分快三平台-3分快3 彩票代理-推荐 五福彩票-官网 彩票大赢家-欢迎您