美文网首页
ts中的事件传递

ts中的事件传递

作者: 小人物灌篮 | 来源:发表于2018-12-23 17:33 被阅读16次

在ts中,我们也需要一个通用的事件传递机制,类似于android中的eventBus,当然这个在ts中实现起来是很简单的。

代码如下:
核心类,处理事件的核心/。

/**
 * 观察者
 */

namespace T {

    export class Observer {
        /** 回调函数 */
        private callback: Function = null;
        /** 上下文 */
        private context: any = null;

        constructor(callback: Function, context: any) {
            let self = this;
            self.callback = callback;
            self.context = context;
        }

        /**
         * 发送通知
         * @param args 不定参数
         */
        notify(...args: any[]): void {
            let self = this;
            self.callback.call(self.context, ...args);
        }

        /**
         * 上下文比较
         * @param context 上下文
         */
        compar(context: any): boolean {
            return context == this.context;
        }
    }
}

下面是的整个事件的处理中心。


/**
 * 事件消息处理
 */

namespace T{

    export class EventCenter {
        /** 监听数组 */
        private listeners = {};

        private static instance = null;

        public static getInst(): EventCenter {
            if(!this.instance || this.instance == null) {
                this.instance = new EventCenter();
            }
            return this.instance;
        }
        /** 
         * 注册事件
         * @param name 事件名称
         * @param callback 回调函数
         * @param context 上下文
         */
        public register(name: string, callback: Function, context: any) {
            let observers: Observer[] = this.listeners[name];
            if (!observers) {
                this.listeners[name] = [];
            }
            this.listeners[name].push(new Observer(callback, context));
        }

        /**
         * 移除事件
         * @param name 事件名称
         * @param callback 回调函数
         * @param context 上下文
         */
        public removeListener(name: string, context: any) {
            let observers: Observer[] = this.listeners[name];
            if (!observers) return;
            let length = observers.length;
            for (let i = 0; i < length; i++) {
                let observer = observers[i];
                if (observer.compar(context)) {
                    observers.splice(i, 1);
                    break;
                }
            }
            if (observers.length == 0) {
                delete this.listeners[name];
            }
        }

        /**
         * 发送事件
         * @param name 事件名称
         */
        public fire(name: string, ...args: any[]) {
            let observers: Observer[] = this.listeners[name];
            if (!observers) return;
            let length = observers.length;
            for (let i = 0; i < length; i++) {
                let observer = observers[i];
                observer.notify(name, ...args);
            }
        }
    }
}

使用起来也很简单,使用示例代码如下:
事件的监听

T.EventCenter.getInst().register("test", ()=>{
    //dosomthing()
},this);
// 注意,需要在和removeListener成对使用
T.EventCenter.getInst().removeListener("test",this);

发送消息

T.EventCenter.getInst().fire("test");

打包成js

当然我们可以选择将其打包成js,操作也很简单,在项目的更目录下添加tsconfig.json的ts项目工程配置文件,示例的代码如下:

{
    "compilerOptions": {
        "target": "es5",
        "noImplicitAny": false,
        "lib": [
            "dom",
            "es5",
            "es6",
            "es2015.promise"
        ],

        "removeComments": true,
        "sourceMap": false,
        "declaration": true,
        "outFile": "bin/eventBus.js"
    },
    "include": [
        "src/*.ts",
        "libs/*.d.ts"
    ],
    "exclude": [
        "node_modules",
        "library",
        "local",
        "temp",
        "build",
        "settings"
    ]
}

详情参考官网https://www.tslang.cn/docs/handbook/tsconfig-json.html.

相关文章

  • ts中的事件传递

    在ts中,我们也需要一个通用的事件传递机制,类似于android中的eventBus,当然这个在ts中实现起来是很...

  • ts-bus 简单使用

    今天开发中用到了 ts-bus 这个库,用于事件传递挺方便的。文档地址:https://www.npmjs.com...

  • View的事件体系全面分析

    基础概念 1、view中事件传递会调用的几个方法 2、ViewGroup中事件传递会调用的几个方法 3,事件指的是...

  • 详谈Android事件分发机制

    了解Android中的事件分发机制的基本流程: 事件的传递过程是Activity把事件传递给ViewGroup,然...

  • iOS 事件响应链机制

    iOS中的事件的产生和传递 首先要知道 事件传递和响应过程 相反的。 事件的传递 当你点击了屏幕会产生一个触摸事件...

  • Vue构造器里面的选项:methods

    绑定事件的时候,如何传递事件对象event我们在平时写js代码的时候的绑定事件: 在vue中传递事件对象呢?是通过...

  • Android基础(28)事件分发

    1)请描述一下View事件传递分发机制2)Touch事件传递流程3)事件分发中的onTouch 和onTouchE...

  • LayaBox自定义事件

    EventMgrts.ts文件 添加侦听事件 注册事件

  • 事件传递

    事件传递和事件响应是两个概念事件传递:应用接受到事件,则放入到application事件队列中,为什么是队列,不是...

  • 01进阶之路-UI视图

    1. 事件传递机制和响应者链条 学习链接 事件传递机制iOS中的事件可以分为3大类型 1 触摸事件 2 加速计...

网友评论

      本文标题:ts中的事件传递

      本文链接:https://www.haomeiwen.com/subject/xgircqtx.html