为了更好定制自定义组件的功能,可以使用自定义组件扩展机制。从小程序基础库版本 2.2.3 开始支持。

扩展后的效果

为了更好的理解扩展后的效果,先举一个例子:

在开发者工具中预览效果

  1. // behavior.js
  2. module.exports = Behavior({
  3. definitionFilter(defFields) {
  4. defFields.data.from = 'behavior'
  5. },
  6. })
  7. // component.js
  8. Component({
  9. data: {
  10. from: 'component'
  11. },
  12. behaviors: [require('behavior.js')],
  13. ready() {
  14. console.log(this.data.from) // 此处会发现输出 behavior 而不是 component
  15. }
  16. })

通过例子可以发现,自定义组件的扩展其实就是提供了修改自定义组件定义段的能力,上述例子就是修改了自定义组件中的 data 定义段里的内容。

使用扩展

Behavior() 构造器提供了新的定义段 definitionFilter ,用于支持自定义组件扩展。 definitionFilter 是一个函数,在被调用时会注入两个参数,第一个参数是使用该 behavior 的 component/behavior 的定义对象,第二个参数是该 behavior 所使用的 behavior 的 definitionFilter 函数列表。

以下举个例子来说明:

  1. // behavior3.js
  2. module.exports = Behavior({
  3. definitionFilter(defFields, definitionFilterArr) {},
  4. })
  5. // behavior2.js
  6. module.exports = Behavior({
  7. behaviors: [require('behavior3.js')],
  8. definitionFilter(defFields, definitionFilterArr) {
  9. // definitionFilterArr[0](defFields)
  10. },
  11. })
  12. // behavior1.js
  13. module.exports = Behavior({
  14. behaviors: [require('behavior2.js')],
  15. definitionFilter(defFields, definitionFilterArr) {},
  16. })
  17. // component.js
  18. Component({
  19. behaviors: [require('behavior1.js')],
  20. })

上述代码中声明了1个自定义组件和3个 behavior,每个 behavior 都使用了 definitionFilter 定义段。那么按照声明的顺序会有如下事情发生:

  • 当进行 behavior2 的声明时就会调用 behavior3 的 definitionFilter 函数,其中 defFields 参数是 behavior2 的定义段, definitionFilterArr 参数即为空数组,因为 behavior3 没有使用其他的 behavior 。
  • 当进行 behavior1 的声明时就会调用 behavior2 的 definitionFilter 函数,其中 defFields 参数是 behavior1 的定义段, definitionFilterArr 参数是一个长度为1的数组,definitionFilterArr[0] 即为 behavior3 的 definitionFilter 函数,因为 behavior2 使用了 behavior3。用户在此处可以自行决定在进行 behavior1 的声明时要不要调用 behavior3 的 definitionFilter 函数,如果需要调用,在此处补充代码 definitionFilterArr0 即可,definitionFilterArr 参数会由基础库补充传入。
  • 同理,在进行 component 的声明时就会调用 behavior1 的 definitionFilter 函数。
    简单概括,definitionFilter 函数可以理解为当 A 使用了 B 时,A 声明就会调用 B 的 definitionFilter 函数并传入 A 的定义对象让 B 去过滤。此时如果 B 还使用了 C 和 D ,那么 B 可以自行决定要不要调用 C 和 D 的 definitionFilter 函数去过滤 A 的定义对象。

代码示例:

在开发者工具中预览效果

真实案例

下面利用扩展简单实现自定义组件的计算属性功能:

  1. // behavior.js
  2. module.exports = Behavior({
  3. lifetimes: {
  4. created() {
  5. this._originalSetData = this.setData // 原始 setData
  6. this.setData = this._setData // 封装后的 setData
  7. }
  8. },
  9. definitionFilter(defFields) {
  10. const computed = defFields.computed || {}
  11. const computedKeys = Object.keys(computed)
  12. const computedCache = {}
  13. // 计算 computed
  14. const calcComputed = (scope, insertToData) => {
  15. const needUpdate = {}
  16. const data = defFields.data = defFields.data || {}
  17. for (const key of computedKeys) {
  18. const value = computed[key].call(scope) // 计算新值
  19. if (computedCache[key] !== value) needUpdate[key] = computedCache[key] = value
  20. if (insertToData) data[key] = needUpdate[key] // 直接插入到 data 中,初始化时才需要的操作
  21. }
  22. return needUpdate
  23. }
  24. // 重写 setData 方法
  25. defFields.methods = defFields.methods || {}
  26. defFields.methods._setData = function (data, callback) {
  27. const originalSetData = this._originalSetData // 原始 setData
  28. originalSetData.call(this, data, callback) // 做 data 的 setData
  29. const needUpdate = calcComputed(this) // 计算 computed
  30. originalSetData.call(this, needUpdate) // 做 computed 的 setData
  31. }
  32. // 初始化 computed
  33. calcComputed(defFields, true) // 计算 computed
  34. }
  35. })

在组件中使用:

  1. const beh = require('./behavior.js')
  2. Component({
  3. behaviors: [beh],
  4. data: {
  5. a: 0,
  6. },
  7. computed: {
  8. b() {
  9. return this.data.a + 100
  10. },
  11. },
  12. methods: {
  13. onTap() {
  14. this.setData({
  15. a: ++this.data.a,
  16. })
  17. }
  18. }
  19. })
  1. <view>data: {{a}}</view>
  2. <view>computed: {{b}}</view>
  3. <button bindtap="onTap">click</button>

实现原理很简单,对已有的 setData 进行二次封装,在每次 setData 的时候计算出 computed 里各字段的值,然后设到 data 中,已达到计算属性的效果。

此实现只是作为一个简单案例来展示,请勿直接在生产环境中使用。

官方扩展包

原文:

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/extend.html