实现数据逻辑与业务的解耦,模板文件填入你需要的数据,框架自动去请求相关数据
/* 并发加载函数 id:唯一值 syncFunc:加载函数 */ const _map={} const _startTimeMap={} async function conCurentLoad (id,syncFunc) { //兼容并发加载的情况 if(!_map[id]){ _map[id]=[]; _startTimeMap[id]=+new Date(); const res = await syncFunc(); setTimeout(function () { if(_map[id].length>0){ _map[id].forEach(function (callback) { callback(res) }) } delete _map[id] },0) return res; }else{ const now=+new Date(); //10秒超时处理 if(now-_startTimeMap[id]<10000){ return new Promise(function (resolve) { _map[id].push(resolve) }); }else{ return syncFunc(); } } } //加载组合数据 async function loadGroup(data) { if(typeof data==='object'){ for(let k in data){ if(Object.prototype.toString.call(data[k])==='[object Promise]'){ data[k]=await data[k]; } if(typeof data[k]==='object'){ data[k]=await loadGroup(data[k]) } } } return data } //定义 function defineModal(data,_ajax){ //唯一标识 let id=Symbol('id') return new Proxy(data, { get(target, key) { if(target.hasLoad||target.hasOwnProperty(key)){ return target[key] } return conCurentLoad(id,async function () { const data=await _ajax() Object.assign(target,data) target.hasLoad=true; return target }).then(function () { return target[key]; }) } }) } //定义有请求的数据源 const User =defineModal({ name:215 },function () { return new Promise(function (resolve) { setTimeout(function () { resolve({ name:'user', list:[ { a:'a' } ] }) },100) }) }) //Page modal let Page = { page:User.list }; let Tmp = { page:Page }; async function init(){ const data={ TmpPage:Page.page, Tmp } //从模板中读取到的字符 const tmpStrs=['Tmp.page','TmpPage'] const func=new Function('data', `with(data){return [${tmpStrs.join(',')}]}`) const arr=await loadGroup(func(data)) console.log(arr) console.log(User.name) //接口模式 // const name=await loadGroup({ // name:Tmp.page.page, // name2:User.list, // arr:[{ // d:User.name // },User.name] // }) // console.log(name); } init() //加载模板,解析出数据源 //处理数据源,返回数据 //渲染页面或者json