在小程序中实现 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 运行机制的结论：

1. 生命周期属性，会优先执行来自 mixins 当中的，后执行来自组件当中的。
2. 对象类型属性，来自 mixins 和来自组件中的会共存。

但是在小程序中，这套机制会和 vuejs 的有一点区别。在小程序中，自定义的方法是直接定义在 page 的属性当中的，既不属于生命周期类型属性，也不属于对象类型属性。为了不引入奇怪的问题，我们为小程序的 mixins 运行机制多加一条：

1. 小程序中的自定义方法，优先级为 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 使用

1. 在小程序的 app.js 里引入 mixins.js

   require('./mixins.js')

2. 撰写一个 mymixin.js

   module.exports = {
     data: { somedata: 'mymixin' },
     onshow () { console.log('log from mixin!') }
   }

3. 在 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、微脉、青团社等众多品牌企业。欢迎大家免费试用！