Vue プロジェクト コード分割ソリューション

背景

従来のデータベース ファイアウォール製品とデータベース監査製品は、同じコード セットを使用していたため、両製品の機能の違いが大きくなるにつれて、コードの冗長性と結合性がますます高まりました。その後の保守や新機能の追加を容易にするために、元のプロジェクト コードに基づいてコード構造を分割しました。

注: この分割は、分割できる部分のみを分割します。ルールや会社概要などの一部のモジュールは分割されません。まず、一部のモジュールは非常に単純なので、分割する必要はありません。次に、一部のモジュールの元のコードは結合しすぎていて、分割できません。分割する場合は、コードを整理するために多くの労力が必要になり、バックエンドも分割に協力する必要があります。

目的

このコード分割計画を記録しておくと、後続の開発者がプロ​​ジェクト構造にすぐに慣れることができます。

分割前

プロセス設計

プロジェクトが分割される前、レビュー機能とファイアウォール機能を区別するプロセスは上の図に示されていました。

システムにアクセスするときは、まずエントリファイル main.js をロードし、次にログインページ login.vue をロードします。ログインページをロードしている間に、製品モードを取得し、session.storage.platformType に保存します。次に、ユーザーはシステムにログインし、特定のページに入ります。このページには、データ監査機能とファイアウォール機能の両方が含まれています。表示される特定の機能は、session.storage.platformType に保存された値に基づいて決定されます。

ディレクトリ構造の設計

プロジェクト分割前のディレクトリ構造を上図に示します。

このディレクトリ構造は、Vue プロジェクトを初期化する際の基本ディレクトリです。ディレクトリ構造に基づいて、プロジェクトに 2 つの異なる製品が含まれていることを知ることは基本的に不可能であり、異なる製品モードでファイルのどの部分が読み込まれるかを知ることもできません。構造が明確ではありません。

問題

分析により、現在のシステム プロセスとディレクトリ構造に多くの問題があることがわかりました。これは次のようにまとめることができます。

1. 製品モードはログインページが読み込まれたときに取得されます。ログインページが読み込まれても製品モードが取得されていない、または取得できない場合は、ログインページに表示される製品情報が間違っている可能性があります。
2. 特定のページに入るたびに、そのページにデータ監査機能とファイアウォール機能の両方が含まれている場合は、現在の機能がデータ監査機能なのかファイアウォール機能なのかを再確認する必要があります。
3. ディレクトリ構造が明確ではなく、どのモジュールが共通モジュールで、どのモジュールがデータ監査に固有のモジュールで、どのモジュールがファイアウォールに固有のモジュールであるかが不明です。
4. 保守性と拡張性が低い。データレビュー用のコードとファイアウォール用のコードが 1 つのファイルに混在しています。コードを変更する場合、どのコードがデータレビュー用で、どのコードがファイアウォール用かを把握するために、最初から読み直す必要があります。機能を追加したい場合は、論理的な判断を追加し続けなければならず、コードはどんどん肥大化していきます。
5. ビジネス ロジックがわかりにくく、バックエンドとの通信に同じインターフェイスが使用されます。
   

分割後

プロセス設計

プロジェクトを分割した後、レビュー機能とファイアウォール機能を区別するプロセスを上図に示します。

システムにアクセスするときは、まずルート傍受に関連するロジックを含むエントリ ファイル main.js を読み込みます。ルート傍受中に製品モードがない場合は、まず製品モードを取得する必要があります。そうしないと、傍受され、システムに入ることができません。製品モードを取得すると、現在の製品モードに応じて、対応するログイン ページ、ルーティング構成、インターフェイス要求などが登録されます。登録が完了すると、特定のページへの各アクセスは独立したモジュールになります。

ディレクトリ構造の設計

プロジェクトを分割した後のディレクトリ構造は、上の 2 つの図に示されています。

ディレクトリ構造が分割されると、異なる製品から分離されたファイルが明確に表示されます。エントリ ファイルから開始し、ルーティングをインターセプトした後、指定されたログイン ページが読み込まれ、対応する製品に必要なファイルがパブリック ファイルにマージされます。例: http リクエスト、ルーティング構成など。その結果、プログラムは必要なファイルのみをロードします。

問題は解決した

再設計後、現在のプロジェクトに存在するいくつかの問題が解決されました。

1. ログイン ページを読み込む前に、システムに入る前にルーティング傍受によって製品モードを取得する必要があります。製品モードを取得した後にログイン ページが読み込まれるため、製品情報が誤って表示される問題は発生しません。
2. システムに初めてアクセスしたとき、またはページを更新したときのみ、製品モードが再取得され、製品モードに対応するファイルが結合されます。結合されたファイルは分割ファイルであり、ファイル内でデータ監査機能であるかファイアウォール機能であるかを再度判断する必要はありません。
3. ディレクトリ構造は明確で、ファイアウォール関連の機能モジュールファイルは views-fw フォルダに配置されます。
4. プロジェクトの保守性とスケーラビリティが向上し、コードの結合が減少します。データ監査用のコードとファイアウォール用のコードは基本的に分離されており、ファイアウォール機能を追加したい場合は、ファイアウォール関連フォルダに該当する機能モジュールのファイルを追加するだけで済みます。
5. ビジネス ロジックは明確で、バックエンドとの通信には異なるインターフェイスが使用されます。パブリック モジュールで使用されるインターフェイスは変更されません。監査機能に固有のインターフェイスには URL に「audit」プレフィックスが追加され、ファイアウォールに固有のインターフェイスには URL に「firewall」プレフィックスが追加されます。
   

キーコード

/**
 * @名前: main.js
 * @著者: cqfeng
 * @Description: プロジェクトエントリ js ファイル* @MainFunction: いくつかのグローバルリソースをインポートして登録する**/
//...コードは省略...
// グローバルナビゲーションガードbeforeEachを使用したルートインターセプション
router.beforeEach(非同期(to, from, next) => {
 // 製品モードがない場合は、まず製品モードを取得します if (!store.state.productMode.productMode) {
 ストアのディスパッチを待機します('productMode/SET_PRODUCT_MODE');
 }
//...コードは省略...

/**
 * @名前: product-mode.js
 * @著者: cqfeng
 * @Description: 製品モード関連のロジック処理ファイル* @MainFunction: 現在の製品モードを保存し、さまざまな製品モードに応じて製品ログインページ、HTTP リクエスト、およびその他のリソースを構成します**/
'vue' から Vue をインポートします。
import portService from '@/assets/js/service/http/http'; // axios リクエストimport router from '@/router/index'; // デフォルトのルーティング構成、動的ルーティング構成import httpAAS from '@/assets/js/service/http/http-aas'; // データ監査に固有の http リクエストimport httpFW from '@/assets/js/service/http/http-fw'; // ファイアウォールに固有の http リクエストimport globalConstant from '@/assets/js/const/global-constant'; // プロジェクトのグローバル定数export default {
 名前空間: true、
 州： {
 productMode: '', // 製品モード、システムに入るときまたはページを更新するときに取得されます},
 突然変異:
 // 製品モードを変更する changeProductMode: function (state, value) {
  状態.productMode = 値;
 },
 },
 アクション: {
 非同期SET_PRODUCT_MODE({コミット、状態}) {
  res = portService.getProductMode() を待機します。
  （res.data.code === 0）の場合{
  コミット('changeProductMode', res.data.data.productMode);
  }
  // デジタル製品の場合 if (state.productMode === globalConstant.COMMON.AAS) {
  // 製品ログインページを設定する router.addRoutes([
   {
   パス: '/login',
   名前: 'ログイン',
   コンポーネント: 解決 => {
    必要(['@/views/login.vue']、解決)。
   },
   }
  ]);

  //http リクエストをマージして Vue プロトタイプに添付します。Vue.prototype.portService = Object.assign(portService, httpAAS);
  }
  // ファイアウォール製品の場合 else if (state.productMode === globalConstant.COMMON.DBSG) {
  // 製品ログインページを設定する router.addRoutes([
   {
   パス: '/login',
   名前: 'ログイン',
   コンポーネント: 解決 => {
    必要(['@/views/views-fw/login.vue']、解決)。
   },
   }
  ]);

  //http リクエストをマージし、Vue プロトタイプに添付します。Vue.prototype.portService = Object.assign(portService, httpFW);
  }
 }
 }
};

要約する

分割後、データ監査とファイアウォールのコード ディレクトリは基本的に分離されました。このプロセスには多大な労力がかかり、いくつかの考えも浮かびました。複数のプロジェクトに 1 セットのコードを使用するのは良い考えでしょうか。もっと良い解決策はあるでしょうか。最初から1セットのコードで複数のプロジェクトの設計に従ってプロジェクトを開発すると、その後のメンテナンスコストは低くなりますか？これらの質問に対する答えは私にはわかりませんが、将来の世代が歴史的経験を受け継ぎ、より良いプロジェクトを開発できることを願っています。

その他の実装

分割計画が最初に設計されたとき、2 つのオプションがありました。1 つは、製品モデルを取得して現在の製品機能を動的に変更することであり、もう 1 つは、パッケージング中にパッケージング パラメータを通じて指定された製品パッケージをパッケージ化することです。最終的な解決策は最初のものを選択することです。ただし、このプロセスでは、いくつかのオンライン実装ソリューションも参照しました。これらは、今後の参考のためにここにリストされています。

//www.jb51.net/article/188869.htm

//www.jb51.net/article/207835.htm

以上がVueプロジェクトコード分割計画の詳しい内容です。Vueプロジェクトコード分割の詳細については、123WORDPRESS.COMの他の関連記事に注目してください！