在小程序中实现 Mixins 方案
作者：jrainlau
原文：在小程序中实现 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 的能力，对于代码解耦与复用来说将会更加方便。
