JavaScript - Web アプリのビジネス プロセスは基本的に同じで、複数のテーマ セット (スタイルは基本的に異なり、インタラクションはわずかに異なります) が管理され、常に新しいテーマが存在します。

Question

ビジネスシーン

単一ページの一連のアプリケーションをさまざまなパートナーに接続する必要があるため、UI を調整する必要があり、場合によっては一部のインタラクションを変更する必要がありますが、プロセス全体は基本的に同じです。

現在、Vue を使用してプロジェクトを再構築し、パブリック ビジネス ロジックをビジネス層に分離する予定ですが、ページ レベルのコンポーネントを作成するときに、ログインなどの再利用可能なコードのほとんどがまだ残っていることがわかりました。ページ:

リーリー

これはすべてのバージョンに存在します。基本的に、一連のビューモデルを使用してこのビジネス プロセスを記述することができます。繰り返されるコードのこの部分は再利用可能だと思います。

新しいバージョンごとに、ほとんどの変更はスタイルと少量のインタラクションです (多くのインタラクションもありますが、特定のビジネス ロジック プロセスは変更されていません)。

検討済み:

オプション 1:

リーリー

ただし、一般的には、最初に UI コンポーネントがあり、次にビジネス コンポーネントが存在する必要があります。ここでは、最初にビジネス コンポーネント、次に UI コンポーネントが存在するように設計されています。

オプション II:

リーリー

アイデアが非常に乱雑です。いくつか意見をください。ありがとうございます。

Answer 1

まず、[コンポーネント]とモジュールの概念を区別してください。コンポーネントは UI インタラクションを表現するためにのみ使用され、フロントエンドやバックエンドのリクエストなどのビジネス ロジックを含めるべきではありません。

具体的に言えば、Sass ベースのサイト開発では、多くの場合、この種の [機能を構成できる] 要件に対処する必要があります。一般的なプロセスは次のとおりです。

1. バックエンドは[関数構成]インターフェースを開き、ページが読み込まれるときにフロントエンドは[現在のページ構成パラメーター]情報を取得します

2. フロントエンドは各ビジネスロジックを独立したJSモジュールにカプセル化し、エクスポートモジュールの機能を通じてVueのUI層にビジネス機能を提供します。

3. フロントエンド UI レイヤーは、機能構成に基づいてさまざまなモジュール関数を呼び出します。

簡単に言えば、開発モデルは Vue シングルページ アプリケーションと一致しており、機能構成に基づいて UI ロジックを定義する JS モジュールを追加してカプセル化するだけです。

動的テーマ切り替え機能に関しては、設定インターフェースを通じて実装することもできます。たとえば、構成インターフェイスのスタイル フィールドには、現在のビジネス パーティのテーマを識別する className プレフィックスが保存され、対応する CSS を使用してスタイル プレフィックスを現在のページにバインドすることで、テーマの切り替えを簡単に実現できます。

:class追記: プロジェクトの開始時にミックスインを使用しないでください。ミックスインにより、ビジネス ロジックの検索とデバッグが困難になる可能性があります (ミックスインでミックスした後、未知の場所からインポートされた関数や変数が参照される可能性があります)。正しいアプローチは、オンデマンドでビジネス モジュールをインポートすることです。

Answer 2

1. UI と機能コンポーネント (ネットワーク リクエスト、ローカル ストレージなど) が分離されており、機能コンポーネントは基本的に自由に組み合わせることができます。

UI コンポーネントの抽出と分割の具体的な粒度は、対象プロジェクト間の違いの大きさと、反復的なリリース速度の要件によって異なりますが、実際には、再利用性の度合いが高いほど良いというわけではありません。効率が低いほど、エラーが発生する可能性が高くなり、バランス ポイントを達成する必要があるデバッグの難易度が高くなります。