林秀栋的技术博客

设计模式(三十六) MVP模式

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()