Javascript フレームワークを使用した MVP パターン? [closed] 質問する

Question

MVP の主な目的は、コード内のさまざまな側面を分離することです。通常、JavaScript には、次のような 3 つの主要な側面があります。

イベント処理
DOM操作
サーバー通信（AJAX呼び出し）

これらの懸念事項のそれぞれに対して、MVP からの対応する用語があります。

イベント処理 = プレゼンター
DOM操作 = ビュー
AJAX呼び出し = モデル

実際には、3 つの側面を実装するのは必ずしも簡単ではないため、イベントバスが役立つ場合があります。このバスはシングルトンである必要があり、さまざまなコンテキストで発生したすべてのイベントはバスで公開される必要があります。プレゼンターはイベントに登録し、イベントが発生したときにそれに応じて反応する必要があります。

仕組みは以下のとおりです:

最初に起こるのはページの読み込みです。通常のイベントモデルや jQuery など、便利なものを使用してこれをリッスンします。モデル、ビュー、プレゼンターを作成します。プレゼンターは、ビューとモデルのインスタンスを使用するため、これらを保持する必要があります。

var model = new Model();
var view = new View();
var presenter = new Presenter(model, view);

Presenter はイベントハンドラーなので、バスはそれを認識し、処理のためにイベントをルーティングする必要があることに注意してください。

bus.registerHandler(presenter);

最初のイベントは「init」です。これは、ページが読み込まれ、MVP オブジェクトがすべて設定されていることを意味します。

bus.init(); // call this yourself

これにより、関数など、プレゼンター内で何かがトリガーされます。この例では、presenter.onInit() という on... という命名規則が好まれます。これにより、UI リスナーをインストールする機会が与えられます。

// in the Presenter
onInit: function() {
  view.addSubmitListener();
  view.addWhateverListener();
  ...
}

// in the View (using jQuery)
addSubmitListener: function() {
  $("#submitButton").click(function() {
    var formData = ...
    bus.submit(formData); // publish an event to the bus
  });
}

[送信] ボタンをクリックすると、bus.submit(formData) が呼び出され、ハンドラー presenter.onSubmit(formData) にルーティングされます。

// in the Presenter
onSubmit: function(formData) {
  model.postForm(formData, function(data) {
    // handle the response
    view.updateSomething(data);
  });
}

などなど... 全体的なトリックは、バスをプレゼンターにバインドし、ループに参加することです。

Answer 1