项目结构:
页面调用: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__; })
.