zoukankan      html  css  js  c++  java
  • 功能⑩ 小程序跨页面通信解决思路 -- event.js

    • 在小程序里,每个 Page 都是一个模块,有着独立的作用域,因此 Page 间需要有一种通信策略。

    小程序登录&注册之后会自动切换首页角色+内容展示

    发布/订阅模式

    • 发布/订阅模式由一个发布者、多个订阅者以及一个调度中心所组成。

    发布 / 订阅模式如何实现解耦?

    1. 订阅者和发布者并不需要关心对方的状态

    2. 订阅者只管订阅事件并注册回调

    3. 发布者只管发布事件

    4. 其余一切交给调度中心来调度

    发布/订阅模式

    代码实现

    1 实现一个event.js

    var events = {};
    
    function on(name, self, callback) {
        var tuple = [self, callback];
        var callbacks = [];
            callbacks = events[name];
        if (Array.isArray(callbacks)) {
            callbacks.splice(name,1)
            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;
    

    2 具体调用

    2.1 将events挂载到App中,方便每个Page调用

    const event = require('./utils/event')
    App({
        event,
        ...
    })
    

    2.2 在首页onLoad生命周期中订阅 kLoginSuccessEventName 事件

    // index.js
    var app = getApp()
    Page({
        onLoad: function(){
            app.event.on('kLoginSuccessEventName', this, 
            () => {
                ...
            })
        },
        ...
    })
    
    

    2.3 在登录页中发布 kLoginSuccessEventName 事件

    // login.js
    var app = getApp()
    Page({
        kLoginSuccessEventName() {
            ...
            event.emit(event.kLoginSuccessEventName,true)
        },
        ...
    })   
    

    2.4 在首页onUnLoad生命周期中销毁之前订阅的 kLoginSuccessEventName 事件

    // index.js
    var app = getApp()
    Page({
        onUnLoad: function(){
            app.event.remove('kLoginSuccessEventName', this)
        },
        ...
    })
    
    
  • 相关阅读:
    练习:选择样条曲线中open的点
    练习:展平splineshape
    MAXScript调用DOTNET的OpenFileDialog
    练习:for循环
    MAXScript笔记_Function函数
    关于 MAXScript 拷贝文件夹及内容到其他位置
    关于逐行逐行读取文本内容并写入数组
    关于如何获取/清除 MAXScript 侦听器内的文本
    关于清除丢失贴图与IES文件
    关于 MAXScript 中文路径返回上级目录(精简版)
  • 原文地址:https://www.cnblogs.com/pleaseAnswer/p/15420791.html
Copyright © 2011-2022 走看看