小程式 - 簡單實作mixin功能-有解無憂

前言

在業務中有沒有一個場景：多個頁面需要用到一樣的 data 和 method，或者生命周期都需要執行同樣的操作，我們在每個頁面都寫上重復的代碼，一但功能修改就要更新多個頁面，在后期維護起來會很麻煩，

那么有沒有一個方法將同樣的業務存放到一個檔案中去管理呢？其實這個問題Vue已經告訴我們了，那就是Mixin功能，

Mixin是一種將可重用功能分布到組件的靈活方法，mixin物件可以包含任何組件選項，當組件使用mixin時，mixin中的所有選項都將被“混合”到組件的選項中，

實作功能

全域mixin方法
頁面mixins選項

優先級

在合并時發生沖突的優先級

使用設計

全域mixin：

頁面mixin：

實作思路

1.每個頁面的Page都是一個函式，可以對Page封裝，做一個代理

2.檢查是否有全域mixin，合并到頁面mixins中

3.獲取頁面的mixins，對data、method、lifecycle等進行合并

代碼實作

const nativePage = Page
const lifecycle = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll']
let globalMixin = null

//全域mixin方法
wx.mixin = function(config){
  if(isType(config,'object')){
    globalMixin = config
  }
}

//原生Page代理
Page = function (config) {
  let mixins = config.mixins
  //加入全域mixin
  if(globalMixin){                                                         
    (mixins || (mixins=[])).unshift(globalMixin)
  }
  if (isType(mixins, 'array') && mixins.length > 0) {
    Reflect.deleteProperty(config, 'mixins')
    merge(mixins, config)
  }
  nativePage(config)
}

function merge(mixins, config) {
  mixins.forEach(mixin => {
    if (isType(mixin, 'object')) {
      //合并data、生命周期以及其他資料
      Object.keys(mixin).forEach(key => {
        if (key === 'data') {
          config[key] = Object.assign({}, mixin[key], config[key])
        } else if (lifecycle.includes(key)) {
          let nativeLifecycle = config[key]
          config[key] = function () {
            let arg = Array.prototype.slice.call(arguments)
            mixin[key].call(this, arg)
            return nativeLifecycle && nativeLifecycle.call(this, arg)
          }
        } else {
          config[key] = mixin[key]
        }
      })
    }
  })
}

//判斷型別工具
function isType(target, type) {
  let targetType = Object.prototype.toString.call(target).slice(8, -1).toLowerCase()
  type = type.toLowerCase()
  return targetType === type
}

View Code

在 app.js 引入 mixin 檔案就可以使用

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/176548.html

標籤：JavaScript

上一篇：用IIS進行部署，發布網頁，運行DEMO

下一篇：pyecharts和echarts的混合使用