最近在學著使用前端框架來處理前端頁面的呈現，同時也拿來當成授課的內容，帶著學生實作了一個範例，不過只是把Vue.js引入後做一些資料綁定的動作，展現給學生了解使用框架和先前的做法有什麼差異。
這兩天則是自己把組件的部份玩了一下，同時把自己的一個案子做了修改，整個改下來的心得就是HTML / CSS / JS可以切得很乾淨，在維護上和後續功能的維護上的確帶來了方便，而且不用再去擔心資料異動時的DOM更新問題；但是整體程式碼並沒有少很多，主要是因為不同的開發方式，各自有不同的細節要注意，因此單就程式碼的撰寫工作上並不一定真的會有所減少，或更輕鬆，不過這個問題我有和學生解釋邊際效應的狀況，因為目前我們課程中練習的範例規模都不大，因此很容易會發生這種使用了框架或物件導向時，似乎沒有比直接原生寫來得省工或乾淨的感覺，但是當開發的規模到達一定程度時，這些不同的開發方式的效益才會顯現出來。
另一個心得就是重構的問題，目前我還只是在現有的案子上引入vue.js來使用，同時還搭配Jquery來處理一些ajax及dom的操作，相比之前在js 裏夾雜一堆html及css來說，目前的架構己經改善很多了，但是我為了快速套用，所以每個功能模組都單獨產生一個Vue的實例來運作，然後再利用實例之間互相丟資料來維持功能和先前的做法一致，理想的做法是整個網站都納入Vue.js的控管之下，儘可能把網站的內容都拆成組件來使用，這需要整個重構，但這樣做之後相信會更清爽及好維護。
最後我還沒空使用到Vue-router,Vue-x，等下個月有空再來研究看看，相信對於前端的網頁內容控制會更有幫助。
留言