在小程序中实现 Mixins 方案

女爷i 2021-12-21 05:29 174阅读 0赞

**摘要：** 小程序开发技巧

*  作者：[jrainlau][]
 *  原文：[在小程序中实现 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()

![2019-06-28-02.png][]

在 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')]
        })

![2019-06-28-01.png][]

大功告成！此时小程序已经具备 Mixins 的能力，对于代码解耦与复用来说将会更加方便。

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用！

[jrainlau]: https://segmentfault.com/u/jrainlau
[Mixins]: https://segmentfault.com/a/1190000019527762
[Fundebug]: https://www.fundebug.com/
[2019-06-28-02.png]: /images/20211220/c7da1cf08fb3439997ee7e314d0fd602.png
[2019-06-28-01.png]: /images/20211220/800df595f66e4895a86c6e8bc216be45.png