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