Open jrainlau opened 5 years ago
小程序只有在 Component 组件里面才能用 behaviors
,在 Page 底下未提供,所以还是需要自行解决代码复用问题。
myMixin.js里写入onPullDownRefresh 和 onReachBottom函数,组件上拉加载更多和下拉刷新会触发两次..怎么解决呀
myMixin.js里写入onPullDownRefresh 和 onReachBottom函数,组件上拉加载更多和下拉刷新会触发两次..怎么解决呀
@chenzhuohui 如果在组件里写了onPullDownRefresh 和onReachBottom 空函数 那么就正常触发了一次
在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制,所以只能采用非常不优雅的复制粘贴的方式去“复用”代码。随着功能越来越复杂,靠复制粘贴来维护代码显然不科学,于是便寻思着如何在小程序里面实现 Mixins。
什么是 Mixins
Mixins 直译过来是“混入”的意思,顾名思义就是把可复用的代码混入当前的代码里面。熟悉 VueJS 的同学应该清楚,它提供了更强大了代码复用能力,解耦了重复的模块,让系统维护更加方便优雅。
先看看在 VueJS 中是怎么使用 Mixins 的。
在上述的代码中,首先定义了一个名为
myMixin
的对象,里面定义了一些生命周期函数和方法。接着在一个新建的组件里面直接通过mixins: [myMixin]
的方式注入,此时新建的组件便获得了来自myMixin
的方法了。明白了什么是 Mixins 以后,便可开始着手在小程序里面实现了。
Mixins 的机制
Mixins 也有一些小小的细节需要注意的,就是关于生命周期事件的执行顺序。在上一节的例子中,我们在
myMixin
里定义了一个created()
方法,这是 VueJS 里面的一个生命周期事件。如果我们在新建组件Component
里面也定义一个created()
方法,那么执行结果会是如何呢?可以看运行结果是先输出了来自 Mixin 的 log,再输出来自组件的 log。
除了生命周期函数以外,再看看对象属性的混入结果:
在 VueJS 中,会把来自 Mixins 和组件的对象属性当中的内容(如
data
,methods
等)混合,以确保两边的数据都同时存在。经过上述的验证,我们可以得到 VueJS 中关于 Mixins 运行机制的结论:
但是在小程序中,这套机制会和 VueJS 的有一点区别。在小程序中,自定义的方法是直接定义在 Page 的属性当中的,既不属于生命周期类型属性,也不属于对象类型属性。为了不引入奇怪的问题,我们为小程序的 Mixins 运行机制多加一条:
代码实现
在小程序中,每个页面都由
Page(options)
函数定义,而 Mixins 则作用于这个函数当中的options
对象。因此我们实现 Mixins 的思路就有了——劫持并改写Page
函数,最后再重新把它释放出来。新建一个
mixins.js
文件:原理很简单,关键的地方在于
merge()
函数。merge
函数即为小程序 Mixins 运行机制的具体实现,完全按照上一节总结的三条结论来进行。Mixins 使用
在小程序的
app.js
里引入mixins.js
撰写一个
myMixin.js
在
page/index/index.js
中使用大功告成!此时小程序已经具备 Mixins 的能力,对于代码解耦与复用来说将会更加方便。