模块化数据驱动解决方案

最新推荐文章于 2020-11-27 11:12:27 发布

weixin_33800463

最新推荐文章于 2020-11-27 11:12:27 发布

阅读量118

点赞数

文章标签：游戏 json javascript ViewUI

原文链接：http://www.cnblogs.com/crazycode2/p/7088209.html

版权

项目结构：

页面调用：index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="index.js"></script>
	<script>
		MetaDriver.init($('#mainForm'));
		$(function(){
			$('#mainForm').bootstrapValidator({
				excluded:[':disabled',':hidden',':not(:visible)']
			}).on('success.form.bv',function(e,b){
				e.preventDefault();
				// 表单校验通过后回调这个方法
				var params = MetaDriver.parameters();
				$.getJSON("/json/filter.json",params,function(data){
					MetaDriver.reset(data); // 初始化数据
				});
			});
		});
		// jquery的获取json数据
		$.getJSON("/json/data.json",function(data){
			MetaDriver.reset(data); // 初始化数据
		});
	</script>
</head>
<body>
	
</body>
</html>

js封装： index.js

// 模块化数据驱动
// 自运行函数(闭包)
var MetaDriver = (function(){
	return factory.call(root); // 返回一个对象
})(this,function(form){ // this -> window
	// 驱动引擎
	var __DRIVER__ = {
		form:null, // 驱动模块输入表单
		parameters: function(){
			return this.form.serialize();
		},
		init:function(form,meta){
			if(!form)throw new Error("not found form!");
			this.form = form;
			// 框架初始化的工作
			// this.fetch(meta); // 分解meta元数据里面的数据到对应模块
			// this.render(); // 驱动渲染所有lock为true的模块
			meta&&this.reset(meta);
		},
		reset:function(meta){ // 重置数据
			this.fetch(meta); // 分解meta元数据里面的数据到对应模块
			this.render(); // 驱动渲染所有lock为true的模块
		},
		fetch:function(meta) {
			// 分解meta元数据里面的数据到对应模块
			for(var m in __MODULES__){
				if(meta[m]){
					// 这次填充的数据
					__MODULES__[m].model = meta[m];
					__MODULES__[m].lock = true; // 打开渲染
				}
			}
		},
		render: function(){ // 渲染
			var module;
			for(var m in __MODULES__){
				module = __MODULES__[m];
				if(module.lock){
					// 这次填充的数据
					module.render();
					module.lock = false; // 关闭渲染
				}
			}
		}
	};
	// 对应的视图模块集合
	var __MODULES__ = {
		"detail": {
			"model": null, // 创建模块数据 这个模块的元数据
			"view": $("detail-data"), // 模块的视图区域
			"render": function(){ // 渲染器  刷新页面
				// 把元数据的数据更新到视图中去
				for(var prop in this.model){
					this.view.find("#"+prop).text(this.model[prop]);
				}
			},
			"lock": false, // 渲染开关是否为true
		},
		"invest": {
			"model": null, // 创建模块数据 这个模块的元数据
			"view": null, // 模块的视图区域
			"render": function(){ // 渲染器  刷新页面
				// 把元数据的数据更新到视图中去
				console.log("invest render");
			},
			"lock": false, // 渲染开关是否为true
		},
		"list": {
			"model": null, // 创建模块数据 这个模块的元数据
			"view": null, // 模块的视图区域
			"render": function(){ // 渲染器  刷新页面
				// 把元数据的数据更新到视图中去
				console.log(this.model);
			},
			"lock": false, // 渲染开关是否为true
		}
	};
	return __DRIVER__;
})

转载于:https://www.cnblogs.com/crazycode2/p/7088209.html