mvc - フロントエンドコードはユーザー操作とモデルの間の 1 対多の関係をどのように処理しますか?

Question

シナリオは次のとおりです。ユーザーがボタンをクリックし、モデル A を更新する必要があり、モデル B を更新する必要があります...このような操作は同時に多くのモデルに依存する必要があるため、これらのコードはたとえば、ViewController で記述されたバックボーンなどです。

曾经蜡笔没有小新 · Answer

ユーザーがボタンをクリックすることは、ユーザーが URL を通じてアクセスすることと本質的に同じです。これは「入力」であるため、問題と処理メカニズムは同じです。ビュー層のコードで「入力」を監視し、一部のビューを処理します。レイヤー (ボタンコンポーネントなど) の切り替え、URL 修正) 内部状態の変化、純粋でより高い抽象レベル (ビューコンポーネントや URL の詳細に関係しない) データ/メッセージを生成/抽出し、ある種のイベントメカニズムを使用してブロードキャストします。あなたとは何の関係もありません。コントローラー層がある場合は、コードのこの部分でこれらのイベントをリッスンし、対応するモデルオブジェクトのメソッドを呼び出します (これにより、モデルオブジェクト自体間の依存関係と呼び出しがカプセル化される可能性があります)。ここでの 1 対多の複雑さは外部に公開されません)、また、特定のモデルオブジェクトの状態変化を監視し、対応するビューオブジェクトのメソッドを呼び出します (または仮想 DOM を再レンダリングします)。すべては拘束されています。

たとえば、私は通常、NervJS (モデル) + DermJS (ビュー) + URLKit (ルート) の組み合わせを使用します。また、NervJS オブジェクトと DermJS オブジェクトには独自のイベントメソッドがあり、view/ を実行するときに統合バスを渡すこともできます。モデルオブジェクトが初期化されます。

UI コンポーネントを作成するときは、当然、特定のモデルに依存したくないので、one-to などのバインディングを使用します。 -多くは別の場所 (具体的にはビジネスロジックコード) で完成します。ビューオブジェクトとモデルオブジェクトは、お互いにどれをいくつ持っているかを知る必要はありません。そのため、「複数のアクションをそれぞれストアに対応させる」ことは不可能です。」。

「単一のファイル」と「継続的に増加するカオス」の問題については、ルーティングファイルの設定と同じです。関連する経験を参照してください。

曾经蜡笔没有小新 · Answer

流動的な状況において、複数のストアに対応するために 1 つのアクションが必要な場合は、実は簡単に解決できます。
ストアにコールバックを登録するときは、このアクションに応答するだけでよく、waitFor を通じて対応する順序を変更することもできます。

コードの混乱が心配な場合は、別の constants ファイルを作成して、トリガーされるイベントの名前を定義できます。

例:

ボタンをクリックしてトリガーsend事件，会更新两个Store分别是StoreA和StoreB。可以写一个constants.js、最初にイベント名を定義します:

定数:

リーリー

次に、2 つのコールバックを登録します Store:

ストアA:

リーリー

ストアB:

リーリー

クリックイベントがトリガーされると、コールバックがAction中触发Disp的这个事件，就会顺序执行在StoreA和StoreBに登録されます:)

PHP中文网 · Answer

そうなったときにいつも考えるのは、間にレイヤーを追加できないかということです。

曾经蜡笔没有小新 · Answer

まだ見ていない場合、または見たことがあるのに忘れてしまった場合、これは読む価値のある記事です:

大規模な JavaScript アプリケーションアーキテクチャのパターン

簡単に言うと、ビューとモデルが相互に依存する必要がないように（1:1 依存関係であっても 1:N 依存関係であっても）、「従来型」のものが必要です。

シンプルなイベントとオブザーバーのパターンを使用することもできます。ビジネスロジックが複雑な場合は、メディエーターを使用してモジュール間の通信と同期を完了します。

追記: 理想的な状況は、各モジュールが自分自身 (どのイベントがトリガーされるか、どのイベントがリッスンされるか) のみを認識し、他のこと、ましてや相手のインスタンスやメディエーターのインスタンスについては何も気にしないことです。