做業系統前端架構總結

項目目的：

1. 配合本地完成app資源本地化（後面文章會詳細說明）

2. 新題型發佈無需app本地發版

3. 統一數據源

4. 前端組件的高維護性、高複用性、高可讀性

5  更換技術棧：vue全家桶

 

項目技術棧：

根據公司前端工程化定製的 sublime IDE(webpack,svn,secure CRT)、vue全家桶

 

架構：

（1） 視圖層

（2）數據層

關鍵點與創新

（1）在保證高可複用性的基礎上作到每一個題型組件的流程獨立

利用vuex數據共享的高效率優點，下降組件間數據通訊的耦合度，提升組件複用率。儘量分離業務組件與基礎組件。下降複用成本與冗餘代碼。

（2）將vuex數據層與題型配置文件結合成最終的渲染函數，數據是死的，可是配置是可手動配置的，是靈活的，在組件渲染以前動態生成渲染函數生成相應的組件id。增長了整個業務流程的靈活性，並且可以作到配置文件的配置即生效。

（3）增長可選配置，在基礎配置沒法知足的狀況下，能夠跨配置進行調度。能夠兼容舊版本的數據，大大提升了靈活性（被舊版本的數據兼容逼出來的想法）。

（4）增長 數據無對應配置狀況下的 空組件，用以對用戶作 空組件提示，在數據版本更高的狀況下，提升了業務流程的完整性，增長了容錯機制。

（5）利用vue的混入，在h5與app本地交互時，將要求單次調用的方法都注入至事件池中，在單次調用的方法中遍歷事件池中的方法，依次執行。避免了對單次調用的方法進行覆蓋。