微信小程序 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
    )
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在尤大微博铺垫着“将会引入一些关于 TypeScript 的改进”一周之后,代号为 Level E 的 Vue.j...
    极乐叔阅读 14,913评论 0 12
  • 1.小程序起步 (1)点击https://mp.weixin.qq.com/wxopen/waregister?a...
    GXW_Lyon阅读 3,436评论 0 0
  • 妈妈是棵树,我是只鸟儿 小时候 树因为有了鸟儿,而有了责任, 鸟儿因为有树,而有了爱和温暖 树为鸟儿遮风挡雨,担惊...
    宁可笑着阅读 671评论 0 14
  • 拉萨的雨不同于其他城市的雨,它来的轻,来的静,来的温柔。似乎是怕惊醒梦中的人,所以每次来临之前只是试探性的一声“啪...
    挂在枝头吹晚风阅读 505评论 0 1
  • 张望 /小聪 离天空最近的地方 有一个人的张望 数着逝去的时光 琴弦中 多了谁的忧伤 还记得那个晚上 静静的月光 ...
    令狐小聪阅读 328评论 0 0