一、behavior的定义

behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。  每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior 。

详细的使用请参考 Behavior 参考文档。

二、基本用法

在日常开发中，都会有控制页面元素显示隐藏的功能。在小程序中如果只有少量的元素需要控制还好，一旦多了，需要定义大量的控制显隐的方法，非常难受。

可以使用此功能定义一个生成相应visibleXxx数据和对应方法的behavior并注入到页面中。

1、定义

type CallbackType = () => void
const BehaviorWithVisible = (prefix: string) => {
  const visibleStr = `${prefix}Visible`
  return Behavior({
    data: {
      [visibleStr]: false
    },
    methods: {
      [`${prefix}Toggle`](callback?: CallbackType) {
        const visible = this.data[visibleStr]
        this.setData({
          [visibleStr]: !visible
        }, () => {
          if (typeof callback === 'function') {
            callback?.()
          }
        })
      },
      [`${prefix}Show`](callback?: CallbackType) {
        this.setData({
          [visibleStr]: true
        }, () => {
          if (typeof callback === 'function') {
            callback?.()
          }
        })
      },
      [`${prefix}Hide`](callback?: CallbackType) {
        this.setData({
          [visibleStr]: false
        }, () => {
          if (typeof callback === 'function') {
            callback?.()
          }
        })
      }
    }
  })
}

export default BehaviorWithVisible

2、使用

const testVisible = BehaviorWithVisible("test");

Page({
    //将会向data中注入testVisible,并添加testToggle,testShow,testHide方法已供调用
    behaviors: [testBehavior],
})

3、注意

在小程序2.9.2版本支持在Page中使用，低于此版本的只能在Component中使用。

Behavior-封装列表通用逻辑

源代码git地址