小程序 mixin 混入, Page 选项合并（小程序推广）

小程序 mixin 混入, Page 选项合并（小程序推广）

小程序 mixin 选项合并

微信开发工具导入项目

新建项目 -> 导入src文件 -> 预览效果

代码

mixin.js

const nativePage = Page Page = options => { const mixins = options.mixins if (Array.isArray(mixins)) { Reflect.deleteProperty(options, 'mixins') merge(mixins, options) } nativePage(options) } // 原生Page属性 const properties = ['data', 'onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll', 'onTabItemTap'] // 合并mixins属性到Page的options中 function merge(mixins, options) { mixins.reverse().forEach(mixin => { if (Object.prototype.toString.call(mixin).slice(8, -1) === 'Object') { for (let [key, value] of Object.entries(mixin)) { if (key === 'data') { options.data = Object.assign({}, value, options.data) } else if (properties.includes(key)) { let native = options[key] options[key] = function (...args) { value.call(this, ...args) return native && native.call(this, ...args) } } else { options = Object.assign({}, mixin, options) } } } }) }

使用

在 app.js 中引入 mixin.js 文件

require('./vendor/mixin.js')

mixins/index.js

module.exports = { data: { indexMsg: 'index msg' } }

mixins/init.js

module.exports = { data: { initMsg: 'init msg' } }

在 index 页面的 index.js 中使用

Page({ mixins: [require('../../mixins/index.js'), require('../../mixins/init.js')], data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') } })

截图预览

mixin使用前后对比

原理说明

模仿vue中的mixin功能避免使用 Page(Object.assign({}, require('../../mixins/index.js'), {data: {}})) 结构直接覆盖data数据结构浅复制Page原生结构属性顺序执行其他自定义结构属性直接覆盖

如果觉得不错，请动动您的小拇指，star一下

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。