使用compose函數優化程式碼提高可讀性及擴充套件性

2022-06-14 22:01:39

前言

本瓜知道前不久寫的《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)
}

這段程式碼是非常自然地根據產品所提需求，然後自己理解所編寫。

其實還可以，是吧？

使用compose函數優化程式碼提高可讀性及擴充套件性

目錄

前言

場景說明

熱門文章