微信小程序如何使用mixins

今天开始准备动之前的老代码，发现了页面上好多可复用的代码逻辑，好多基本是一样的？之前的不敢动，那就从现在开始呗！利用mixins解耦来维护复用的代码逻辑，方便后期维护！
备注：本篇也是看了好几篇别人的博客，然后在项目中应用后写的。
什么是Mixins呢？Mixins就是将可复用的代码混入到当前代码里面，解耦重复的模块，让系统维护更加方便优雅。

vueJS和小程序Mixins对比

<u>在 VueJS 中，会把来自 Mixins 和组件的对象属性当中的内容（如 data, methods等）混合，以确保两边的数据都同时存在。它的生命周期属性，会优先执行来自 Mixins 当中的，后执行来自组件当中的。且对象类型属性，来自 Mixins 和来自组件中的会共存。</u>
 <u>在小程序中，自定义的方法是直接定义在 Page 的属性当中的，既不属于生命周期类型属性，也不属于对象类型属性。小程序中的自定义方法，优先级为 Page > Mixins，即 Page 中的自定义方法会覆盖 Mixins 当中的。</u>

代码实现

在小程序中，每个页面都由 Page(options) 函数定义，而 Mixins 则作用于这个函数当中的 options 对象。因此我们实现 Mixins 的思路就有了——劫持并改写 Page 函数，最后再重新把它释放出来。
新建一个 mixins.js 文件：

function mixinPage () {
// 保存原生的 Page 函数
  const originPage = Page
  Page = (options) => {
    const mixins = options.mixins
     // mixins 必须为数组
    if (Array.isArray(mixins)) {
      delete options.mixins
      // mixins 注入并执行相应逻辑
      options = mergePage(mixins, options)
    }
    originPage(options)
  }
}

const ORIGIN_PROPERTIES_PAGE = [
  'data'
]

const ORIGIN_METHODS = [
  'onLoad', 
  'onReady', 
  'onShow', 
  'onHide', 
  'onUnload', 
  'onPullDownRefresh', 
  'onReachBottom', 
  'onShareAppMessage', 
  'onPageScroll',
  'onResize',
  'onTabItemTap'
]

function mergePage (mixins, options) {
  mixins.forEach((mixin) => {
    if (isObject(mixin)) {
     // 遍历 mixin 里面的所有属性
      for (let key in mixin) {
      // for (let [key, value] of Object.entries(mixin)) {
        if (ORIGIN_PROPERTIES_PAGE.includes(key)) {
          // 内置对象属性混入
          options[key] = { ...mixin[key], ...options[key] }
        } else if (ORIGIN_METHODS.includes(key)) {
        // 内置方法属性混入，优先执行混入的部分
          const originFunc = options[key]
          options[key] = function (...args) {
            mixin[key].call(this, ...args)
            return originFunc && originFunc.call(this, ...args)
          }
        } else {
          // 自定义方法混入
          options = { ...mixin, ...options }
        }
      }
    }
  })
  return options
}
mixinPage()

Mixins使用
1.在小程序的app.js中引入 mixins.js文件

require('./mixins.js')

2.定义mixins复用文件

module.exports = {
  data: {
    regionCode: [],
    regionText: ''
  },
  initList(afterInit) {
    this.setData({
      list: null,
      totalPage: 0,
      page: 1,
      isFinished: false,
      count: 0,
      isLoading: false
    })
    if (afterInit && typeof afterInit === 'function') {
      afterInit()
    }
  }
}

3.需要使用的页面使用

Page({
  mixins: [require(‘文件路径’)]
})