微信小程序组件化实践

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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 = nullmodule.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) }) } })