著者：マイル
3つの違いについての記事を何回読んだかはわかりませんが、それぞれ写真と事実がありますが、3つの違いについて尋ねられたとき、それでもはっきりと説明できないと感じました。よくわかりませんでした。
MVC
次の図に示すように、ViewとControlerの両方がモデルにアクセスでき、モデルのデータフローメソッドは双方向です。つまり、VとCの両方がデータを変更でき、データを取得することもできます。
上の図は、コードレベルで次のように表示されます。
基本構造：
function createMVC() {
var MVC = {};
MVC.model = function() {
}
MVC.view = function() {
}
MVC.controler = function() {
}
}
たとえば、ニュースリストモジュールを実装してデータレイヤーを実装するには、次のようにします。
function createMVC() {
var MVC = {};
MVC.model = function() {
var M = {}
// 通常是从后端获取的
M.data = {
newsList = [
{
text: '新闻一',
icon: '',
url: 'https://www.baidu.com'
},
{
text: '新闻二',
icon: '',
url: 'https://blog.csdn.net'
}
]
}
M.config= {
// 新闻动画控制数据
}
return {
getData: function(key) {
return M.data[key]
},
setData: function(key, value) {
M.data[key] = value;
return this;
},
getConfig: function(key) {
return M.config[key]
},
setConfig: function(key, value) {
M.config[key] = value;
return this;
}
}
}()
MVC.view = function() {
}
MVC.controler = function() {
}
}
データに基づいてhtmlテンプレートを作成するビューレイヤーを実装します。
MVC.view = function() {
var M = MVC.model;
var V = {
createNewsList: function() {
var html = '';
var data = M.getData('newsList');
if(!(data && data.length)) return;
// 创建视图容器
var dom = $.create('div', {
class: 'news-contanier'
})
// 创建视图容器模版
var tp1 = {
container: [
'<ul class="news-content">{#content#}</ul>'
].join(''),
item: [
"<li class='news-item'>",
"<a href='{#url#}'></a>",
"<span>{#text}</span>",
"</li>",
].join('')
}
for(var i = 0; i < data.length; i++) {
html += $.formateString(tp1.item, data[i])
}
dom.html($.formateString(tp1.container, {content: html})).appendTo('body')
}
};
return function(v) {
V[v]()
}
}()
コントロールレイヤーを実装し、前のレイヤーの本番HTML関数を呼び出し、必要なビジネスロジックを追加します。
MVC.controler = function() {
var newsListData = MVC.model.getData('newsList');
var renderNewsList = MVC.view('createNewsList');
var C = {
initNewsList: function() {
renderNewsList();
$('li','news-list').on('mouseover', function() {
// 处理逻辑交互
this.addClass('show')
})
}
}
c.initNewsList()
}()
これは、データ層、試行層、および制御層（ビジネスロジック）を分離するための良い方法です。これは古典的なMVCモデルですが、このように理解する方がよいでしょうか？
要約：
アドバンテージ：
1.互いに干渉することなく職務を遂行する
MVCパターンでは、3つのレイヤーがそれぞれの機能を実行するため、いずれかのレイヤーの要件が変更された場合、他のレイヤーのコードに影響を与えることなく、対応するレイヤーのコードのみを変更する必要があります。
2.開発における分業を助長する
MVCパターンでは、システムがレイヤーで分離されているため、開発における分業をより適切に実現できます。Webページの設計者はビューレイヤーでJSPを開発でき、ビジネスに精通している開発者はビジネスレイヤーを開発でき、他の開発者はコントロールレイヤーを開発できます。
3.コンポーネントの再利用を容易にします
階層化した後は、コンポーネントの再利用に役立ちます。たとえば、制御層を独立して使用可能なコンポーネントに形成することができ、ビュー層を一般的な操作インターフェースにすることもできます。
欠点：
1.ビューとコントローラーは密接に関連しており、結合は比較的大きいです。コントローラーがないと、ビューを生成できません。ビューの相互作用のほとんどは、コントロールレイヤーにも実装されています。
2.データフローの制御が難しい。ビューレイヤーとコントロールレイヤーの両方がデータを取得および変更できます。
3.構造の複雑さが増します。
MVP
ビューレイヤーはデータレイヤーに直接アクセスしませんが、プレゼンター（マネージャーレイヤー）を介してモデルデータにアクセスします。
基本構造：
(function(window) {
var MVP = function() {};
MVP.model = function() {};
MVP.view = function() {};
MVP.presenter = function() {};
// MVP入口
MVP.init = function() {};
// 可以全局访问
window.MVP = MVP;
})(window)
データレイヤーはMVCのデータレイヤーと似ています。
MVC.model = function() {
var M = {}
// 通常是从后端获取的
M.data = {
newsList = [
{
text: '新闻一',
icon: '',
url: 'https://www.baidu.com'
},
{
text: '新闻二',
icon: '',
url: 'https://blog.csdn.net'
}
]
}
M.config= {
// 新闻动画控制数据
}
return {
getData: function(key) {
return M.data[key]
},
setData: function(key, value) {
M.data[key] = value;
return this;
},
getConfig: function(key) {
return M.config[key]
},
setConfig: function(key, value) {
M.config[key] = value;
return this;
}
}
}()
ビューレイヤーは元のレイヤーとは大きく異なります。データに直接アクセスすることはなくなりましたが、管理レイヤーから渡された文字列に従って必要なテンプレートに変換され、マネージャーに公開されます。
MVP.view = function() {
return function(str) {
// 此处省略N行代码html
return html
}
}();
上記のreturn関数の機能は、次のようなパラメーターを渡すことです。
'li.news-item>a[href=@url]+span{@text}'
次のようなテンプレートに変換します。
[
"<li class='news-item'>",
"<a href='{#url#}'></a>",
"<span>{#text}</span>",
"</li>",
].join('')
管理を大まかに実装します。
MVP.presenter = function() {
var V = MVP.view;
var M = MVP.model;
var C = {
new: function(M, V) {
var data = M.getData();
var tp1 = V('li.news-item>a[href=@url]+span{@text}');
$.create('ul', {
class: 'news-ul'
}).html(
A.formartString(tp1,data)
).appendTo('#container')
}
}
return {
init: function() {
for(var key in C) {
C[key] && C[key](M, V, key)
}
},
add: function(key, fun) {
C[key] = fun;
return this;
}
}
}();
アドバンテージ：
1）結合度を下げる
（2）モジュールの責任の明らかな分割
（3）コードの再利用
（4）コードの柔軟性
MVPのデメリット：
ビューのレンダリングはプレゼンターに配置されるため、ビューとプレゼンターの間の相互作用は頻繁になりすぎます。プレゼンターがビューをレンダリングしすぎると、特定のビューに関連付けられすぎる傾向があります。ビューを変更する必要がある場合は、プレゼンターも変更する必要があります。
MVVM
このパターンは、ビューレイヤーのビューモデルのセット（ViewModel）をカスタマイズし、ビューモデルにプロパティとメソッドを作成し、ビューレイヤーのデータをバインドし、相互作用を実装します。上記のコントローラーまたはマネージャーは、MVVMモデルのViewModelです。
モデルレイヤーは、サーバーから返されるデータモデルです。ViewModelはUIアダプターとして機能します。つまり、ビュー内の各UI要素は、ViewModel内の対応するプロパティを見つける必要があります。さらに、コントローラーから抽出されたUI関連のロジックがViewModelに配置されるため、コントローラーの負担が軽減されます。
ViewModelは、モデルとビューを関連付けるものです。ViewModelは、モデルのデータを表示用のビューに同期する役割を果たし、ビューの変更をモデルに同期する役割も果たします。
アドバンテージ：
- 低結合：ビューとロジックの分離
- 独立した開発
- 双方向のデータバインディングにより、データの一貫性が確保されます
- 簡単に学べる
欠点：
- データの双方向バインディングにより、Viewの再利用が容易になりません
- モジュールが大きいほど、より多くのメモリを消費します