微信小程序组件化实践

Do Not Repeat Yourself

如何提高代码质量，方法有许多:抽象、模块、组件化，我认为它们的中心点都是——Do Not Repeat Yourself.

小程序组件化

我们先看看小程序自带的组件化能力：

• 模板，通过 <import src="../name.wxml" /> 引入 ---- success
• 样式，通过 @import 'name.wxss' 引入 ---- success
• js ？？？ ---- fail

我们看到，微信小程序开发有一个很大的痛点，缺乏组件化能力，特别是在没有使用构建工具或第三方框架的情况下，稍不留神，就会充满大量重复的代码。

小程序提供了自定义组件（ V1.6.3 才支持）

举个栗子。

小程序虽然提供了一些常用的组件——toast、loading等，但因需求不同，我们要实现自己的 popup、notify、modal等公共组件。这些自定义组件的共同点是：单个组件模板、事件大致一样，区别是每次使用组件时显示的内容不同。于是，我们在每个页面都能看到相似的代码，emm，已经产生了臭味道。

mixins

通过混入的方式，将组件方法、数据绑定到页面实例上，类似VUE mixins，不过，这里实现要更为简单：

function mixins(page, ...args) {
  let data = args.reduce((res, item) => Object.assign(res, item.data), page.data || {})

  Object.assign(page, ...args)
  page.setData(data)
}

这样，在页面onLoad时，执行mixins(this, Component1, ...)就可以了。

写一个popup

现在开始写一个 popup组件，设计给的样式如下图：

除去布局和样式，应该如何设计数据模型？个人认为需要把握两点：职责分离、易于扩展。

第一步，分析哪些数据是不变的、可变的。

可变数据：标题、内容、按钮文字、按钮个数、点击按钮后续操作、蒙层是否可点

不变数据：点击蒙层、取消按钮隐藏popup，显示/隐藏popup事件

第二步，设计数据模型。

通过第一步的分析，我们可以抛开具体的业务逻辑，设计出popup的数据模型：

let popupModal = {
  title: '',
  content: '',
  confirmButtonName: '确认',
  cancelButtonName: '取消',

  show(),
  hide(),
  onConfirm(),
  onCancel(),
}

使用面向对象可以轻松分离可变、不可变数据，生成所需数据模型：

class GeneratePopupModal {
  constructor(options) {
    this.setParams(options)
  }

  setParams({
    title,
    content,
    confirmButtonName,
    cancelButtonName,
    success,
  } = {}) {
    this.title = title || this.title
    this.content = content || this.content
    this.confirmButtonName = confirmButtonName || this.confirmButtonName
    this.cancelButtonName = cancelButtonName || this.cancelButtonName

    this.success = success
  }
  show() {
    return Promise.resolve(this.__show = true)
  }
  hide() {
    return Promise.resolve(this.__show = false)
  }
  onConfirm() {
    return this.hide()
      .then(() => {
        if(this.success) return this.success({confirm: true})
      })
  }
  onCancel() {
    return this.hide()
      .then(() => {
        if(this.success) return this.success({cancel: true})
      })
  }
}

第三步，生成数据渲染组件。

为了使popup组件保持简单，只对外暴露三个方法：

• $popup(opts) ---- 根据参数生成组件数据并显示 popup
• tapPopupConfirmButton() ---- 点击 popup 确认按钮
• tapPopupCancelButton() ---- 点击 popup 取消按钮

const GeneratePopupModal = require('./generatePopupModal')
const defalut = {
  title: '管家提示',
  content: '抱歉，我们遇到一点问题，请稍后再试',
  confirmButtonName: '确认'
}

let Popup = null

module.exports = {
  $popup(options={}) {
    /**
     * 每次使用新建实例，避免状态共享
     * 通过私有 __show 控制 popup.show，实现组件 popup 的显示和隐藏
     */
    Popup = new GeneratePopupModal(defalut)

    Object.defineProperty(Popup, '__show', {
      configurable: true,
      set: v => {
        Popup.show = v
        this.setData({popupModal: Popup})
      }
    })
    return new Promise((resolve, reject) => {
      Popup.setParams(
        Object.assign({}, {success: resolve, fail: reject}, options)
      )
      Popup.__show = true
    })
  },
  tapPopupConfirmButton() {
    Popup.onConfirm()
  },
  tapPopupCancelButton() {
    Popup.onCancel()
  },
}

第四步，引入、使用组件

在上面mixins部分，介绍了如何引入组件。那么，怎么使用它呢？这里提供一个栗子：

this.$popup({ // 根据传参生成数据、显示 popup
  title: '删除行程',
  content: '确认删除此行程？删除后将不可恢复。',
  confirmButtonName: '删除',
  cancelButtonName: '我再想想',
}).then(({confirm, cancel}) => { // 分别表示点击了确定、取消按钮
  if(confirm) { // 点击删除(确定)按钮后续操作
    return r4251({
      id: item.productid,
      type: item.type
    })
    .then(res => this.__fetchCartList())
    .catch(e => {
      this.$popup() // 显示默认数据的 popup

      console.error('[cart/list.js] #tapDeleteCart r4251 error: ', e)
    })
  }
})

总结

至此，popup组件基本完成了，但这种方式依然存在很大的漏洞：

• mixins 方式混入组件数据/方法，极易造成命名冲突。通过命名空间解决
• 如果组件有 data 对象，那么页面销毁(unLoad)后，页面数据依然常驻内存。通过导出函数对象解决

虽然上面的解决方案并不十分理想_{难道不是非常别扭？}，但好在足够简洁、实用，也基本实现了设计预期。

期待更好的实现思路......

.