MorJS aPage/wPage Mixins 支持
小程序在 Component
的维度上支持的 mixins
,使用 mixins
能够解耦业务可复用逻辑,因此 MorJS 在 Page
的维度上也实现了
mixins
的机制,使用上基本与 Component
一致,提供 { mixins: [mixin1, mixin2] }
的 mixin
数组即可。有以下的注意点:
mixin
必须是一个对象,里面是希望给aPage
/wPage
合并的各种属性data
等Object
类型的对象属性均会合并- 生命周期的钩子函数会合并依次执行,
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)
}
})