之前开发用的比较熟悉的是vue，在vue中有一个混入的功能，可以比较灵活的复用一些组件内的功能，最近在开发小程序，也遇到了类似的情景，于是在网上查了资料，自己整理了一份用于页面间的混入，具体混入规则与vue相似
// 原生属性及方法
const originProperties = ['data', 'properties', 'options']
const originMethods = [
'onLoad',
'onShow',
'onReady',
'onHide',
'onUnload',
'onPullDownRefresh',
'onReachBottom',
'onShareAppMessage',
'onPageScroll',
'onResize',
'onTabItemTap'
]
// merge方法
function mergeMixin (mixins, options) {
mixins.forEach(mixin => {
// 检查 mixin 数据类型
if(Object.prototype.toString.call(mixin) !== '[object Object]') {
throw new Error('mixin is not object')
}
for (const [key, value] of Objbect.entires(mixin)) {
if (originProperties.includes[key]) {
// 混入属性
options[key] = {...value, ...options[key]}
} else if (originMethods.includes[key]) {
// 混入方法
const originFunc = options[key]
options[key] = function(...arg) {
value.call(this, ...arg)
originFunc && originFunc.call(this, ...arg)
}
} else {
// 混入其他自定义方法
options = { ...mixin, ...options }
}
}
});
return options
}
export default function (options = {}) {
if (Array.isArray(options.mixins)) {
options = mergeMixin(options.mixins, options)
}
delete options.mixins
return Page(
...options
)
}
