前端标准版公共函数封装

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


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

新建公共函数

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

undefined

图 1

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

undefined

图 2

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

undefined

图 3

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

undefined

图 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、标准版开发过程中,公共函数的使用方法:

undefined

图 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
      */
    }); 
  })
}
Copyright © 用友 -【生态技术部】 2021 all right reserved,powered by Gitbook修订时间: 2021-10-14 19:55:39

results matching ""

    No results matching ""