avalon模型封装

介于avalon1.4方法数据放在一起,比较混乱,作二次封装,清晰代码结构

快速使用

创建一个新的控制器

var ctl = new Controller({
  $id:"root",
  data:{
    title:"hello World"
  },
  
  methods : function (_vm){return {
    sayUpper : function (){
      _vm.title.toUpperCase();
    }
  }},
  
  watchs:{
    "title":function(){
      //do someting...
    }
  }
});

配置选项

  • $id
    ms-controller指定id
  • data
    vm模型中数据定义
  • methods
    vm模型中方法定义,以闭包回调形式,返回当前Vm对象引用作为参数,方便在方法中操作;
  • watchs
    对data下的一级数据进行观察;
  • dataApi
    数据接口,详见配置说明;
  • param
    多数据接口公共参数;

dataApi 配置

单个数据接口定义

var ctl = new Controller({
  dataApi : {
    name : "appList",     //接口名称
    url:"/api/app/info",  //接口地址
    param : {             //接口参数
      type : "game"
    },
    datas : ["info","*valueDate"]          //接口数据,*号表示为字符串型
  }
});

datas :
接口取回数据datas 下的字段名;数据取回后将自动同步到vm模型中;

datas : ["info","*valueDate"] 相当于以下操作:

var vm = avalon.define({
  info:{},
  valueDate:''
});

var callback = function(data){
  vm.info = data.datas.info;
  vm.valueDate = data.datas.valueDate;
}

多个数据接口定义

在单接口配置上增加两个配置项ref,defer ,如其它一样。
增加一个共公param配置,表示所有接口共用参数,如果接口配置中也有指定param,接口中的优先于共公的进行合并;

var api = [
  {
    name : "appList",     //接口名称
    url:"/api/app/info",  //接口地址
    ref : listData,
  },{
    name : "areaList",     //接口名称
    url : "/api/area/info",  //接口地址
    ref : listData,
    defer : true
  }
];
var param = queryStr.getUrlQueryString(location.search);

var ctl = new Controller({
  dataApi : api,
  param : param
})

ref :
字符串, 配置为"datas"时将接口数据datas赋值给name,否则将datas下指定的字段赋值到vm[name];

相当于以下操作:

var vm = avalon.define({
  appList : {}
});
var callback = function(data){
  vm.appList = data.datas.listData;
  // ref 的值为“datas” 时
  vm.appList = data.datas;
}

defer :
布尔,为true时延迟请求,即init时不会请求,而是后期需要时通过fillData方法进行请求;

方法

init

vm模型初始化,获取数据,生成vm对象;

onLoad

接口数据获取成功回调,返回两个参数:当前VM对象,接口datas数据;
默认回调:
注意:此写法适合单数据接口使用,多数据接口时每一个接口都将执行此回调:

ctl.onLoad(function(_vm,data){
    //do someting...
})

多数据接口,(dataApi.name,fn):

ctl.onLoad("appList",function(_vm,data){
    //do someting...
})
//并联写法:
ctl.onLoad({
  "appList":function(_vm,data){
      //do someting...
  },
  "areaList" : function(_vm,data){
    //do someting...
  },
  "all" : function(_vm,apiMaps){
    // all : 所有接口都已经成功返回后的回调
    // 返回apiMaps 为所有接口数据,
    console.log(apiMaps.appList.data)
  }
});

fillData(apiName,fn) :

指定一个数据接口,发起数据请求,并填充到vm模型,fn为回调(可选),onload中定义的回调仍有效;

getData(api,param,fn):

取回接口数据,

  • api :字符串,接口名称;如果此接口已经请求过数据,直接返回已有数据,否则请求数据;
  • param: 增加或修改此接口的请求参数,将合并到原有参数,并重新发起请求,更换原有数据;
  • fn : 请求成功回调方法;

refresh(apiNames,param)

刷新多个数据,忽略所有参数将默认重新请求dataApi中定义的所有接口;onload中定义的回调将会被执行;

  • apiNames :接口名称字符串数组,要刷新的接口名称;
  • param : 增加或修改所有接口的请求参数;

你可能感兴趣的:(avalon模型封装)