微信小程序中如何运用Mixins实现代码复用？

本文共计1508个文字，预计阅读时间需要7分钟。

前言：在原生开发小程序的过程中，发现多个页面都使用了几乎完全一样的逻辑。由于小程序官方并未提供+Mixins+这种代码复用机制，因此只能采用非优雅的复制粘贴方式。

前言

在原生开发小程序的过程中，发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 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 以后，便可开始着手在小程序里面实现了。