小程序中模拟vue实现mixin混入方法扩展

• 模块文件

/**
 * 封装mixin，实现方法复用，mixin的具体方法在mixinJS文件夹中。
 * 使用说明：页面使用时，需require此文件以及mixinJS文件夹中需要的方法文件，在页面中导出page和方法文件。
 * 示例：
 *      var block = require("../../../mixinJS/block.js")
 *      var mixinUtil = require("../../../utils/mixin.js")
 *      let page = {// 页面的生命周期函数 //}
 *      Page(mixinUtil.mixinModule(page, block));
 * 
 */
module.exports.mixinModule = function () {
  let tempModel = {}
  let targetModel = {}
  for (let model in arguments) {
    for (let data in arguments[model]) {
      let l = arguments[model]
      if (tempModel[data] == undefined) {
        tempModel[data] = []
      }
      tempModel[data].push(l[data])
    }
  }
  for (let key in tempModel) {
    if (typeof tempModel[key][0] == "object") {
      targetModel[key] = {}
      for (let tempKey in tempModel[key]) {
        Object.assign(targetModel[key], tempModel[key][tempKey])
      }
    } else if (typeof tempModel[key][0] == "function") {
      targetModel[key] = function () {
        for (let func of tempModel[key]) {
          func()
        }
      }
    }
  }
  return targetModel;
}

• 方法文件

module.exports = {

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log(this)
  },
  toast(title) {
    wx.showToast({
      title: title,
      icon: 'success',
      duration: 2000
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
}

• 页面使用文件

var mixinUtil = require("../../../utils/mixin.js")
let page = {

  /**
 * 页面的初始数据
  */
  data: {

  },

  /**
 * 生命周期函数--监听页面加载
  */
  onLoad: function (options) {
    block.toast("成功")
  },

  /**
 * 生命周期函数--监听页面初次渲染完成
  */
  onReady: function () {

  },

  /**
 * 生命周期函数--监听页面显示
  */
  onShow: function () {

  },

  /**
 * 生命周期函数--监听页面隐藏
  */
  onHide: function () {

  },

  /**
 * 生命周期函数--监听页面卸载
  */
  onUnload: function () {

  },

  /**
 * 页面相关事件处理函数--监听用户下拉动作
  */
  onPullDownRefresh: function () {

  },

  /**
 * 页面上拉触底事件的处理函数
  */
  onReachBottom: function () {

  },

  /**
 * 用户点击右上角分享
  */
  onShareAppMessage: function () {

  }
}
var block = require("../../../mixinJS/block.js")
Page(mixinUtil.mixinModule(page, block));

• 补充：不是很理解 我这样做 和 使用app.js通用方法有什么区别。。。