前端标准版公共函数封装

一、 前端标准版公共函数封装

前端标准版函数扩展时，注意使用公共函数抽离公共的逻辑代码，减少冗余代码，从而提高代码可读性以及减少后续维护成本；

新建公共函数

• 1、在应用构建-流程&自动化-函数-前端-公共函数下新建放置公共函数的目录，然后新建公共函数体（如图下所示）

图 1

• 2、创建公共函数存放的目录

图 2

• 3、在公共函数存放目录，新建公共函数体文件

图 3

• 4、公共函数文件，注册需要抽离的公共函数

图 4

• 5、创建公共函数代码

cb.defineInner([],function() {
  var MyExternal = {  
    //注册扩展公共函数
    getServeData(params){
      //params为外面调用函数传进来的参数
      return new Promise((resolve,reject)=>{
        //创建获取服务端数据proxy对象
        const proxy = params.viewModel.setProxy({
            queryData:{
              url:params.url || '',
              method:params.method || 'GET'
            }
        });
        const param = params.param || {};
        proxy.queryData(param,function(error,result){
            if(error.msg){
              reject(error);
            }
            else{
              resolve(result);  
            }
        })
      })
    }

  }
   return MyExternal;
})

标准版使用公共函数

• 1、标准版开发过程中，公共函数的使用方法：

图 5

• 2、使用公共函数代码

function (event) {
  var viewModel = this;

  cb.requireInner(["/opencomponentsystem/public/GT15804AT96/getQueryData"], function(a) {
    const queryData={
      //把viewModel对象传入封装得公共函数
      viewModel:viewModel,
      //请求地址
      url:'/XXX/XXX',
      //请求类型
      method:'POST',
      //请求上送数据
      param:{
        '字段名':'XXXX'
      }
    }
    a.getDataInit(queryData).then((result)=>{
      //数据请求成功
      /*
        to do soming
      */
    }).catch((error)=>{
      //数据请求失败
      /*
        to do soming
      */
    }); 
  })
}

封装请求后端函数为公共函数（后续在使用，直接设置调用）

• 1、公共函数区域根据以上用法，直接拿以下代码复制即可

*注意的地方： 1、服务端返回错误信息字段，统一为error.msg 2、外部传入的参数为params 对象，内部固定参数url:请求地址 method：请求类型 param：请求数据（对象）

cb.defineInner([],function() {
  var MyExternal = {  
    //注册扩展公共函数
    getServeData(params){
      //params为外面调用函数传进来的参数
      return new Promise((resolve,reject)=>{
        //创建获取服务端数据proxy对象
        const proxy = params.viewModel.setProxy({
            queryData:{
              url:params.url || '',
              method:params.method || 'GET'
            }
        });
        //服务端上送数据
        const param = params.param || {};
        proxy.queryData(param,function(error,result){
            if(error.msg){
              //请求返回错误信息，返回错误信息出去
              reject(error);
            }
            else{
              //请求返回成功，返回成功数据出去
              resolve(result);  
            }
        })
      })
    }

  }
   return MyExternal;
})

• 2、使用公共函数，获取服务端数据

function (event) {
  var viewModel = this;

  cb.requireInner(["/opencomponentsystem/public/GT15804AT96/getQueryData"], function(a) {
    //强制传入参数格式
    const queryData={
      //把viewModel对象传入封装得公共函数
      viewModel:viewModel,
      //请求地址
      url:'/XXX/XXX',
      //请求类型
      method:'POST',
      //请求上送数据
      param:{
        '字段名':'XXXX'
      }
    }
    a.getDataInit(queryData).then((result)=>{
      //数据请求成功
      /*
        to do soming
      */
    }).catch((error)=>{
      //数据请求失败
      /*
        to do soming
      */
    }); 
  })
}