微信小程序页面通讯以及组件化的一些思考

作者：Uheinanba，来自原文地址

组件页面通信

• 使用globalData或者storage的弊端(造成的隐蔽的bug)。
• 使用eventBus的问题。(使用复杂)

尝试解决方案

• event + emit
• invoke(推荐)

混合(mixin)

混合可以将组之间的可复用部分抽离，从而在组件中使用混合时，可以将混合的数据，事件以及方法注入到组件之中。混合分为两种：

• 默认式混合

• 兼容式混合

  1. 默认式混合 
     对于组件data数据，events事件 采用默认式混合，即如果组件未声明该数据，组件，事件，自定义方法等，那么将混合对象中的选项将注入组件这中。对于组件已声明的选项将不受影响。

  2. 兼容式混合 
     对于组件methods响应事件，以及小程序页面事件将采用兼容式混合，即先响应组件本身响应事件，然后再响应混合对象中响应事件。

event.js

1. var events = {};
2.  
3. function on(name, self, callback) {
4. var tuple = [self, callback];
5. var callbacks = events[name];
6. if (Array.isArray(callbacks)) {
7. callbacks.push(tuple);
8. } else {
9. events[name] = [tuple];
10. }
11. }
12.  
13. function remove(name, self) {
14. var callbacks = events[name];
15. if (Array.isArray(callbacks)) {
16. events[name] = callbacks.filter((tuple) => {
17. return tuple[0] != self;
18. })
19. }
20. }
21.  
22. function emit(name, data) {
23. var callbacks = events[name];
24. if (Array.isArray(callbacks)) {
25. callbacks.map((tuple) => {
26. var self = tuple[0];
27. var callback = tuple[1];
28. callback.call(self, data);
29. })
30. }
31. }
32.  
33. exports.on = on;
34. exports.remove = remove;
35. exports.emit = emit;

invoke.js

1. function getAllPages() {
2. let stack = getCurrentPages();
3. // 第一个入栈
4. stack.forEach((item) => {
5. if (myStatcks.length === 0) {
6. myStatcks = stack.concat();
7. } else {
8. for (let i = 0, _len = myStatcks.length; i < _len; i++) {
9. let ele = myStatcks[i];
10. if (ele.__route__ === item.__route__) {
11. myStatcks[i] = item;
12. break;
13. } else {
14. myStatcks.push(item);
15. break;
16. }
17. }
18. }
19. });
20. // }
21. return myStatcks;
22. }
23.  
24. module.exports = function $invoke(router, method, args) {
25. let pages = getAllPages();
26. let targetPage;
27. for (let index = 0, _len = pages.length; index < _len; index++) {
28. if (pages[index].__route__ === router) {
29. targetPage = pages[index];
30. break;
31. }
32. }
33. targetPage[method].call(targetPage, ...args);
34. }