compose提高代码可读性扩展性

时间:2022-06-19 掘金安东尼人气:0

前言

本瓜知道前不久写的《JS 如何函数式编程》系列各位可能并不感冒，因为一切理论的东西如果脱离实战的话，那就将毫无意义。

于是乎，本瓜着手于实际工作开发，尝试应用函数式编程的一些思想。

最终惊人的发现：这个实现过程并不难，但是效果却不小！

实现思路：借助 compose 函数对连续的异步过程进行组装，不同的组合方式实现不同的业务流程。

这样不仅提高了代码的可读性，还提高了代码的扩展性。我想：这也许就是高内聚、低耦合吧~

撰此篇记之，并与各位分享。

场景说明

在和产品第一次沟通了需求后，我理解需要实现一个应用新建流程，具体是这样的：

第 1 步：调用 sso 接口，拿到返回结果 res_token；
第 2 步：调用 create 接口，拿到返回结果 res_id；
第 3 步：处理字符串，拼接 Url；
第 4 步：建立 websocket 链接；
第 5 步：拿到 websocket 后端推送关键字，渲染页面；

注：接口、参数有做一定简化

上面除了第 3 步、第 5 步，剩下的都是要调接口的，并且前后步骤都有传参的需要，可以理解为一个连续且有序的异步调用过程。

为了快速响应产品需求，于是本瓜迅速写出了以下代码：

/**
 * 新建流程
 * @param {*} appId
 * @param {*} tag
 */
export const handleGetIframeSrc = function(appId, tag) {
  let h5Id
// 第 1 步: 调用 sso 接口，获取token
  getsingleSignOnToken({ formSource: tag }).then(data => { 
    return new Promise((resolve, reject) => {
      resolve(data.result)
    })
  }).then(token => { 
    const para = { appId: appId }
    return new Promise((resolve, reject) => {
// 第 2 步: 调用 create 接口，新建应用
      appH5create(para).then(res => {
// 第 3 步: 处理字符串，拼接 Url
        this.handleInsIframeUrl(res, token, appId)
        this.setH5Id(res.result.h5Id)
        h5Id = res.result.h5Id
        resolve(h5Id)
      }).catch(err => {
        this.$message({
          message: err.message || '出现错误',
          type: 'error'
        })
      })
    })
  }).then(h5Id => { 
// 第 4 步：建立 websocket 链接；
    return new Promise((resolve, reject) => {
      webSocketInit(resolve, reject, h5Id)
    })
  }).then(doclose => {
// 第 5 步：拿到 websocket 后端推送关键字，渲染页面；
    if (doclose) { this.setShowEditLink({ appId: appId, h5Id: h5Id, state: true }) }
  }).catch(err => {
    this.$message({
      message: err.message || '出现错误',
      type: 'error'
    })
  })
}
const handleInsIframeUrl = function(res, token, appId) { 
// url 拼接
  const secretId = this.$store.state.userinfo.enterpriseList[0].secretId
  let editUrl = res.result.editUrl
  const infoId = editUrl.substr(editUrl.indexOf('?') + 1, editUrl.length - editUrl.indexOf('?'))
  editUrl = res.result.editUrl.replace(infoId, `from=a2p&${infoId}`)
  const headList = JSON.parse(JSON.stringify(this.headList))
  headList.forEach(i => {
    if (i.appId === appId) { i.srcUrl = `${editUrl}&token=${token}&secretId=${secretId}` }
  })
  this.setHeadList(headList)
}

这段代码是非常自然地根据产品所提需求，然后自己理解所编写。

其实还可以，是吧？

加载全部内容