MorJS aPage/wPage Mixins 支持

2024-01-15 17:38 更新

小程序在 Component 的维度上支持的 mixins,使用 mixins 能够解耦业务可复用逻辑,因此 MorJS 在 Page 的维度上也实现了  mixins 的机制,使用上基本与 Component 一致,提供 { mixins: [mixin1, mixin2] } 的 mixin 数组即可。有以下的注意点:

  • mixin 必须是一个对象,里面是希望给 aPage / wPage 合并的各种属性
  • dataObject 类型的对象属性均会合并
  • 生命周期的钩子函数会合并依次执行,aPage / wPage 选项的生命周期最后执行
  • Object 类型的属性(如:函数)会被同名的属性覆盖,aPage / wPage 选项的属性优先级最高
import { aPage } from '@morjs/core'

const mixinA = {
  data: {
    x: 1,
    y: 2
  },
  onLoad() {
    console.log('mixina', 'onLoad')
  },
  foo() {
    console.log('mixina', 'foo')
  },
  test: {
    t: 1,
    o: 3
  },
  no: 'xxxx'
}

const mixinB = {
  data: {
    z: 3
  },
  onLoad() {
    console.log('mixinb', 'onLoad')
  },
  mixinBMethod() {
    console.log('mixinb', 'mixinBMethod')
  },
  foo() {
    console.log('mixinb', 'foo')
  },
  test: {
    t: 2
  },
  no: 'hahaha'
}

aPage({
  mixins: [mixinA, mixinB],
  onLoad() {
    // 生命周期依次打印 mixina onLoad -> mixinb onLoad -> page onLoad
    console.log('page', 'onLoad')
    // 执行的是 mixinB 的 foo 方法
    this.foo()
    // { x: 1, y: 2, z: 3 } mixinA 和 mixinB 的 data 会合并
    console.log(this.data)
    // { o: 3, t: 2 } mixinA 和 minxinB 都设置了 test 的 t
    // mixinB 的 test.t 会覆盖 mixinA 的 test.t
    console.log(this.test)
    // hahaha minxinB 会覆盖 minxinA 的同名属性
    console.log(this.no)
    // 当前实例会有 mixin 提供的方法
    console.log(this.mixinBMethod)
  }
})


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号