## 前言 本文主要摘錄了前端工程化可能會涉及到的一系列問題，并針對其中一些問題提供了完整的場景說明，期望以及可能的解決方案。 ## 問題列表 ### 高頻因為業務修改公共組件 **問題：** 項目在開發的時候用大量的時間去造了輪子，在輪子的使用上有點過于死板不夠靈活，總是在高頻率的修改組件，尤其是根據業務場景不斷的調整基礎組件。而基礎組件的部分，大部分團隊成員不清晰其使用，其存在的問題。 **建議 ：** 這種建議把公共組件的部分抽離出來，抽出時間，然后做的方式應該是依賴引入的組件去實現特定的功能，對于組件中未實現的，或者需要靈活處理的，給出足夠的解決方案，然后根據業務的部分做出更好的方案，比如項目里的業務組件。 **具體可執行方案 ：** - 抽離可用度高的公共組件庫，脫離出項目，優化約定其使用以及迭代方式 - 針對業務中特殊修改的組件，開發為業務組件，如果需要或者希望完善公共組件，應該前置一個項目周期完成開發上線ui組件，或者后置一個周期，從業務組件中提煉公共組件 - 簡化公共組件的使用方式與依賴方式，對于其具體的使用提供完整的api - 與設計、產品達成從開發到審美到產品交互的積累的同認知 ### api請求 **問題：** 目前的實現是使用mockjs請求easymock的部分，后端未完成的接口返回一個指定的錯誤然后去請求mock的服務器，需要單獨起mock的服務指令，不夠靈活，對于service的api生成沒有較大的優化，參數還是需要校對的。 **具體可執行方案 ：** 1 利用easymock本身的可配置化，配置接口部分請求哪個接口 2 生成的api的部分只是整理了其方法類型，路徑以及其出參和入參，還不夠理想，如果這部分做進一步處理，需要axios做攔截器處理，對請求格式正確以及返回格式正確的做處理 3 mock服務內置到項目的啟動命令中，不要增加開發成本 4 對于mock假數據的生成沒有相關的工具類，無法按照自己預期生成想要的數據 5 需要建立一個easymock的服務器，可以靈活切換不同環境的api，可以新建以及修改不同的文件 ### 過量的前端枚舉字段 **問題：** 前端中存了跟多枚舉字段 ，每次項目啟動的時候都去拉一邊配置的字段，而且是全量的。 **具體可執行方案 ：** 1 按照需求去加載前端的枚舉字段 2 將枚舉的部分通過模塊或者接口的形式實現 3 枚舉字段要建立一定的規則，比如檢查機制，更新機制，使用機制等。尤其像權限的部分，定義的比較不合理。 ### 雙語方案 **問題：** 前端中存了大量的雙語重復字典，每個頁面都會重復維護，改動比較麻煩，而且其唯一的key是不便于使用的。 **具體可執行方案 ：** **分析** 1雙語方案應該是一個產品同一個頁面做的策略，做一個英文網站，一個中文網站也可以，但作為功能性、業務性很強的站點，創建兩個站點意味著很大的工作量。所以第一個決策就是做的是一個站點，然后做雙語翻譯 2 雙語策略應該是一個公開模塊，支持練高的靈活配置，可以實現不同項目的雙語需求 3 雙語方案應該是開放的，由需求或者產品優化或者專業人士不斷根據需求可以在ui界面進行長期維護和便利性查詢的 4 雙語模塊應該實現基本的雙語數據同步，可以定期或者人為同步發布新版本。 5 雙語方案針對沒有翻譯策略的語言提供容錯方案，項目使用時也應該注意到這點。 **具體技術方案** 1 創建數據庫，提供表結構，支持id 中文字段雙唯一索引，支持主體雙語分類，包括常用，系統，考勤，考試，查寢類似的主題雙語方案，支持同條唯一字段里為之提供具體的中英文翻譯甚至更多需要版本，提供字段描述，使用場景。 2 提供雙語平臺，可以進行雙語的維護，以及各種高級查詢 3 發布雙語模塊，基本數據結構與數據庫匹配，可以進行數據庫雙語數據的同步以及發布新版本，支持npm加載，提供公開api，提供中文字段或者其他字段的標準翻譯方法以及翻譯配置，提供常規中英文翻譯工具，具有容錯策略 4 基本的三大框架中都有過濾器實現，擬目前方案根據雙語模塊進行過濾器處理，使用方便，直接需要的字段后面加|就可以。稍微國際化的方案可以根據，i18n的方案。 5 后續會根據阿里國際以及一些大型站點的雙語策略做具體的技術方案調整。 ###