// 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!"

var Component = Vue.extend({
 mixins: [myMixin],
 created: function () {
 console.log('hello from Component!')
 }
})

var component = new Component()

// =>
// Hello from mixin!
// Hello from Component!

// 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()

// 保存原生的 Page 函數(shù)
const originPage = Page

Page = (options) => {
 const mixins = options.mixins
 // mixins 必須為數(shù)組
 if (Array.isArray(mixins)) {
 delete options.mixins
 // mixins 注入并執(zhí)行相應(yīng)邏輯
 merge(mixins, options)
 }
 // 釋放原生 Page 函數(shù)
 originPage(options)
}

// 定義小程序內(nèi)置的屬性/方法
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)) {
  // 內(nèi)置對象屬性混入
  options[key] = { ...value, ...options[key] }
  } else if (originMethods.includes(key)) {
  // 內(nèi)置方法屬性混入，優(yōu)先執(zhí)行混入的部分
  const originFunc = options[key]
  options[key] = function (...args) {
   value.call(this, ...args)
   return originFunc && originFunc.call(this, ...args)
  }
  } else {
  // 自定義方法混入
  options = { ...mixin, ...options }
  }
 }
 })
}

require('./mixins.js')

module.exports = {
 data: { someData: 'myMixin' },
 onShow () { console.log('Log from mixin!') }
}

Page({
 mixins: [require('../../myMixin.js')]
})