在小程序中实现 Mixins 方案
摘要: 小程序开发技巧
- 作者:
- 原文:在小程序中实现 mixins 方案
fundebug经授权转载,版权归原作者所有。
在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 mixins 这种代码复用机制,所以只能采用非常不优雅的复制粘贴的方式去“复用”代码。随着功能越来越复杂,靠复制粘贴来维护代码显然不科学,于是便寻思着如何在小程序里面实现 mixins。
什么是 mixins
mixins 直译过来是“混入”的意思,顾名思义就是把可复用的代码混入当前的代码里面。熟悉 vuejs 的同学应该清楚,它提供了更强大了代码复用能力,解耦了重复的模块,让系统维护更加方便优雅。
先看看在 vuejs 中是怎么使用 mixins 的。
// define a mixin object var mymixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // define a component that uses this mixin var component = vue.extend({ mixins: [mymixin] }) var component = new component() // => "hello from mixin!"
在上述的代码中,首先定义了一个名为 mymixin
的对象,里面定义了一些生命周期函数和方法。接着在一个新建的组件里面直接通过 mixins: [mymixin]
的方式注入,此时新建的组件便获得了来自 mymixin
的方法了。
明白了什么是 mixins 以后,便可开始着手在小程序里面实现了。
mixins 的机制
mixins 也有一些小小的细节需要注意的,就是关于生命周期事件的执行顺序。在上一节的例子中,我们在 mymixin
里定义了一个 created()
方法,这是 vuejs 里面的一个生命周期事件。如果我们在新建组件 component
里面也定义一个 created()
方法,那么执行结果会是如何呢?
var component = vue.extend({ mixins: [mymixin], created: function () { console.log('hello from component!') } }) var component = new component() // => // hello from mixin! // hello from component!
可以看运行结果是先输出了来自 mixin 的 log,再输出来自组件的 log。
除了生命周期函数以外,再看看对象属性的混入结果:
// define a mixin object const mymixin = { data () { return { mixindata: 'data from mixin' } } } // define a component that uses this mixin var component = vue.extend({ mixins: [mymixin], data () { return { componentdata: 'data from component' } }, mounted () { console.log(this.$data) } }) var component = new component()
在 vuejs 中,会把来自 mixins 和组件的对象属性当中的内容(如 data
, methods
等)混合,以确保两边的数据都同时存在。
经过上述的验证,我们可以得到 vuejs 中关于 mixins 运行机制的结论:
- 生命周期属性,会优先执行来自 mixins 当中的,后执行来自组件当中的。
- 对象类型属性,来自 mixins 和来自组件中的会共存。
但是在小程序中,这套机制会和 vuejs 的有一点区别。在小程序中,自定义的方法是直接定义在 page 的属性当中的,既不属于生命周期类型属性,也不属于对象类型属性。为了不引入奇怪的问题,我们为小程序的 mixins 运行机制多加一条:
- 小程序中的自定义方法,优先级为 page > mixins,即 page 中的自定义方法会覆盖 mixins 当中的。
代码实现
在小程序中,每个页面都由 page(options)
函数定义,而 mixins 则作用于这个函数当中的 options
对象。因此我们实现 mixins 的思路就有了——劫持并改写 page
函数,最后再重新把它释放出来。
新建一个 mixins.js
文件:
// 保存原生的 page 函数 const originpage = page page = (options) => { const mixins = options.mixins // mixins 必须为数组 if (array.isarray(mixins)) { delete options.mixins // mixins 注入并执行相应逻辑 options = merge(mixins, options) } // 释放原生 page 函数 originpage(options) }
原理很简单,关键的地方在于 merge()
函数。merge
函数即为小程序 mixins 运行机制的具体实现,完全按照上一节总结的三条结论来进行。
// 定义小程序内置的属性/方法 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 类型必须为对象!') } // 遍历 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 }
mixins 使用
-
在小程序的
app.js
里引入mixins.js
require('./mixins.js')
-
撰写一个
mymixin.js
module.exports = { data: { somedata: 'mymixin' }, onshow () { console.log('log from mixin!') } }
-
在
page/index/index.js
中使用page({ mixins: [require('../../mymixin.js')] })
大功告成!此时小程序已经具备 mixins 的能力,对于代码解耦与复用来说将会更加方便。
关于fundebug
fundebug专注于javascript、微信小程序、微信小游戏、支付宝小程序、react native、node.js和java线上应用实时bug监控。 自从2016年双十一正式上线,fundebug累计处理了10亿+错误事件,付费客户有阳光保险、核桃编程、荔枝fm、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用!