推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序页面通讯以及组件化的一些思考
发布时间:2020-12-01组件页面通信
使用globalData或者storage的弊端(造成的隐蔽的bug)。
使用eventBus的问题。(使用复杂)
尝试解决方案
event + emit
invoke(推荐)
混合(mixin)
混合可以将组之间的可复用部分抽离，从而在组件中使用混合时，可以将混合的数据，事件以及方法注入到组件之中。混合分为两种：
默认式混合
兼容式混合
默认式混合
对于组件data数据，events事件 采用默认式混合，即如果组件未声明该数据，组件，事件，自定义方法等，那么将混合对象中的选项将注入组件这中。对于组件已声明的选项将不受影响。
兼容式混合
对于组件methods响应事件，以及小程序页面事件将采用兼容式混合，即先响应组件本身响应事件，然后再响应混合对象中响应事件。
event.js
var events = {};
function on(name, self, callback) {
var tuple = [self, callback];
var callbacks = events[name];
if (Array.isArray(callbacks)) {
callbacks.push(tuple);
} else {
events[name] = [tuple];
}
}
function remove(name, self) {
var callbacks = events[name];
if (Array.isArray(callbacks)) {
events[name] = callbacks.filter((tuple) => {
return tuple[0] != self;
})
}
}
function emit(name, data) {
var callbacks = events[name];
if (Array.isArray(callbacks)) {
callbacks.map((tuple) => {
var self = tuple[0];
var callback = tuple[1];
callback.call(self, data);
})
}
}
exports.on = on;
exports.remove = remove;
exports.emit = emit;
invoke.js
function getAllPages() {
let stack = getCurrentPages();
// 第一个入栈
stack.forEach((item) => {
if (myStatcks.length === 0) {
myStatcks = stack.concat();
} else {
for (let i = 0, _len = myStatcks.length; i < _len; i++) {
let ele = myStatcks[i];
if (ele.__route__ === item.__route__) {
myStatcks[i] = item;
break;
} else {
myStatcks.push(item);
break;
}
}
}
});
// }
return myStatcks;
}
module.exports = function $invoke(router, method, args) {
let pages = getAllPages();
let targetPage;
for (let index = 0, _len = pages.length; index < _len; index++) {
if (pages[index].__route__ === router) {
targetPage = pages[index];
break;
}
}
targetPage[method].call(targetPage, ...args);
