⼩程序的模块化开发（mixin）
⼤前端时代我们都习惯把模块尽可能的拆的⽐较细，这样⽅便维护起来⽐较⽅便，起来也很容易。
官⽅已经给出了模板的引⽤，
<template name="title">
<view class='container'>
<view class='title'></view>
</view>
</template>
在需要的地⽅导⼊，引⽤
<import src="../template/index/block.wxml"/>
<template is="title"/>
wxss当中也只需要
@import "../template/index/block.wxss"
但在js逻辑中，看到很多⼈⼤多是通过ports的⽅式导出⼀个模块，然后在需要⽤的地⽅require某个模块，然后在某个⽣命周期函数中调⽤这个模块的某个⽅法。但这样模块之间的耦合仍然很⼤，并不能实现真正的拆分。熟悉vue的同学⼀定会了解mixin，但官⽅并没有给出⽅案，所以就⾃⼰写了⼀个，仅供参考。
建⼀个utils的⽂件夹，⽂件夹下建⼀个utils.js，内容如下
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;
}
⽐如我们现在的模块是block.js，在onReady⾥弹出⼀个toast，就随便举⼀个例⼦，⼤家可以在⾥⾯写⾃⼰的业务逻辑
// pages/type/index.js
/**
* 页⾯的初始数据
*/
data: {
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function () {
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow: function () {
},
/**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide: function () {
},
/**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload: function () {
},
/**
* 页⾯相关事件处理函数--监听⽤户下拉动作*/
onPullDownRefresh: function () {
},
/**js arguments
* 页⾯上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* ⽤户点击右上⾓分享
*/
onShareAppMessage: function () {
}
}
⽐如说在index.js⾥要⽤这个模块，那么只需要调这个⽅法把两个模块混合进来var block = require("../template/index/block.js")
var mixinUtil = require("../../utils/util.js")
let page = {
/**
* 页⾯的初始数据
*/
data: {
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function () {
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow: function () {
},
/
**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide: function () {
},
/**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload: function () {
},
/**
* 页⾯相关事件处理函数--监听⽤户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页⾯上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* ⽤户点击右上⾓分享
*/
onShareAppMessage: function () {
}
}
Page(mixinUtil.mixinModule(page,block))；这样就实现了功能的⼀个拆分

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。