林秀栋的技术博客

设计模式(三十五) MVC模式

MVC模式:模型(model)-视图(view)-控制器(controller),将业务逻辑、数据、视图分离

$(function(){
	var MVC = MVC || {};	//初始化mvc对象
	MVC.model = function(){	//初始化mvc数据模型层
		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 this;},
			//页面中的某些操作,更新配置数据
			setConf: function(c,v){ M.conf[c]=v;return this;}
		}
	}();
	MVC.view = function(){	//初始化mvc视图层
		var M = MVC.model;
		//内部视图创建方法对象,页面渲染等
		var V = {
			//比如这里可以写一个方法,根据M.data的数据创建html模板并append进相应dom
		};
		//根据视图名称返回视图
		return function(v){
			V[v]();
		}
	}();
	MVC.ctrl = function(){	//初始化mvc控制器层
		//对M和V的引用
		var M = MVC.model;
		var V = MVC.view;
		//控制器创建方法对象
		var C = {
			a: function(){
				V();	//渲染模板
				//下面可以添加一些事件与交互
			}
		};
		//遍历执行,如果少的话也可以直接执行
		for(var i in C){
			C[i] && C[i]();
		}
		//或 C.a();
	}();
})