评论

小程序多个页面处理相同函数示例。

mixins 为 Page 增加 mixin 功能,处理多个页面使用到的相同函数

1、方案一,建立 sameEvent.js 通过对象 继承方式。

import {
  sameEvent
} from '../sameEvent/index.js'

Page(Object.assign({
  data: {


  },
  onLoad() {


  },
}, sameEvent))

2、方案二,mixins 为 Page 增加 mixin 功能

/**
 * mixins 为 Page 增加 mixin 功能
 * 来源:https://segmentfault.com/a/1190000019527762
 */
const originPage = Page;
const originProperties = ['data''properties''options'];
const originMethods = ['onLoad''onReady''onShow''onHide''onUnload''onPullDownRefresh''onReachBottom''onShareAppMessage''onPageScroll''onTabItemTap'];


function merge (mixins, options{
    mixins.forEach((mixin) => {
        if (Object.prototype.toString.call(mixin) !== '[object Object]') {
            throw new Error('mixin 类型必须为对象!')
        }
        for (let [key, value] of Object.entries(mixin)) {
            if (originProperties.includes(key)) {
                options[key] = { ...value, ...options[key] }
            } else if (originMethods.includes(key)) {
                const originFunc = options[key];
                options[key] = function (...args{
                    value.call(this, ...args);
                    return originFunc && originFunc.call(this, ...args)
                }
            } else {
                options = { ...mixin, ...options }
            }
        }
    });
    return options
}


Page = (options) => {
    const mixins = options.mixins;
    if (Array.isArray(mixins)) {
        delete options.mixins;
        options = merge(mixins, options)
    }
    originPage(options)
};

来源:https://segmentfault.com/a/1190000019527762

代码示例

https://developers.weixin.qq.com/s/UO3ri6mt7uy4

最后一次编辑于  2022-03-28  
点赞 0
收藏
评论
登录 后发表内容