关于小程序:小程序Mixin

原理

重写小程序的 Page 办法，合并 Page 办法的默认参数中的属性、办法和生命周期等

准则

属性和办法会进行笼罩，以后页面申明的属性和办法会笼罩 mixin 中的属性和办法，生命周期函数不会进行笼罩，执行程序为 全局 mixin>独自 mixin>当前页生命周期函数

具体操作

• 创立一个mixins.js

// 把原本的 Page 办法缓存下来
const ori_page = Page
const lifecycle = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll']

let globalMixin = null // 全局混入
// 全局 mixin 办法
wx.mixin = config => {if (isType(config, 'object')) {globalMixin = config}
}
// 重写 Page 办法
Page = config => {
    let mixins = config.mixins
    // 退出全局 mixin，首先执行全局的
    if(globalMixin) {(mixins || (mixins = [])).unshift(globalMixin)
    }
    if(isType(mixins, 'array') && mixins.length > 0) {
        // 删除 config 的 mixins 属性
        Reflect.deleteProperty(config, 'mixins')
        // 把 mixins 中的货色，混入到 config 外面去
        merge(mixins, config)
    }
    // 调用默认的 Page 办法进行初始化
    ori_page(config)
}

function merge(mixins, config) {
    mixins.forEach(mixin => {if(isType(mixin, 'object')) {Object.keys(mixin).forEach(key => {if(key === 'data') {
                    // 合并 data
                    config.data = Object.assign({},mixin[key],config[key])
                }else if (lifecycle.includes(key)) {
                    // 缓存以后页面的生命周期函数
                    let ori_lifecycle = config[key]
                    config[key] = function() {
                        // arguments 对象转数组
                        let arg = Array.prototype.slice.call(arguments)
                        // 执行 minxin 的生命周期函数
                        mixin[key].call(this, arg)
                        // 执行当前页的生命周期函数
                        ori_lifecycle && ori_lifecycle.call(this, arg)
                    }
                }else {
                    // 合并 methods
                    config[key] = mixin[key]
                }
            })
        }
    })
}

// 判断类型函数
function isType(target, type) {let targetType = Object.prototype.toString.call(target).slice(8, -1).toLowerCase()
    type = type.toLowerCase()
    return targetType === type
}

• 引入mixins.js

// aap.js
import './mixins'

• 申明一个 mixin

module.exports = {
    test: {
        data: {msg: 'Hello world'}
    }
}

• 应用

import {test} from './someMixins'
Page({mixins: [test]
})