小程序 自定义组件扩展

Question

Behavior() 构造器的定义段 definitionFilter ，用于支持自定义组件扩展。definitionFilter 是一个函数，在被调用时会注入两个参数:

• 第一个参数是使用该 behavior 的 component/behavior 的定义对象
• 第二个参数是该 behavior 所使用的 behavior 的 definitionFilter 函数列表。

// behavior.js
module.exports = Behavior({
  definitionFilter(defFields) {
    defFields.data.from = 'behavior'
  },
})

// component.js
Component({
  data: {
    from: 'component'
  },
  behaviors: [require('behavior.js')],
  ready() {
    console.log(this.data.from) // 此处会发现输出 behavior 而不是 component
  }
})

// behavior3.js
module.exports = Behavior({
    definitionFilter(defFields, definitionFilterArr) {},
})

// behavior2.js
module.exports = Behavior({
  behaviors: [require('behavior3.js')],
  definitionFilter(defFields, definitionFilterArr) {
    // definitionFilterArr[0](defFields)
  },
})

// behavior1.js
module.exports = Behavior({
  behaviors: [require('behavior2.js')],
  definitionFilter(defFields, definitionFilterArr) {},
})

// component.js
Component({
  behaviors: [require('behavior1.js')],
})

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

1. 当进行 behavior2 的声明时就会调用 behavior3 的 definitionFilter 函数，其中 defFields 参数是 behavior2 的定义段， definitionFilterArr 参数即为空数组，因为 behavior3 没有使用其他的 behavior 。
2. 当进行 behavior1 的声明时就会调用 behavior2 的 definitionFilter 函数，其中 defFields 参数是 behavior1 的定义段， definitionFilterArr 参数是一个长度为 1 的数组， definitionFilterArr[0] 即为 behavior3 的 definitionFilter 函数，因为 behavior2 使用了 behavior3。用户在此处可以自行决定在进行 behavior1 的声明时要不要调用 behavior3 的 definitionFilter 函数，如果需要调用，在此处补充代码 definitionFilterArr[0](defFields) 即可， definitionFilterArr 参数会由基础库补充传入。
3. 同理，在进行 component 的声明时就会调用 behavior1 的 definitionFilter 函数。

简单概括， definitionFilter 函数可以理解为当 A 使用了 B 时，A 声明就会调用 B 的 definitionFilter 函数并传入 A 的定义对象让 B 去过滤。此时如果 B 还使用了 C 和 D ，那么 B 可以自行决定要不要调用 C 和 D 的 definitionFilter 函数去过滤 A 的定义对象。

案例

// test.js
Component({
  data: {
    from: 'component'
  },
  behaviors: [require('../../beh/beh')],
  ready() {
    console.log('in component', this.data.from)
  }
})

// beh.js
module.exports = Behavior({
  data: {
    from: 'beh'
  },
  behaviors: [require('./beh2'), require('./beh3')],
  definitionFilter(defFields, definitionFilterArr) {
    console.log('beh definitionFilter', defFields.data.from, definitionFilterArr)
    defFields.data.from = defFields.data.from + '-addsome'
    definitionFilterArr.forEach(func => {
      func(defFields)
    })
  },
})

// beh2.js
module.exports = Behavior({
  data: {
    from: 'beh2'
  },
  behaviors: [require('./beh4')],
  definitionFilter(defFields, definitionFilterArr) {
    console.log('beh2 definitionFilter', defFields.data.from, definitionFilterArr)
    definitionFilterArr.forEach(func => {
      func(defFields)
    })
  },
})

// beh3.js
module.exports = Behavior({
  data: {
    from: 'beh3'
  },
  behaviors: [require('./beh4')],
  definitionFilter(defFields, definitionFilterArr) {
    console.log('beh3 definitionFilter', defFields.data.from, definitionFilterArr)
    definitionFilterArr.forEach(func => {
      func(defFields)
    })
  },
})

// beh4.js
module.exports = Behavior({
  data: {
    from: 'beh4'
  },
  behaviors: [],
  definitionFilter(defFields, definitionFilterArr) {
    console.log('beh4 definitionFilter', defFields.data.from, definitionFilterArr)
    definitionFilterArr.forEach(func => {
      func(defFields)
    })
  },
})

打印顺序：

beh4 definitionFilter beh2 []
beh4 definitionFilter beh3 []
beh2 definitionFilter beh [ƒ]
beh4 definitionFilter beh []
beh3 definitionFilter beh [ƒ]
beh4 definitionFilter beh []
beh definitionFilter component (2) [ƒ, ƒ]
beh2 definitionFilter component-addsome [ƒ]
beh4 definitionFilter component-addsome []
beh3 definitionFilter component-addsome [ƒ]
beh4 definitionFilter component-addsome []
in component component-addsome