MVP模式:模型(model)-视图(view)-管理器(presenter)
V层不直接调用M层内的数据,而是通过P层实现对M层的访问,即所有层次交互都发生在P层
mvc模式中数据层的数据修改,控制器无法知道,且添加新功能时每层都要修改,修改成本高。
~(function(window){
var MVP = function(){}; //MVP的构造函数
MVP.model = function(){ //数据层
//同MVC的model,只是两个set方法return this变成return v
var M = {}; //内部数据对象
M.data = {};//服务器端获取的数据
M.conf = {};//配置数据,页面加载时即提供
return {
getData: function(m){ return M.data[m]; }, //根据字段获取服务器端数据
getConf: function(c){ return M.conf[c]; }, //根据字段获取配置数据
//设置服务器端数据,获取服务器端异步获取的数据,更新数据
setData: function(m,v){ M.data[m]=v;return v;},
//页面中的某些操作,更新配置数据
setConf: function(c,v){ M.conf[c]=v;return v;}
}
}();
MVP.view = function(){ //视图层
//...
return function(str){
//用模板引擎,把str转为需要的html输出
return html;
}
}();
MVP.presenter = function(){ //管理层
var M = MVC.model;
var V = MVC.view;
var C = {
a: function(){
var data = M.getData(); //从m层拿数据处理
//处理并用append渲染页面
}
}
return {
//遍历执行
init: function(){
for(var i in C){
C[i] && C[i](M,V,i)
}
},
//为管理器添加模块
add: function(modName,pst){
C[modName] = pst;
return this;
}
}
}();
//MVP入口
MVP.init = function(){
this.presenter.init()
}
window.MVP = MVP; //暴露MVP对象,可在外部访问
})(window)
//外部调用
MVP.init()
林秀栋的技术博客