前言

在原生开发小程序的过程中，发现很多页面使用几乎相同的逻辑。由于官方小程序没有提供Mixins作为代码重用机制，所以代码只能通过非常优雅的方式复制粘贴来“重用”。随着函数的复杂度越来越高，通过复制粘贴的方式来维护代码显然是不科学的，于是我思考了如何在小程序中实现Mixins。

什么是Mixins

mixin字面意思是“混合”，意思是将可重用代码混合到当前代码中。熟悉VueJS的同学应该知道，它提供了更强大的代码重用能力，解耦了重复的模块，让系统维护更加方便优雅。

让我们来看看如何在VueJS中使用Mixins。

//定义一个mixin objectvar myMixin={ create d : function(){ this . hello()}，methods : { hello : function(){ console . log(' hello from mixin！')} }}//定义一个使用此Mixin va Component=vue . extend({ mixin :[myMixin]})var Component=new Component()//='你好，来自mixin！'在上面的代码中，首先定义了一个名为myMixin的对象，其中定义了一些生命周期函数和方法。然后通过mixin :[myMixin]直接注入一个新的组件，新组件从myMixin得到方法。

了解了什么是Mixins之后，就可以开始在小程序中实现了。

混合蛋白的作用机制

Mixins还有一些小细节需要注意，那就是生命周期事件的执行顺序。在前面的例子中，我们在myMixin中定义了created()方法，这是VueJS中的一个生命周期事件。如果我们也在新的Component组件中定义一个created()方法，执行结果会是什么？

var Component=Vue . extend({ mixin :[myMixin]，create d : function(){ console . log('来自Component的hello！')} })var Component=new Component()//=//mixin的Hello！//组件您好！可以看到运行结果是先从Mixin输出日志，再从组件输出日志。

除了生命周期功能之外，看看对象属性的混合结果：

//定义一个mixin object const myMixin={ data(){ return { mixindata : ' data from mixin ' } } }//定义一个使用此mixin va Component=vue . extend({ mixin :[myMixin]，data(){ return { Component data : ' data from Component ' } })，mounted () { console.log(这。$data) }})var组件=new Component()

在VueJS中，内容(如数据、方法等。)和组件对象属性将被混合，以确保两个数据同时存在。

经过以上验证，我们可以得出关于Mixins在VueJS中的运行机制的结论：

生命周期属性将首先从Mixins执行，然后从程序集执行。来自Mixins和来自组件的对象类型属性将共存。但是在小程序中，这种机制会和VueJS有一点不同。在小程序中，用户定义的方法直接在Page的属性中定义，它既不是生命周期类型属性，也不是对象类型属性。为了不引入奇怪的问题，我们在小程序的Mixins运行机制中又增加了一个：

小程序中的自定义方法具有Page Mixins的优先级，即Page中的自定义方法将覆盖mixin中的自定义方法。代码实现

在小程序中，每个页面都是由page(选项)函数定义的，Mixins作用于这个函数中的选项对象。所以，我们实现Mixins的想法是劫持并重写——中的Page函数，最后重新发布。

创建一个新的mixins.js文件：

//保存原生的页函数const origin page=page page page=(options)={ const mixins=options。mixins//mixins必须为数组if(数组。isarray(mixin)){删除选项。mixin//mixin注入并执行相应逻辑合并（混合，选项)} //释放原生页函数原始页面（选项)}原理很简单，关键的地方在于合并()函数合并。函数即为小程序混入类运行机制的具体实现，完全按照上一节总结的三条结论来进行。

//定义小程序内置的属性/方法properties中的const origin=[' data '，' Properties '，' options ']methods中的const origin=[' onLoad '，' onReady '，' onShow '，' onHide '，' onLoad '，' onPullDownRefresh '，' onShareAppMessage '，' onPageScroll '，' ontabemtap ']函数合并(mixin，选项){ mixin。foreach((mixin)={ if(object。原型。串起来。调用(=='[对象对象]') {抛出新错误(' mixin类型必须为对象!') } //遍历混入类里面的所有属性对于(让[键，值]的对象。条目(mixin)){ if(原始属性。包括(键)){//内置对象属性混入选项[键]={ 0.价值，options[key]} } else if(origin methods。包括(键)){//内置方法属性混入，优先执行混入的部分const origininfunc=options[key]options[key]=function(.args) { value.call(this，参数)返回originFunc originFunc.call(这个，args) } } else { //自定义方法混入选项={ 0.混合，选项} } } })}Mixins使用

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

要求('。/mixins.js ')撰写一个myMixin.js

模块。exports={ data : { some data : ' my Mixin ' }，OnShaw(){ console . log('来自混入类的日志!') }}在页面/索引/index.js中使用

第({ mixin :[require('页././MyMixin。js ')]})

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。