模块化数据驱动解决方案
项目结构：
页面调用：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__;
})
.
