1. 程式人生 > >業務代碼重構

業務代碼重構

數據 邏輯 查看 query val 插件 nbsp ima set

最近接手了一個新的產品,在原有的基礎上進行改造。

剛拿到這個產品的代碼時,我也是一頭霧水,動就上千行的邏輯代碼,看的讓人很費勁,完全沒有任何套路可言,一擼到底的代碼,拿到後,我就先把代碼拆開,一塊一塊的看

技術分享圖片

最初只有createorder.js,拆開後變成了4個,createordervalidate.js,createorderutils.js,createorderinit.js,拆過之後,代碼分工就比較清晰了,初始化的時候,會加載很多控件,會定義很多全局變量,utils裏是一些工具函數,獲取表單數據,set表單數據,cookies的獲取,url裏參數的獲取,validate就是表單的校驗了,我把表單的提交也放在了這一塊。

重構過之後,編輯,新增訂單可以公用一套代碼,直接調用對應的方法就行了,即使增加一個查看框,也用不了太久就能搞定,之前的方式就是代碼copy,沒有抽出業務公共的邏輯。

jquery系列的老的產品代碼,最好的重構方法就是插件化,現代三大框架,vue,react,angular,就是組件化,加上,數據狀態管理器搞定。

業務代碼重構