7月安卓手機性能榜：紅魔8S Pro再奪榜首
7月份的手機市場風平浪靜，除了紅魔和努比亞帶來了兩款搭載驍龍8Gen2領先版處理器的新機之外，別的也想不到有什么新品了，這也正常，通常6月7月都是手機廠商修整的時間，進入8月份之
A平臺與B平臺同屬于同一系統(tǒng)鏈路上，前者主要致力于為用戶提供注冊入駐服務，后者則專注于提供具體業(yè)務操作服務。兩者皆為運營人員所依賴的在線管理工具。
目前這兩個平臺服務于同一業(yè)務方，且B應用的頁面已經(jīng)100%嵌入到了A應用的平臺上，除此以外目前存在系統(tǒng)上及體驗上的痛點如下：
所以當時我們考慮既然服務于同一業(yè)務方是否能在代碼層面上將兩個平臺進行融合，通過系統(tǒng)的融合來達到優(yōu)化用戶體驗以及降本增效的效果呢？
平臺融合后，主要的優(yōu)化點體現(xiàn)在以下四方面：
優(yōu)化前（跳轉(zhuǎn)單個頁面白屏時間達2998ms左右）：
優(yōu)化后（跳轉(zhuǎn)單個頁面白屏時間800ms左右）：
?部署優(yōu)化：A應用前后端合部署，現(xiàn)計劃分離前端獨立部署；
?資源節(jié)約：經(jīng)行云部署平臺調(diào)研，擬采用混合部署策略，將A應用與B應用前端靜態(tài)資源集中部署于一組容器，以優(yōu)化資源利用；
?A應用的三個項目與后端共享一個代碼倉庫，采用統(tǒng)一的編碼標準；而B應用則使用獨立的代碼倉庫，需從中分離出前端代碼，并確保分離過程不影響現(xiàn)有配置；
?4個項目的技術選型框架都為vue2，依賴項略有不同；
?A應用和B應用為erp登錄；
為了讓用戶融合無體驗差別，兩個平臺的用戶繼續(xù)使用各自的域名進行訪問，融合后的項目可以自動識別當前環(huán)境，加載對應的內(nèi)容；保證融合前后用戶查看的內(nèi)容是一致的；
針對融合，我們首先考慮的是融合后如何防止文件沖突，減少融合的復雜度，降低出問題的概率。保證兩個系統(tǒng)能正常運行；拆分邏輯分以下三個方面：
1）文件拆分與分類
兩個系統(tǒng)涉及到幾十個文件，經(jīng)過分析，我們將其拆分成以下幾部分內(nèi)容：【頁面文件、公共組件文件、mock文件、AxPI接口文件、基礎請求封裝文件、路由組件文件、Store文件、公共樣式文件、公共方法組件、mainjs文件、index.html文件】
2）結構整合與差異化處理
由于兩個項目的結構相似，我們可以針對各個部分進行整合。整體的思路是，對于差異比較大的文件，建立兩個獨立的文件夾，分別包含系統(tǒng)A和系統(tǒng)B的內(nèi)容；然后通過一個index文件，識別到當前的運行環(huán)境是系統(tǒng)A還是系統(tǒng)B，再分別加載對應的內(nèi)容；
3）內(nèi)容融合與沖突解決
針對差異比較小或者無差異的文件，我們將文件內(nèi)容進行融合。對于沖突的內(nèi)容，我們進行了手動修改，并對全局引用部分進行同步修改；
├── root│ ├── mocks│ ├── public│ ├── src│ │ ├── api│ │ │ ├── apiA // 存儲 A 業(yè)務請求接口│ │ │ ├── apiB // 存儲 B 業(yè)務請求接口│ │ │ ├── apiC // 存儲 C 業(yè)務請求接口│ │ │ ├── baseHttp.js // 封裝基礎請求│ │ │ ├── ARequest.js // A業(yè)務的公共處理，請求header和響應code碼等處理│ │ │ ├── BRequest.js // B業(yè)務的公共處理，請求header和響應code碼等處理│ │ │ ├── CRequest.js // C業(yè)務的公共處理，請求header和響應code碼等處理│ │ │ ├── DRequest.js // D業(yè)務的公共處理，請求header和響應code碼等處理│ │ ├── assets│ │ │ ├── icons // icon內(nèi)容│ │ ├── common│ │ │ ├── config│ │ │ ├── styles // 一些公共的樣式│ │ ├── components // 公共組件│ │ ├── directive // 自定義指令│ │ ├── layout //公共布局│ │ ├── router│ │ │ ├── a.js // 對應a應用│ │ │ ├── b.js // 對應b應用│ │ │ ├── c.js // 對應c應用│ │ │ ├── index.js│ │ ├── store│ │ │ ├── modules│ │ │ ├── getters.js│ │ │ ├── index.js│ │ ├── utils │ │ ├── views│ │ │ ├── a // a 業(yè)務文件│ │ │ ├── b // b 業(yè)務文件│ │ │ ├── c // c 業(yè)務文件│ │ ├── main.js│ │ └── App.vue│ ├── env│ ├── package.json應用類型判斷是我們重要的一環(huán)，是我們識別環(huán)境的基礎，當用戶通過不同的域名訪問到應用的時候，前端維護一個映射表，不同的域名代表不同的應用；在main.js文件中會在第一時間執(zhí)行判斷識別；
let APPLICATION_TYPE = 'a'let host = window.location.host;// 維護域名列表，包含測試和線上環(huán)境const A_HOST = ['a.com','a_pre.com']const B_HOST = [] const C_HOST = []const D_HOST = []if(A_HOST.includes(host)){ APPLICATION_TYPE = 'a'}else if(B_HOST.includes(host)){ APPLICATION_TYPE = 'b'}else if(C_HOST.includes(host)){ APPLICATION_TYPE = 'c'}else if(D_HOST.includes(host)){ APPLICATION_TYPE = 'd'}// 掛載全局window._APPLICATION_TYPE = APPLICATION_TYPE根據(jù)不同的域名獲取路由配置，根據(jù)路由配置生成路由；系統(tǒng)A和系統(tǒng)B各自維護一個路由列表；當從后端請求回來路由結構之后，根據(jù)不同的應用映射不同的文件內(nèi)容；其中路由path保持不變，compoent增加前綴（應用類別）找到對應的應用下的組件；
?第一步：前端獲取當前域名，確認當前應用
根據(jù)全局的 APPLICATION_TYPE 字段識別?第二步：前端維護一個路由列表
let router=[{ path: '/home', component: Layout, meta: { title: '首頁', icon: 'el-icon-s-grid', alwaysShow: true }, redirect: '/home', children: [ { path: '/home', component: () => import('@/views/home/index'), name: 'home', meta: { title: '首頁', icon: ''} } ] }]?第三步：根據(jù)當前應用請求后端接口，獲取路由配置信息（component的路徑前拼接各個應用的文件名）
let RouterApi={'a':'/api1','b':'/api2','c':'api3'}api.get(RouterApi[APPLICATION_TYPE])component='各個應用文件名'+接口返回路徑?第四步：針對在路由信息放置在前端的應用，前端維護一個路由的配置信息表
import dRouter from './d.json'if(APPLICATION_TYPE==='d'){ router=dRouter}?第五步：根據(jù)路由配置信息，生成路由結構
?第六步：實例化Vue對象
環(huán)境主要分為以下幾種：mock環(huán)境、本地開發(fā)環(huán)境、測試環(huán)境、線上環(huán)境
不同的環(huán)境對應不同的變量文件，在變量文件中設置每個端需要用到的參數(shù)，結合 APPLICATION_TYPE 和變量文件的配置，獲取到對應的參數(shù)
示例：
# .env.pruduction# a 業(yè)務VUE_APP_A_BASEURL = '' # b 業(yè)務VUE_APP_B_BASEURL = ''# c 業(yè)務VUE_APP_C_BASEURL = ''# d業(yè)務VUE_APP_D_BASEURL = ''1）公共請求的封裝
封裝基礎的公共請求createHttp.js，各業(yè)務基于公共的請求和各自的code碼，請求參數(shù)等信息進行再次封裝，然后可以按照業(yè)務需求調(diào)用；
?基礎請求：createHttp.js
?業(yè)務公共封裝：
a. ARequest.js（A業(yè)務公共參數(shù)和code碼處理）
b. BRequest.js （B業(yè)務公共參數(shù)和code碼處理）
c. CRequest.js（C業(yè)務公共參數(shù)和code碼處理）
d. DRequest.js（D業(yè)務公共參數(shù)和code碼處理）
?業(yè)務層調(diào)用：
a. api/apiA A業(yè)務接口
b. api/apiB B業(yè)務接口
c. api/apiC C業(yè)務接口
// 公共請求封裝 baseHttp.jsexport const createHttp = (baseUrl, successFun = () => {}, errorFun = () => {}, requestInterceptor = () => {}) => { const http = axios.create({ baseURL: baseUrl, timeout: 5 * 60 * 1000, withCredentials: true }) // http request 攔截器 http.interceptors.request.use( async config => { await requestInterceptor(config) return config }, err => { return Promise.reject(err) } ) // http response 攔截器 http.interceptors.response.use(successFun, errorFun) return http}//A業(yè)務基礎請求 function requestInterceptor(){ // A系統(tǒng)公共請求參數(shù)處理... }function successFn(){ // A系統(tǒng)公共響應結果處理 統(tǒng)一新增}function errorFn(){ // A共異常處理 包括code碼等情況}export default createHttp(baseUrl,successFn,errorFn,requestinterceptor)3）業(yè)務接口使用，根據(jù)不同的業(yè)務劃分不同的目錄分支
// A業(yè)務請求調(diào)用ARequest.get(url,{params:data})//B業(yè)務請求調(diào)用BRequest.post(url,{params:data})根據(jù)應用類型字段APPLICATION_TYPE，識別不同的環(huán)境，請求不同的服務端接口；不同的服務端代表了不同的應用；
針對不同的應用的未登錄情況，前端維護多套登錄處理邏輯，根據(jù)應用類型進行不同的處理邏輯；
創(chuàng)建一個公共的utils文件夾，針對兩個項目中的公共函數(shù)進行合并，針對有沖突的函數(shù)，進行命名修改，全局引入的部分進行路徑和函數(shù)的同步修改；
梳理了兩個項目的腳手架配置差異項及各個配置的作用，對配置作了部分的修改和優(yōu)化，在滿足原有的功能情況下不影響正常的項目運行；
store的整體結構保持不變，在項目引用的地址也保持不變，由于項目中使用store的地方較多，保持結構不變能保證改動成本最小，針對兩個項目中模塊名重復的情況，手動把模塊里的內(nèi)容進行合并；
針對現(xiàn)有的名稱重復內(nèi)容不一樣的函數(shù)，根據(jù)應用類型字段 APPLICATION_TYPE 把兩個函數(shù)進行融合進行分別處理；
?引用方式變更
由于業(yè)務需求，應用A中嵌套了應用B的頁面，之前通過iframe引用。融合后，頁面文件和組件不再隔離，可以直接引入應用B的文件和組件；
?后端數(shù)據(jù)打通
應用A的后端服務器上有一些功能，如下載列表，應用B項目需要使用時因數(shù)據(jù)不通難以直接引用。前端融合后，可以在應用B中直接引用應用A的頁面組件，實現(xiàn)業(yè)務的順暢使用。效果如下：
在經(jīng)歷了為期兩個月的緊張工作后，我們成功地將兩個大型項目進行了深度整合，取得了顯著的階段性成果。通過這一融合過程，我們不僅統(tǒng)一了項目的代碼規(guī)范和架構，還顯著提升了組件的復用率。盡管在這個過程中我們遇到了諸多挑戰(zhàn)和曲折，但最終的成果——用戶體驗的顯著提升——使一切努力都顯得彌足珍貴。
我們深知，每一個成功的項目背后都有無數(shù)次的嘗試和優(yōu)化。在這個過程中，我們不斷學習、適應和完善，最終實現(xiàn)了項目的無縫融合。我們相信，這段經(jīng)歷和我們所取得的成果，不僅為我們團隊帶來了寶貴的經(jīng)驗和教訓，也可能為那些正在經(jīng)歷類似挑戰(zhàn)的同學提供了一些啟示和幫助。
本文鏈接：http://www.www897cc.com/showinfo-26-91371-0.html大型前端應用如何做系統(tǒng)融合？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 12306技術內(nèi)幕，你知道嗎？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號