JavaScriptのMVCパターンについて語る_基礎知識

原文: Model-View-Controller (MVC) with JavaScript
著者: Alex@Net
翻訳: JavaScript の MVC パターン
翻訳者: justjavac

この記事では、JavaScript でのモデル ビュー コントローラー パターンの実装を紹介します。

私は JavaScript が大好きです。なぜなら、JavaScript は世界で最も柔軟な言語の 1 つだからです。 JavaScript では、プログラマは好みに応じて、手続き型またはオブジェクト指向のプログラミング スタイルを選択できます。 ヘビー ユーザーであれば、JavaScript を使用するとプロセス指向、オブジェクト指向、アスペクト指向などを簡単に処理できます。JavaScript を使用すると、開発者は関数型プログラミング手法を使用することもできます。

この記事での私の目標は、JavaScript の威力を皆さんに示すために、簡単な JavaScript コンポーネントを作成することです。 このコンポーネントは編集可能な項目リスト (HTML の選択タグ) です。ユーザーは項目を選択して削除したり、リストに新しい項目を追加したりできます。 このコンポーネントは、MVC デザイン パターンのモデル ビュー コントローラーに対応する 3 つのクラスで構成されます。

この記事は単なるガイドです。 実際のプロジェクトで使用する場合は、適切な変更を加える必要があります。 JavaScript プログラムを作成して実行するために必要なものはすべて揃っていると思います。頭脳、手、テキスト エディター (メモ帳など)、ブラウザー (私のお気に入りの Chrome など)。

コードでは MVC パターンを使用するため、ここでこの設計パターンを簡単に紹介します。 MVC パターンの英語名は Model-View-Controller パターンです。その名前が示すように、その主要な部分は次のとおりです。

•Model()、プログラムで使用されるデータを保存するために使用されます。

•ビュー、さまざまな形式でデータを表示するために使用されます。
•コントローラー (コントローラー)、モデルを更新しました。
Wikipedia の MVC アーキテクチャの定義では、次の 3 つの部分で構成されています。

モデル - 「データ モデル」(モデル) は、アプリケーションのビジネス ロジックとデータの処理方法に関連するデータをカプセル化するために使用されます。 「モデル」はデータに直接アクセスできます。 「モデル」は「ビュー」や「コントローラー」に依存しません。つまり、モデルは、モデルがどのように表示されるか、どのように操作されるかを気にしません。

ビュー - ビュー レイヤーにより、データ (通常はユーザー インターフェイス要素) を目的に応じて表示できます。 通常、ビューには手続き型ロジックはありません。 Web アプリケーションの MVC では、動的データを表示する HTML ページは通常、ビューと呼ばれます。

コントローラー (コントローラー) - イベント (通常はユーザー操作) を処理して応答し、モデル上の変更を監視して、ビューを変更します。

コンポーネントのデータは項目のリストであり、その中で特定の項目を 1 つ選択して削除できます。コンポーネントのモデルは非常に単純です。データは配列プロパティと選択された項目プロパティに保存されます。それは:

MVC に基づいてデータ リスト コンポーネントを実装します。リスト内の項目は選択および削除できます。 したがって、コンポーネント モデルは非常に単純です。必要なプロパティは 2 つだけです:

1. 配列 _items はすべての要素を格納するために使用されます

2. 通常の変数 _selectedIndex は選択された要素のインデックスを格納するために使用されます
コードは次のとおりです:

コードをコピー コードは次のとおりです:

/**
*モデル。
*
* モデルはすべての要素を保存し、状態が変化したときにオブザーバーに通知します。
*/
function ListModel(items) {
this._items = items;        // すべての元素
this._selectedIndex = -1;   // 被選択要素のインデックス

this.itemAdded = 新しいイベント (この);
this.itemRemoved = 新しいイベント (この);
this.selectedIndexChanged = 新しいイベント (この);
}

ListModel.prototype = {
getItems : function () {
return [].concat(this._items);
},

addItem : function (item) {
this._items.push(item);
this.itemAdded.notify({item : item});
},

removeItemAt : function (index) {
var item;

item = this._items[index];
this._items.splice(index, 1);
this.itemRemoved.notify({item : item});

if (index === this._selectedIndex) {
this.setSelectedIndex(-1);
}
},

getSelectedIndex : function () {
return this._selectedIndex;
},

setSelectedIndex : function (index) {
varPreviousIndex;

previousIndex = this._selectedIndex;
this._selectedIndex =index;
this.selectedIndexChanged.notify({previous :PreviousIndex});
}
};

イベントは単一の実現された観察者モード (観察者パターン) の種類:

复制代代码如下:

function Event(sender) {
this._sender = sender;
this._listeners = [];
}

Event.prototype = {
attach : function (listener) {
this._listeners.push(listener);
},

Notice : function (args) {
varindex;

for (index = 0;index this._listeners[index](this._sender, args);
}
}
};

View クラスには、相互に通信するためにコントローラーの種類を指定する必要があります。 ただし、このタスクにはさまざまなインターフェースがある可能性がありますが、最も単一であることが望ましいです。 2 つの選択: 「追加」は項目を追加し、「選択」は選択された項目を削除します。 コンポーネントによって提供される「選択」機能には、コントロールの生成機能のサポートが必要です。

1 つのビュー クラスはコントローラ クラス上で定義されており、その中で「…コントローラはユーザー入力イベントを処理し、通常は登録済みの返還関数によって行われます」(wikipedia.org)。

次はビューとコントローラーです:

复制代码代码如下:

/**
* 表示します。
*
* ビューはモデル データを表示し、UI イベントをトリガーします。
* コントローラーは、これらのユーザー インタラクション イベントを処理するために使用されます
*/
function ListView(model, elements) {
this._model = model;
this._elements = elements;

this.listModified = 新しいイベント (この);
this.addButtonClicked = 新しいイベント (この);
this.delButtonClicked = 新しいイベント (この);

var _this = this;

// 绑定モデル监听器
this._model.itemAdded.attach(function () {
_this.rebuildList();
});

this._model.itemRemoved.attach(function () {
_this.rebuildList();
});

// 将监听器は HTML コントロール上に設定されます
this._elements.list.change(function (e) {
_this.listModified.notify({index : e.target.selectedIndex });
});

this._elements.addButton.click(function () {
_this.addButtonClicked.notify();
});

this._elements.delButton.click(function () {
_this.delButtonClicked.notify();
});
}

ListView.prototype = {
show : function () {
this.rebuildList();
},

rebuildList : function () {
var list, items, key;

list = this._elements.list;
list.html('');

items = this._model.getItems();
for (項目にキーを入力) {
if (items.hasOwnProperty(key)) {
list.append($(' ' items[key] ''));
}
}

this._model.setSelectedIndex(-1);
}
};

/**
* コントローラー。
*
* コントローラーはユーザーの操作に応答して、モデルの変更関数を呼び出します。
*/
function ListController(model, view) {
this._model = model;
this._view = view;

var _this = this;

this._view.listModified.attach(function (sender, args) {
_this.updateSelected(args.index);
});

this._view.addButtonClicked.attach(function () {
_this.addItem();
});

this._view.delButtonClicked.attach(function () {
_this.delItem();
});
}

ListController.prototype = {
addItem : function () {
var item = window.prompt('Add item:', '');
if (item) {
これ。 _model.addItem(item);
}
},

delItem : function () {
varindex;

index = this._model.getSelectedIndex();
if (index !== -1) {
this._model.removeItemAt(this._model.getSelectedIndex());
}
},

updateSelected : function (index) {
this._model.setSelectedIndex(index);
}
};

当然、モデル、ビュー、コントローラーの種類が適切に例示されます。

以下は、この MVC を使用する完全なコードです:

复制代码代码如下:

$(function () {
var model = new ListModel(['PHP', 'JavaScript']),

view = new ListView(model, {
'list' : $('#list'),
'addButton' : $('#plusBtn'),
'delButton' : $( '#minusBtn')
}),

controller = new ListController(model, view);       
view.show();
});

   
  -