设计模式(三十七) MVVM模式

//~屏蔽压缩报错
~(function(){
	var window = this || (0, eval)('this');	//在闭包中获取全局变量
	//视图模型对象
	var VM = function(){
		//组件创建策略对象
		var Method = {
			//创建a组件的html并append，及创建对应的事件等
			a: function(){},
			//b组件相关，同上
			b: function(){}
		}
		//获取视图层组件渲染数据的映射信息
		function getBindData(dom){
			//获取组件自定义的data-bind值并转为对象
			//比如<input data-bind=" type:a1, msg:'hello' ">
			var data = dom.getAttribute('data-bind');
			return !!data && (new Function("return ({"+data+"})"))();
		}
		//组件实例化
		return function(){
			//获取页面全部元素
			var doms = document.body.getElementsByTagName('*'),
				ctx = null;	//元素自定义数据句柄
			//ui处理是会向页面插入元素，此时doms.length会改变，此时动态获取dom.length
			for(var i = 0; i < doms.length; i++){
				//获取元素自定义数据
				ctx = getBindData(doms[i]);
				//如果元素是ui组件，则根据自定义属性中的组件类型，渲染该组件
				ctx.type && Method[ctx.type] && Method[ctx.type](doms[i],ctx);
			}
		}
	}();
	//将视图模型对象绑定在window上，供外部使用
	window.VM = VM;
})();

//使用
var demo = {};	//数据
window.onload = function(){
	VM();
}