快捷導(dǎo)航

vue 項(xiàng)目代碼拆分的方案

更新時(shí)間：2021年03月18日 09:47:17 作者：Chieffo

這篇文章主要介紹了vue 項(xiàng)目代碼拆分的方案，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下

背景

由于之前的數(shù)據(jù)庫防火墻產(chǎn)品與數(shù)據(jù)庫審計(jì)產(chǎn)品使用的是同一套代碼，隨著兩個(gè)產(chǎn)品功能的差異越來越大，代碼的冗余度和偶合度越來越高，為了便于后期維護(hù)以及添加新功能，所以基于原來的項(xiàng)目代碼，進(jìn)行了代碼結(jié)構(gòu)拆分。

注意：本次拆分只拆分了可以拆分的部分，有的模塊例如：規(guī)則、關(guān)于我們，是沒有進(jìn)行拆分的，一是有的模塊很簡單，沒必要拆分；二是有的模塊原先寫得代碼偶合太嚴(yán)重，無法拆分，如果要拆分，需要花費(fèi)大量精力去梳理代碼，同時(shí)還要后端配合拆分。

目的

將此次代碼拆分方案記錄下來，便于后來的開發(fā)人員快速熟悉項(xiàng)目結(jié)構(gòu)。

拆分前

流程設(shè)計(jì)

項(xiàng)目拆分前，區(qū)分?jǐn)?shù)審和防火墻功能的流程如上圖所示。

訪問系統(tǒng)時(shí)，先加載入口文件 main.js，然后加載登錄頁 login.vue，加載登錄頁的同時(shí)獲取產(chǎn)品模式并保存到 session.storage.platformType 中，接著用戶登錄系統(tǒng)進(jìn)入具體頁面，該頁面同時(shí)包含了數(shù)審和防火墻的功能，根據(jù) session.storage.platformType 保存的值來判斷，具體顯示哪個(gè)功能。

目錄結(jié)構(gòu)設(shè)計(jì)

項(xiàng)目拆分前的目錄結(jié)構(gòu)如上圖所示。

該目錄結(jié)構(gòu)是初始化一個(gè) Vue 項(xiàng)目時(shí)的基本目錄，根據(jù)目錄結(jié)構(gòu)，基本上看不出該項(xiàng)目包含了兩個(gè)不同的產(chǎn)品，也不知道不同產(chǎn)品模式下會(huì)加載哪一部分文件，結(jié)構(gòu)不清晰。

存在的問題

通過分析，可以發(fā)現(xiàn)當(dāng)前的系統(tǒng)流程和目錄結(jié)構(gòu)是存在很多問題的，大概總結(jié)下：

加載登錄頁的時(shí)候才獲取產(chǎn)品模式，如果登錄頁加載完成，而產(chǎn)品模式還未獲取或者獲取不到，那么登錄頁顯示的產(chǎn)品信息有可能是錯(cuò)誤的；
每次進(jìn)入一個(gè)具體頁面，如果同時(shí)包含了數(shù)審和防火墻的功能，都要重新判斷一次，當(dāng)前的功能是數(shù)審的還是防火墻的；
目錄結(jié)構(gòu)不清晰，不清楚哪些模塊是公共模塊，哪些是數(shù)審獨(dú)有的模塊，哪些是防火墻獨(dú)有的模塊；
可維護(hù)性和可擴(kuò)展性差。數(shù)審的代碼和防火墻的代碼混在一個(gè)文件內(nèi)，改代碼的時(shí)候需要重頭看一遍才知道哪塊代碼屬于數(shù)審，哪塊代碼屬于防火墻。如果想要添加一個(gè)功能，還得繼續(xù)加邏輯判斷，代碼越來越臃腫；
業(yè)務(wù)邏輯混亂，與后端通信使用了同一個(gè)接口。

拆分后

流程設(shè)計(jì)

項(xiàng)目拆分后，區(qū)分?jǐn)?shù)審和防火墻功能的流程如上圖所示。

訪問系統(tǒng)時(shí)，先加載入口文件 main.js，該文件中寫了路由攔截相關(guān)的邏輯，在路由攔截時(shí)，如果沒有產(chǎn)品模式，則要先獲取產(chǎn)品模式，否則會(huì)被攔截，進(jìn)不去系統(tǒng)。獲取產(chǎn)品模式后，根據(jù)當(dāng)前產(chǎn)品模式，會(huì)注冊對(duì)應(yīng)的登錄頁、路由配置、接口請(qǐng)求等。當(dāng)注冊完畢后，每次訪問具體的頁面，都應(yīng)該是獨(dú)立的模塊了。

目錄結(jié)構(gòu)設(shè)計(jì)

項(xiàng)目拆分后的目錄結(jié)構(gòu)如上兩個(gè)圖所示。

該目錄結(jié)構(gòu)經(jīng)過拆分，已經(jīng)可以清晰地看到不同產(chǎn)品之間分離出來的文件了，從入口文件開始，經(jīng)過路由攔截后，會(huì)加載指定的登錄頁，然后把對(duì)應(yīng)產(chǎn)品需要的文件合并到公共文件中。比如：http 請(qǐng)求、路由配置等。最終結(jié)果，程序只會(huì)把需要的文件加載進(jìn)去。

解決的問題

經(jīng)過重新設(shè)計(jì)，解決了當(dāng)前項(xiàng)目存在的一些問題：

在加載登錄頁之前，通過路由攔截，必須先獲取產(chǎn)品模式，才能進(jìn)入系統(tǒng)，登錄頁是在獲取到產(chǎn)品模式之后才加載的，不會(huì)出現(xiàn)產(chǎn)品信息顯示錯(cuò)誤的問題；
只有在第一次進(jìn)入系統(tǒng)或刷新頁面的時(shí)候，才會(huì)重新獲取產(chǎn)品模式，合并產(chǎn)品模式對(duì)應(yīng)的文件，合并的文件是拆分后的文件，不需要在文件內(nèi)再次判斷該有數(shù)審的功能還是防火墻的功能。
目錄結(jié)構(gòu)清晰，防火墻相關(guān)的功能模塊文件都放在 views-fw 文件夾內(nèi)。
提高了項(xiàng)目的可維護(hù)性和可擴(kuò)展性，降低了代碼的偶合度。數(shù)審的代碼和防火墻的代碼基本已經(jīng)拆分開，如果想要添加一個(gè)防火墻的功能，只需要在防火墻相關(guān)的文件夾內(nèi)新增對(duì)應(yīng)功能模塊的文件即可。
業(yè)務(wù)邏輯清晰，與后端通信使用的是不同的接口，公共模塊使用的接口按原來的不變，數(shù)審獨(dú)有的接口在 url 前面增加了 audit 前綴，防火墻獨(dú)有的接口在 url 前面增加了 firewall 前綴。

關(guān)鍵代碼

/**
 * @Name: main.js
 * @Author: cqfeng
 * @Description: 項(xiàng)目入口 js 文件
 * @MainFunction: 引入和注冊一些全局資源
 **/
//...省略的代碼...
// 路由攔截，使用全局導(dǎo)航守衛(wèi)beforeEach
router.beforeEach(async (to, from, next) => {
 // 如果沒有產(chǎn)品模式，先獲取產(chǎn)品模式
 if (!store.state.productMode.productMode) {
 await store.dispatch('productMode/SET_PRODUCT_MODE');
 }
//...省略的代碼...

/**
 * @Name: product-mode.js
 * @Author: cqfeng
 * @Description: 產(chǎn)品模式相關(guān)邏輯處理文件
 * @MainFunction: 保存當(dāng)前產(chǎn)品模式，根據(jù)不同產(chǎn)品模式配置 產(chǎn)品登錄頁、http 請(qǐng)求 等資源
 **/
import Vue from 'vue';
import portService from '@/assets/js/service/http/http'; // axios請(qǐng)求
import router from '@/router/index'; // 默認(rèn)路由配置，動(dòng)態(tài)路由配置
import httpAAS from '@/assets/js/service/http/http-aas'; // 數(shù)審獨(dú)有的 http 請(qǐng)求
import httpFW from '@/assets/js/service/http/http-fw'; // 防火墻獨(dú)有的 http 請(qǐng)求
import globalConstant from '@/assets/js/const/global-constant'; // 項(xiàng)目全局常量
export default {
 namespaced: true,
 state: {
 productMode: '', // 產(chǎn)品模式，進(jìn)入系統(tǒng)或刷新頁面時(shí)獲取
 },
 mutations: {
 // 修改產(chǎn)品模式
 changeProductMode: function (state, value) {
  state.productMode = value;
 },
 },
 actions: {
 async SET_PRODUCT_MODE({ commit, state }) {
  let res = await portService.getProductMode();
  if (res.data.code === 0) {
  commit('changeProductMode', res.data.data.productMode);
  }
  // 如果是數(shù)審產(chǎn)品
  if (state.productMode === globalConstant.COMMON.AAS) {
  // 設(shè)置產(chǎn)品登錄頁
  router.addRoutes([
   {
   path: '/login',
   name: 'login',
   component: resolve => {
    require(['@/views/login.vue'], resolve);
   },
   }
  ]);

  // 合并 http 請(qǐng)求，掛載到 Vue 原型上
  Vue.prototype.portService = Object.assign(portService, httpAAS);
  }
  // 如果是防火墻產(chǎn)品
  else if (state.productMode === globalConstant.COMMON.DBSG) {
  // 設(shè)置產(chǎn)品登錄頁
  router.addRoutes([
   {
   path: '/login',
   name: 'login',
   component: resolve => {
    require(['@/views/views-fw/login.vue'], resolve);
   },
   }
  ]);

  // 合并 http 請(qǐng)求，掛載到 Vue 原型上
  Vue.prototype.portService = Object.assign(portService, httpFW);
  }
 }
 }
};

總結(jié)

經(jīng)過拆分，數(shù)審和防火墻的代碼目錄已經(jīng)算是基本分開了，這個(gè)過程花費(fèi)的力氣也很大，也引發(fā)了我的一些思考，一套代碼多個(gè)項(xiàng)目的這種方案是否算好的方案，還有沒有其他更好的方案。如果項(xiàng)目一開始，就按照一套代碼多個(gè)項(xiàng)目的設(shè)計(jì)來開發(fā)，會(huì)不會(huì)后期的維護(hù)成本會(huì)低一些？這些問題我也沒有答案，希望后來者能夠繼承歷史經(jīng)驗(yàn)，更好地開發(fā)出優(yōu)秀的項(xiàng)目。

其他實(shí)現(xiàn)方式

起初設(shè)計(jì)拆分方案的時(shí)候，有兩種方案，一種是通過獲取產(chǎn)品模式動(dòng)態(tài)改變當(dāng)前產(chǎn)品功能，一種是在打包時(shí)通過打包參數(shù)打包指定產(chǎn)品包。最終的方案是選擇第一種。但是，在這個(gè)過程中也參考了一些網(wǎng)上的實(shí)現(xiàn)方案，這里列出來方便以后需要用到進(jìn)行參考。

//m.fzitv.net/article/188869.htm

//m.fzitv.net/article/207835.htm

以上就是vue 項(xiàng)目代碼拆分的方案的詳細(xì)內(nèi)容，更多關(guān)于vue 項(xiàng)目代碼拆分的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: