微信小程序 Mixin混入 的实现

之前开发用的比较熟悉的是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
    )
}