用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

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

天下雪 2017-3-30 00:23

作者:Uheinanba,来自原文地址组件页面通信使用globalData或者storage的弊端(造成的隐蔽的bug)。使用eventBus的问题。(使用复杂)尝试解决方案event + emitinvoke(推荐)混合(mixin)混合可以将组之间的可复用部分抽离 ...

作者:Uheinanba,来自原文地址

组件页面通信

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

尝试解决方案

  • event + emit
  • invoke(推荐)

混合(mixin)

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

  • 默认式混合
  • 兼容式混合

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

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

event.js

  1. var events = {};
  2. function on(name, self, callback) {
  3. var tuple = [self, callback];
  4. var callbacks = events[name];
  5. if (Array.isArray(callbacks)) {
  6. callbacks.push(tuple);
  7. } else {
  8. events[name] = [tuple];
  9. }
  10. }
  11. function remove(name, self) {
  12. var callbacks = events[name];
  13. if (Array.isArray(callbacks)) {
  14. events[name] = callbacks.filter((tuple) => {
  15. return tuple[0] != self;
  16. })
  17. }
  18. }
  19. function emit(name, data) {
  20. var callbacks = events[name];
  21. if (Array.isArray(callbacks)) {
  22. callbacks.map((tuple) => {
  23. var self = tuple[0];
  24. var callback = tuple[1];
  25. callback.call(self, data);
  26. })
  27. }
  28. }
  29. exports.on = on;
  30. exports.remove = remove;
  31. 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. module.exports = function $invoke(router, method, args) {
  24. let pages = getAllPages();
  25. let targetPage;
  26. for (let index = 0, _len = pages.length; index < _len; index++) {
  27. if (pages[index].__route__ === router) {
  28. targetPage = pages[index];
  29. break;
  30. }
  31. }
  32. targetPage[method].call(targetPage, ...args);
  33. }

xcx.js

  1. 邀请
    鲜花
    鲜花
    鸡蛋
    鸡蛋
    分享至 : QQ空间
    收藏
    原作者: Uheinanba

    相关阅读