在原生开发小程序的过程中，发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制，所以只能采用非常不优雅的复制粘贴的方式去“复用”代码。随着功能越来越复杂，靠复制粘贴来维护代码显然不科学，于是便寻思着如何在小程序里面实现 Mixins。
什么是 Mixins
Mixins 直译过来是“混入”的意思，顾名思义就是把可复用的代码混入当前的代码里面。熟悉 VueJS 的同学应该清楚，它提供了更强大了代码复用能力，解耦了重复的模块，让系统维护更加方便优雅。
代码实现
在小程序中，每个页面都由 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)
}
// 定义小程序内置的属性/方法
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 使用
1.在小程序的 app.js 里引入 mixins.js
require('./mixins.js')2.在根目录新建一个 myMixin.js 文件，存放公用的方法
module.exports = {
onLoad: function () {
let pages = getCurrentPages() //获取加载的页面
let currentPage = pages[pages.length - 1] //获取当前页面的对象
let url = currentPage.route //当前页面url
// 页面白名单
let whiteList = [
'pages/login/login',
'pages/reg/reg'
]
if (!wx.getStorageSync('token') && whiteList.indexOf(url) === -1) {
wx.reLaunch({
url: '/pages/login/login',
})
throw new Error('页面即将跳转到登录页，抛个异常阻止继续执行后续代码')
}
},
// mixins测试方法
$m_testFun() {
console.log('你调用了一个mixins方法')
}
} 3.在 page/index/index.js 中使用
Page({
mixins: [require('../../myMixin.js')],
data: {
},
onLoad: function() {
}
}) 大功告成！此时小程序已经具备 Mixins 的能力，页面上可直接bindtap="$m_testFun"，对于代码解耦与复用来说将会更加方便。